A CSS selector is the part of a CSS rule set that actually selects the content you want to style.
Consider some types of CSS selectors:
- Universal selector:
*
- Element type selector:
ul
,td
- ID Selector:
#id
- Class selector:
.box
- Descendant combinator:
#id .box
. The .box element doesn’t have to be an immediate child of #id. - Child combinator:
#id > .box
. Unlike the descendant combinator, there can’t be another element wrapping .box - General Sibling Combinator:
~
- Adjacent Sibling Combinator:
+
. The difference from general sibling combinaltor is that the targeted element must be an immediate sibling, not just a general sibling. - Attribute Selector:
input[type="text"]
- Pseudo-class:
a:hover
. A pseudo-class uses a colon character to identify a pseudo-state that an element might be in. - Pseudo-element:
.container::before
. This selector inserts an imaginary element into the page, inside the targeted element, before its contents.