Selectors

Maple classes are not limited to the element they are typed on. By using special delimiters, you can apply conditional styles based on parent states, target children, or manage self-states like hover or active.

The Three Delimiters

Maple introduces three simple characters to navigate the DOM tree. These delimiters allow elements to manage their own styles relative to their surroundings:

Parent-state (^)

Applies styles based on an ancestor's state or class. ^.active:bgc-red

Self (&)

Targets own pseudo-classes, pseudo-elements, or attributes. &:hover:bgc-red

Child (/)

Targets direct or nested descendants. /span:bgc-red

Combining Delimiters

Any CSS selector is valid before utility classes. You can combine these delimiters to create precise, complex selectors.


<div class="^.state-active:bgc-red">
  Red background when in a parent having "state-active" class
</div>

<div class="^.card:hover:bgc-red">
  Red background when in a parent having "card" class and it's hovered
</div>

<div class="&:hover:bgc-red">
  Red background when hovered
</div>

<div class="&[data-active='true']:bgc-red">
  Red background when has "data-active" attribute
</div>

<div class="/span:bgc-red">
  <span>
    Red background
  </span>
</div>

<div class="/+span:bgc-red"></div>
<span>Red background</span>

<!-- You can combine these delimiters to create more complex selectors. -->
<div class="^.state-active&:hover/span:bgc-red">
  <span>
    Red background when in an ancestor having
    "state-active" class and parent is hovered
  </span>
</div>

The Space Combinator

Since CSS class names cannot contain spaces, Maple uses the underscore _ as a delimiter for the CSS space combinator. This is essential for targeting nested children or complex parent states.


<div class="^.card_.card-header&:before:content='🙂'">
  <!-- Print 🙂 emoji when in a "card-header" element
  which is also in a "card" element -->
</div>

Complex Logic

Maple supports the full range of modern CSS selectors, including powerful functional pseudo-classes like :not and :has:


<div class="^.card:not([class*='p-']):p-4">
  Padding is 1 rem when in a card element which
  doesn't have any padding class
</div>

<div class="^.card:has(>.featured):bgc-red">
  Red background when in a card which
  has a direct child with featured class
</div>

Utility-first Approach

Parent and Self selectors are your primary tools. They allow components to be truly isolated and react to state without leaking styles. Use them to manage element states cleanly.

Child selectors / should be reserved for cases where you have no control over the children (e.g., rendering markdown or third-party components).

Utility-first vs Child Selectors

Overusing child selectors can lead to a tightly coupled components that contradicts the utility-first philosophy. If you control the child element, style it directly.

Selector Helpers

Maple provides short aliases for frequently used CSS selector patterns to keep your class strings as concise as possible:

Helper

Native CSS Equivalent

:rtl

[dir='rtl']

:ltr

[dir='ltr']

:odd

:nth-child(odd)

:even

:nth-child(even)


<div class="^:rtl:pr-2">
  Padding-right is 0.5rem when in a rtl parent
</div>

<div class="&:odd:bgc-red">
  Red background when odd child
</div>

<div class="&:even:bgc-blue">
  Blue background when even child
</div>