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 (for instance <div class=“first second”></div>), and then reference an element with all of those classes like so:

.first.second { /* properties here */ 

Espresso, on the other hand, uses periods in selectors slightly 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 “”. In your selector, you can target that zone using any of the following selectors:


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 Sugar 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.


Espresso defines three 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: indirect adjacent combinator; “simple2” must follow an element matching “simple1”, possibly with one or more other elements in between