Selector types

Type, Class, ID, and Universal selectors

  • Type selector (Element selector) : The style is applied to all elements of a certain type.
p { color: red }
  • Class selector : The style is applied to all elements with the specified class.
.example { color: red }
  • ID selector : The style is applied to one identified element.
#example { color: red }

* { color: red }

Contextual selector

Descendant selectors

SelectorA SelectorB

When the two selectors are separated by a space, the style is applied only to the SelectorB of descendant of the SelectorA.

p strong { color: red; }

The document tree

In this example, the style is applied only to STRONG element of descendant of P element.

Example pagenew window

Child selectors

SelectorA > SelectorB

When the two selectors are separated by a ">", the style is applied only to the SelectorB of child of the SelectorA.

p > strong { color: red; }

The document tree

In this example, the style is applied only to STRONG element of child of P element.

Example pagenew window

Adjacent sibling selectors

SelectorA + SelectorB

When the two selectors are separated by a "+", the style is applied only to the SelectorB that immediately follows the SelectorA. (The SelectorA and SelectorB share the same parent.)

h2 + p { color: red; }

The document tree

In this example, the style is applied only to P element that immediately follows H2 element.

Example pagenew window