# Relative Styling

Relative Styling consists of the visual CSS rules that allow you to control the style of other blocks from a chosen block. Using the Rule Editor, the target block can be selected and then styled visually from the Parent's Editor Panel.

A Style Rule consists of a Combinator, a Selector Type and a Selector.

# Combinator

A Combinator sets out the relationship between a parent element and another element such as a descendant, child, adjacent sibling, general sibling, etc.

Same Set Selects a Parent with an additional class.

Descendant Selects all elements that are descendants of a specified element.

Child Selects all elements that are direct children of a specified element.

Adjacent Sibling Selects an element placed directly after another element. Sibling elements must have the same parent element, and "adjacent" means "immediately following".

General Sibling Selects siblings of an element even if they are not directly adjacent.

Comma Applies a Relative Styling rule to multiple selected elements

  1. Open the Relative Styles Rules
  2. Select a Combinator

# Selector Type

Selector Types select the block you want to style. In CSS, selectors are used to target the HTML elements on the web pages you want to style.

ID selects a specific element using the block ID.

Class selects elements with a specific class attribute.

Universal selects all element types in a page.

Type selects elements depending on the type of block and allows general changes to style.

Attribute selects elements with some specific attribute.

Psuedo-class selects elements under certain conditions by using a 'fake' class.

Pseudo-elements selects elements under certain conditions by using a 'fake' element.

  1. Open the Relative Styles Rules
  2. Select a Selector Type

# Selector

Selector sets the block or element you wish to style.

  1. Open the Relative Styles Rules
  2. Select a Selector
  1. Select Add Rule under Rules in Relative Styles
  2. or selec at the end of the last Rule.
  1. Select at the end of the Rule to be removed.
  1. Select Remove Style under Rules in the Relative Styles panel.
  2. This will remove the last Style added.

# Relative Styles Editor

The Relative styles Editor allows you to style the selected blocks you control from the relative Styles Rules.

  1. Select Editor in the Relative Styling panel
  2. Apply the desired styles to your block or element