Selectors

Selectors are used to define the conditions upon which certain styles shall apply to an element.

For example, viewport selectors let you apply styles to certain viewport sizes only.

 

Combinators

Combinators allow you to:

  • style the current element while applying selectors to other elements, and/or

  • style other elements.

 

Reading selectors, combinators

Both selectors and combinators shall be read right-to-left.

For example, consider the following expression:

hover:+/bg-c-blue

It shall be read as follows:

  • make the background color blue (bg-c-blue),

  • if the parent element's (/)

  • previous sibling (+)

  • is hovered (hover:).

This is also how CSS engines process CSS selectors.