Type Selector
Example
h1 { }
Description
Selects an HTML tag/element.
Universal selector
Example
* { }
Description
Selects everything in the document (or inside the parent element if it is being chained together with another element and a descendant combinator, for example).
Class selector
Example
.box { }
Description
Matches elements based on the contents of their class attribute.
id selector
Example
#unique { }
Description
TODO.
Attribute selector
Example
a[title] { }
p[title="myTitle"] { }
Description
Matches elements based on the presence or value of a given attribute.
Pseudo-class selector
Example
p:first-child { }
a:hover { }
Description
TODO.
Pseudo-element selector
Example
p::first-line { }
Description
Matched by the second selector are selected if they have an ancestor (parent, parent's parent, etc) element matching the first selector.
Descendant combinator
Example
h1 p { }
Description
TODO.
Child combinator
Example
h1 > p { }
Description
Matches only those elements matched by the second selector that are the direct children of elements matched by the first.
Adjacent sibling combinator
Example
img + p { }
Description
Matches the second element only if it immediately follows the first element, and both are children of the same parent element.
General sibling combinator
Example
img ~ p { }
Description
Matches the second element only if it follows the first element (though not necessarily immediately), and both are children of the same parent element.