Cheat Sheet

SPOT CSS is mainly about how to generate selectors. That's why most of the framework's mixins are used to generate selectors. This "Cheat Sheet" is designed to help you find the type of selector modification you need to do and then see the solution to it.

The first and most important thing is to realize which element you want to style. And therefore whether you are in the right component file and also in the right element block.

And then the second step is to know how you want to change the selector.

Once you know that, with this cheat sheet you will find the solution very quickly. And even faster with filtering.

Filter

Target element you want to style:

What do you want to insert into selector:

Position of the insertion/deletion in the selector:

Mixin which addresses the solution:

Difficulty of the topic:

Filter result: ?? of ?? total

You have to choose at least one item from each filter category above!

New component

How to declare a new component?

.componentThe selector you want to insertThe element you want to style

Components sub-element

How to declare a components sub-element?

.component .elementThe selector you want to insertThe element you want to style

Components deeper sub-element

How to declare more deeper sub-element?

.component .parent-element .elementThe selector you want to insertThe element you want to style

Components deeper sub-element with >

How to declare more deeper sub-element with > combinator selector?

.component > .parent-element > .elementThe selector you want to insertThe element you want to style

Pseudo-element on component

How to declare a pseudo-element on component?

.component::beforeThe selector you want to insertThe element you want to style

Pseudo-element on sub-element

How to declare a pseudo-element on sub-element?

.component .element::beforeThe selector you want to insertThe element you want to style

Component state

How to declare a state on component root element?

.componentThe element you want to style:hoverThe selector you want to insert

Component variant

How to declare a variant on component root element?

.componentThe element you want to style.variantThe selector you want to insert

Sub-element when component has state

How to declare a state on component root element but style a sub-element?

.component:focusThe selector you want to insert .elementThe element you want to style

Component variant for element

How to declare a variant on component root element but style a sub-element?

.component.variantThe selector you want to insert .elementThe element you want to style

State on sub-element

How to declare a state on sub-element?

.component .elementThe element you want to style:activeThe selector you want to insert

Variant on sub-element

How to declare a variant on sub-element?

.component .elementThe element you want to style.variantThe selector you want to insert

State on parent element

How to declare a variant on parent element?

.component .parent-element:hoverThe selector you want to insert .elementThe element you want to style

Variant on parent element

How to declare a variant on parent element?

.component .parent-element.variantThe selector you want to insert .elementThe element you want to style

Pseudo-element state

How to declare a state on pseudo-element?

.component .element:activeThe selector you want to insert::beforeThe element you want to style

A variant of component for pseudo-element

How to declare a variant of component for pseudo-element?

.component.variantThe selector you want to insert .element::beforeThe element you want to style

More states and variants at once

How to address more states and variants at once?

.component.variantThe selector you want to insert .elementThe element you want to style:hoverThe selector you want to insert

Sub-element with Tree-structural Pseudo-class

How to declare a tree-structural pseudo-class on sub-element?

.component .elementThe element you want to style:nth-child(2)The selector you want to insert

Component with Tree-structural Pseudo-class for sub-element

How to declare a tree-structural pseudo-class on component for sub-element?

.component:last-childThe selector you want to insert .elementThe element you want to style

A media query on current selector

How to declare a media query on current selector?

@media (min-width: 992px) {The selector you want to insert current-selectorThe element you want to style { ... } }

A container query on current selector

How to declare a container query on current selector?

@container (max-width: 700px) {The selector you want to insert current-selectorThe element you want to style { ... } }

Strengthen the current selector to prevent the use of !important

How to strengthen the current selector to prevent the use of !important? TODO

.component .elementThe element you want to style??????The selector which changes the
selector specificity { ... !importantThe rule you want to
prevent to use }

New component with :not() selector

How to declare a new component with :not() selector?

The selector you want to insertbutton:not(.btn)The element you want to style

Sub-element with :not() selector

How to declare a sub-element with :not() selector?

.component The selector you want to insertbutton:not(.btn)The element you want to style

A variant with :not() selector

How to declare a variant with :not() selector?

.component buttonThe element you want to styleThe selector you want to insert:not(.btn)

New component with complex selector

How to declare a new component with complex selector?

.some-parent The selector you want to insert.componentThe element you want to style

Component Tree-structural Pseudo-class

How to declare a tree-structural pseudo-class on component root element?

.componentThe element you want to style:first-childThe selector you want to insert

Components Context

How to declare a context of the component?

.contextThe selector you want to insert .componentThe element you want to style

Sub-elements Context

How to declare a context of the sub-element?

.context >The selector you want to insert .component .elementThe element you want to style

Pseudo-elements Context

How to declare a context of the pseudo-element?

.context +The selector you want to insert .component .element::beforeThe element you want to style

Component in its own Context

How to declare a context of of the same component?

.component ~The selector you want to insert .componentThe element you want to style

Component element variant

How to declare a element selector variant on component root element?

buttonThe selector you want to insert.componentThe element you want to style

Sub-elements element variant

How to declare a element selector variant on sub-element?

.component buttonThe selector you want to insert.elementThe element you want to style

Pseudo-elements element variant

How to declare a element selector variant on pseudo-element?

.component buttonThe selector you want to insert.element::afterThe element you want to style

Parent elements element variant

How to declare a element selector variant on parent element?

.component buttonThe selector you want to insert.parent-element .elementThe element you want to style

Extra elements before sub-element

How to add extra elements before sub-element?

.component .inner-context .other-wrapperThe selector you want to insert .elementThe element you want to style

Extra elements with ~ before sub-element

How to add extra elements with ~ before sub-element?

.component .inner-context ~The selector you want to insert .elementThe element you want to style

Extra elements with + before sub-element

How to add extra elements with + before sub-element?

.component .inner-context +The selector you want to insert .elementThe element you want to style

Extra elements much higher before sub-element

How to add extra elements much higher before sub-element?

.component .inner-context +The selector you want to insert .parent-element .elementThe element you want to style

Direct child combinator selector before sub-element

How to declare direct child combinator selector before sub-element?

.component .parent-element >The selector you want to insert .elementThe element you want to style

A component with inner conditions

How to declare a component with inner conditions?

.componentThe element you want to style:has(.sub-element)The selector you want to insert

A sub-element with inner conditions

How to declare a sub-element with inner conditions?

.component .elementThe element you want to style:has(.sub-element)The selector you want to insert

A variant with inner conditions in sub-element

How to declare a variant with inner conditions in sub-element?

.component .elementThe element you want to style:has(.sub-element)The selector you want to insert

A component with :is() condition

How to declare a component with :is() condition?

.componentThe element you want to style:is(.condition)The selector you want to insert

A sub-element with :is() condition

How to declare a sub-element with :is() condition?

.component .elementThe element you want to style:is(.condition)The selector you want to insert

A variant with :is() condition on sub-element

How to declare a variant with :is() condition on sub-element?

.component .elementThe element you want to style:is(.sub-element)The selector you want to insert

A component with :where() condition

How to declare a component with :where() condition?

.componentThe element you want to style:where(.condition)The selector you want to insert

A sub-element with :where() condition

How to declare a sub-element with :where() condition?

.component .elementThe element you want to style:where(.condition)The selector you want to insert

A variant with :where() condition on sub-element

How to declare a variant with :where() condition on sub-element?

.component .elementThe element you want to style:where(.sub-element)The selector you want to insert

State with the same name on higher parent element

How to address state with the same name on higher parent element?

.component .parent-element:hoverThe selector you want to insert .elementThe element you want to style:hoverThe same state is registered on
current element

State with the same name on the nearest parent element

How to address state with the same name on the nearest parent element?

.component:hoverThe same state is registered on
current element .parent-element:hoverThe selector you want to insert .elementThe element you want to style

State with the same name on higher parent elements

How to address state with the same name on higher parent elements?

.component:hoverThe selector you want to insert .parent-element:hoverThe same state is registered on
current element .elementThe element you want to style

Variant with the same name on higher parent elements

How to address variant with the same name on higher parent element?

.component .parent-element.activeThe selector you want to insert .elementThe element you want to style.activeThe same variant is registered on
current element

A tree-structural pseudo-element in selector which already contains the same

How to declare a tree-structural pseudo-element in selector which already contains the same?

.component .parent-element:first-childThe same variant is already applied
in the selector .elementThe element you want to style:first-childThe selector you want to insert

A very complex/special selector which you cannot do with classic mixins

How to declare a very complex/special selector which you cannot do with classic mixins?

.component .element .add + .whatever ~ .you .can:not([do])The element you want to styleThe selector you want to insert

Addressing any sub-element

How to address any sub-element?

.component .element *The element you want to styleThe selector you want to insert

Addressing any direct child element

How to address any direct child element?

.component .element > *The element you want to styleThe selector you want to insert

Addressing any direct child element except the first child

How to address any direct child element except the first child?

.component .element > * + *The element you want to styleThe selector you want to insert

A variant on component which is another component

How to declare a variant on component which is another component?

.componentThe element you want to style.another-conflicting-componentThe selector you want to insert

A variant on sub-element which is another component

How to declare a variant on sub-element which is another component?

.component .elementThe element you want to style.another-conflicting-componentThe selector you want to insert

Replacing the whole selector

How to replace the whole selector?

.component .elementThe selector you want to omit.totaly-different #whole [custom] selector .wherever .is-neededThe selector you want to insert

Excluding some of the multiple selectors

How to exclude some of the multiple selectors?

.component .branch-aThe selector you want to keep .elementThe element you want to style,
 .component .branch-b .element,
 .component .branch-c .elementThe selector you want to omit

Excluding some of the multiple variants

How to exclude some of the multiple variants?

.component.primary, The selector you want to omit.componentThe element you want to style.secondaryThe selector you want to keepThe selector you want to omit, .component.tertiary

Excluding some of the multiple pseudo-element selectors

How to exclude some of the multiple pseudo-element selectors?

.component .element::beforeThe element you want to styleThe selector you want to keepThe selector you want to omit,
 .component .element::after

Omit a part of the selector

How to omit a part of the selector?

.component .parent-elementThe selector you want to omit .elementThe element you want to style