Selectors

To target portions of a document's syntax tree, you will use zone selectors. Zone selectors in Espresso are very similar to CSS selectors.

Differences from CSS selectors

On the web, you can assign multiple classes to a single element (<div class="one two"></div>), and then reference an element with all of those classes like so:

.one.two { /* properties here */ }

Espresso uses periods in selectors differently. For Espresso, you are identifying a particular syntax zone, and periods are used to separate multiple identifiers attached to that zone. So, for instance, the syntax zone identifier for many HTML tags is "tag.open.block.html". In your selector, you can target that zone using any of the following selectors:

tag
tag.open
open.tag
tag.open.block

The more parts of the identifier that you include, the more specific your rule. Periods are used to separate multiple identifiers attached to a single zone, and the order doesn't matter.

Simple selectors

Simple selectors target a single element in the syntax tree. Espresso supports the following options for a selector:

• Period-delineated zone identifiers (as discussed above)
• The universal * selector that matches any element
• :has-child(other.selector) to specify that the target must have a child matching other.selector
• [text='some text here'] to match a target that contains the specified text (not available in all plug-in subsystems)
• :not(selector) to match an element that does not match selector
• :capture(name) to capture this particular element using name. This is only available in some subsystems, like CodeSense.

Just like in CSS, you can separate multiple selectors with commas virtually anywhere in Espresso that selectors are accepted.

Combinators

Espresso defines four combinators that allow you to specify more complex relationships between elements in the selector:

• simple1 simple2: simple descendant combinator; "simple2" must be a descendant of "simple1" to match
• simple1 > simple2: child combinator; "simple2" must be a direct child of "simple1"
• simple1 + simple2: adjacent combinator; "simple2" must be an immediately adjacent sibling to "simple1"
• simple1 ~ simple2: indirect adjacent combinator; "simple2" must follow an element matching "simple1", possibly with one or more other elements in between