appendix-a
Appendix A. Selectors reference
A.1 Basic selectors
- tagname—Type selector or tag selector. This selector matches the tag name of the elements to target. It has a specificity of 0,0,1. Examples:
p;h1;strong. .class—Class selector. This targets elements that have the specified class name as part of their class attribute. It has a specificity of 0,1,0. Examples:.media;.nav-menu.#id—ID selector. This targets the element with the specified ID attribute. It has a specificity of 1,0,0. Example:#sidebar.*—Universal selector, which targets all elements. This has a specificity of 0,0,0.
A.2 Combinators
Combinators join multiple simple selectors into one complex selector. In the selector .nav-menu li, for example, the space between the two simple selectors is known as a descendant combinator. It indicates the targeted <li> is a descendant of an element that has the nav-menu class. This is the most common combinator, but there are a few others, each of which indicates a particular relationship between the elements indicated:
- Child combinator (
>)—Targets elements that are a direct descendant of another element. Example:.parent > .child. - Adjacent sibling combinator (
+)—Targets elements that immediately follow another. Example:p + h2targets an<h2>that immediately follows a<p>. - General sibling combinator (
~)—Targets all sibling elements following a specified element. Note this doesn’t target siblings that appear before the indicated element. Example:li.active ~ li.