MacRabbit

To take advantage of a document’s syntax tree, we need to be able to target specific zones. Zone selectors exists for just that. Their structure should be very familiar to anyone who has worked with CSS. Let’s have a look at the main similarities and differences.

Example

bla.bla:has-child(bla) > yadda – rara + boo

Comma-separated

This almost goes without saying, but in almost every case you can separate several selectors with a comma.

Simple selectors

Just like in CSS, simple selectors target a single element in the syntax tree. Espresso selectors are somewhat different. Minimally, a simple selector must consist of either:

• The universal selector * that matches any element
• A list of required zone classes in the format class1.class2.class3. Espresso has no concept of types or identifiers, so every piece is treated as a class. The order of the classes is not important — a second.first selector will match a zone name first.second.

These targeting mechanisms are rather basic, so Espresso defines some useful extra pseudo-classes.

• :has-child(other selector) allows you to specify that the target needs to have a child matching other selector.
• [text=‘some text here’] allows you to inspect the textual content of the target. Note that this selector feature is not available in some subsystems.
• :capture(captured name) allows you to capture this particular element using a certain key. This is only useful (and available) in some subsystems, like the CodeSense targeting mechanism.

Combinators

CSS defines 4 so-called combinators, which allow you to specify more complex relationships between elements in the selector. Espresso supports all these combinators:

• simple1 simple2: the descendant combinator specifies that the element matching simple2 must be a descendant of an element matching simple1.
• simple1 > simple2: the child combinator specifies that the element matching simple2 must be a direct child of an element matching simple1.
• simple1 ~ simple2: the indirect adjacent combinator specifies that the element matching simple2 must follow an element matching simple1, possibly with several other elements in between.
• simple1 + simple2: the direct adjacent combinator specifies that the element matching simple2 must immediately follow an element matching simple1, without any other elements in between.
• :not(simple1) matches anywhere that isn’t simple1. A common use for this is when you don’t want codesense or snippets to show up in string literals or comments – :not(string, comment)