Relative styling combinators

Hi

Is there any way to find more information about the combinators for relative styling rules? What is "Same set “” " and what is the rules before and after block?

The documentation doesn’t really say much, and Google is not very helpful either.

1 Like

Hi @kgeee,

Sorry to hear you’re experiencing trouble with combinators.

In fact, these are common combinators in CSS and not Cwicly specific.

Be sure to check this out: CSS selectors - CSS: Cascading Style Sheets | MDN

Please let me know if this helps!

Hi Araminta

Thank you for your quick answer. What does the “same set” mean in this context? And what is the logic of the rules for the before and after the block?

The reason I am asking is in your newest video two lines of rules are set. I am not sure how they relate to each other. Is the first line to check if the class is set, and is the second line deciding what rule to apply if the first line is matched? I don’t think the UI is quite clear here.

You basically are building your classes in a visual way.
A preview is displayed right below the name input.

Same set means the following:
.class.class

You can learn everything about it (and all other options the dropdown contains) with the link, Araminta posted above.
It’s all about how to target your selectors in the right way, so your CSS styles can be applied properly.

In your example, it means that the class you apply, needs to be available directly on your block.
An example would be a global class or a virtual class.

You basically can test things out by yourself, the class preview is updated in real-time.

So, when you apply a before selector, it gets applied before your block class, for instance:

.class .blockclass

Basic understanding of CSS is required.
You can verify your applied rules/selectors with the class preview.

2 Likes

Ahhh, I get it now. It’s just a simple WYSIWYG editor for building the class your targeting. Thanks. I thought it was more complicated.