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 }
- Universal selector : The style is applied to all elements in the document.
* { 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; }
In this example, the style is applied only to STRONG element of descendant of P element.
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; }
In this example, the style is applied only to STRONG element of child of P element.
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; }
In this example, the style is applied only to P element that immediately follows H2 element.