Selector types

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 Internet ExplorerFirefoxOpera

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 page

Child selectors

SelectorA > SelectorB FirefoxOpera

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 page
(Not supported in MSIE)

Adjacent sibling selectors

SelectorA + SelectorB FirefoxOpera

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 page
(Not supported in MSIE)