👩👧👦 CSS Selectors & Combinators cheatsheet
The following cheatsheet consists of my personal notes when reviewing the amazing world 😆 of CSS selectors and combinators. At the end of the article, you can find the sources with the detailed documentation.
Selectors are used to define a pattern of the elements that we want to select for applying a set of CSS rules on the selected elements.
Combinators define the relationship between the selectors.
👧 Basic selectors
Type selectors
It selects all elements of the given type within a document.
/* All <a> elements. */
a {
color: red;
}Universal selector
The CSS universal selector (*) matches elements of any type.
/* Selects all elements */
* {
color: green;
}Class selectors
It matches elements based on the contents of their class attribute.
/* All elements with class="spacious" */
.spacious {
margin: 2em;
}
/* All <li> elements with class="spacious" */
li.spacious {
margin: 2em;
}
/* All <li> elements with a class list that includes both "spacious" and "elegant" */
/* For example, class="elegant retro spacious" */
li.spacious.elegant {
margin: 2em;
}ID selectors
It matches an element based on the value of the element's id attribute.
/* The element with id="demo" */
#demo {
border: red 2px solid;
}Pseudo-class selectors
Check the following link for a complete list of available pseudo-class selectors classified by their display states such as :active, :is(), :not()…
👧🧒 Compound selectors
When combining a type or universal selector with a class or id selector to create a compound selector, the type or universal selector must precede the class or id.
p.myClass#myId {
font-size: 1.5rem;
}👩👧 Combinators
Descendant combinator
It’s represented by a single space (" ") character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor element matching the first selector.
/* List items that are descendants of the "my-things" list */
ul.my-things li {
margin: 2em;
}Child combinator
Denoted with the greater than character (>), the child combinator selects nodes that are direct children of the first element.
/* List items that are children of the "my-things" list */
ul.my-things > li {
margin: 2em;
}Subsequent-sibling combinator
Denoted with a tilde (~), selects siblings. Given A ~ B, all elements matching B will be selected if they are preceded by A, provided both A and B share the same parent.
/* select and style paragraphs that are both siblings of an image and appear after any image */
img ~ p {
color: red;
}More examples: https://developer.mozilla.org/en-US/docs/Web/CSS/Subsequent-sibling_combinator
Next-sibling combinator
Denoted by the plus symbol (+), is similar to the subsequent-sibling. However, given A + B, it only matches B if B is immediately preceded by A, with both sharing the same parent.
/* Paragraphs that come immediately after any image */
img + p {
font-weight: bold;
}Namespace separator
The namespace separator (|) separates the selector from the namespace, identifying the namespace, or lack thereof, for a type selector.
/* Links in the namespace named myNameSpace */
myNameSpace|a {
font-weight: bold;
}
/* paragraphs in any namespace (including no namespace) */
*|p {
color: darkblue;
}
/* heading level 2 not in a namespace */
|h2 {
margin-bottom: 0;
}Sources
