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.