Special Combinators

Documentation on existing CSS combinators can be found on other websites.

ACSS introduces a few new combinators that may not be performant enough to add to the native CSS styling engine, but can be used in ACSS.

These combinators can help you avoid adding new reference HTML markup, like having to add an id or class, etc.

There is a minor performance hit as the combinators are not native to the browser.

You can only use these combinators in ACSS config. At this time, you cannot use them in standard CSS declarations.

 

Closest Combinator (<)

The closest combinator selects the closest parent element that matches.

The following example selects the closest <div> element that is a parent of the <button> that was clicked.

button:click {
    & < div {
        background-color: yellow;
    }
}

 

Previous Adjacent Sibling Combinator (-)

This ACSS combinator is the opposite of the adjacent sibling combinator in CSS (+).

The previous adjacent sibling combinator is used to select an element that is directly before another specific element.

Sibling elements must have the same parent element, and "previous adjacent" means "immediately before".

The following example selects the first <p> element that is placed immediately before any <div> element on the page:

button:click {
    div - p {
        background-color: yellow;
    }
}

 

Previous General Sibling Combinator (-~)

This ACSS combinator is the opposite of the general sibling combinator in CSS (~).

The previous general sibling combinator selects all elements that are previous siblings of a specified element.

The following example selects all <p> elements that are previous siblings of <div> elements:

button:click {
    div -~ p {
        background-color: yellow;
    }
}