# Relative Styling

In Cwicly, relative styling refers to the exclusive feature where you, the builder, can target the style of children blocks from the parent block, and modify their styles from said parent’s editor panel. Any and every block can be targeted in the rule editor.

{% hint style="info" %}
Basically, it is visual CSS Rules.
{% endhint %}

You no longer need to write CSS and code blindly when trying to apply styling from blocks.

In layman terms, to illustrate this term let’s use the example of genetics. If two parents are redheads, their child will receive the redhead gene. So a gene/style is exclusively passed down/targetable from the parent.

<details>

<summary>Add</summary>

1. Select a block
2. Open the Block Inspector
3. Go to the Design Tab
4. Find the Relative Styling Tab
5. Add new Relative Style
6. Open the Rules Editor
7. Add desired rules
8. Open the Relative Styling Editor by selecting the relative style
9. Add styling in the Relative Styling Editor

</details>

{% embed url="<https://www.youtube.com/watch?v=B-7nQUm8hAk>" %}
How To - Relative Styling
{% endembed %}

## Free-form rules

{% hint style="info" %}
This setting can be enabled by default from the [Global Styles > Backend tab](https://docs.cwicly.com/global-styles/global-styles/global-settings/backend#free-form-rules)
{% endhint %}

In the Relative Styling rules, you can manually write your own rules.

This allows even more flexibility, as you can place your .blockclass and :pseudos selectors wherever you want in the rule.

<figure><img src="/files/dsXR2mrD0Eg1pZ4KcrhV" alt=""><figcaption><p>Free-form rules example</p></figcaption></figure>

#### Given selectors

Both the .blockclass and :pseudos selectors are proposed.

* **.blockclass :** placeholder which automatically replaces the current block's class or global class (depending on what you're editing)
* **:pseudos** : automatically replaced with the [pseudo classes](https://docs.cwicly.com/design/pseudo-classes-elements#pseudo-classes) that have styles applied to them, from the Relative Styling editor.

## Cheat sheet

Useful list of Relative Style rules that we commonly use.

### Target child from parent block

| Combinator     | Selector type | Selector              |
| -------------- | ------------- | --------------------- |
| Descendant " " | Class         | child-class-name-here |

### Selected styling

| Combinator | Selector type | Selector |
| ---------- | ------------- | -------- |
| --         | Class         | selected |

### Disabled styling

| Combinator | Selector type | Selector |
| ---------- | ------------- | -------- |
| --         | Attribute     | disabled |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cwicly.com/design/relative-styling.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.