Title

Article content.

` element in that last HTML example, we might write a descendant selector like this: ``` article h2 { /* Styles */ } ``` With nesting: ``` article { /* Article styles */ h2 { /* Heading 2 styles */ }} ``` You probably noticed that we can technically go one level deeper since the heading is contained in another `.article-content` element: ``` article { /* Article styles */ .article-content { /* Container styles */ h2 { /* Heading 2 styles */ } }} ``` So, all said and done, selecting the heading with nesting is the equivalent of writing a descendant selector in a flat structure: ``` article .article-content h2 { /* Heading 2 styles */ } ``` You might be wondering how the heck it’s possible to write a chained selector in a nesting format. I mean, we could easily nest a chained selector inside another selector: ``` article { /* Article styles */ h2.article-content { /* Heading 2 styles */ }} ``` But it’s not like we can re-declare the `article` element selector as a nested selector: ``` article { /* Article styles */ /* Nope! 👎 */ article.article-element { /* Container styles */ /* Nope! 👎 */ h2.article-content { /* Heading 2 styles */ } }} ``` Even if we could do that, it sort of defeats the purpose of a neatly organized nest that shows the relationships between selectors. Instead, we can use the ampersand (`&`) symbol to represent the selector that we’re nesting into. We call this the **nesting selector**. ``` article { &.article-content { /* Equates to: article.article-content */ }} ``` Compounding selectorsWe’ve talked quite a bit about the Cascade and how it determines which styles to apply to matching selectors using a specificity score. We saw earlier how an element selector is less specific than a class selector, which is less specific than an ID selector, and so on. ``` article { /* Specificity: 0, 0, 1 */ }.featured { /* Specificity: 0, 1, 0 */ }#featured { /* Specificity: 1, 0, 0 */ } ``` Well, we can *increase* specificity by chaining — or “compounding” — selectors together. This way, we give our selector a higher priority when it comes to evaluating two or more matching styles. Again, overriding ID selectors is incredibly difficult so we’ll work with the element and class selectors to illustrate chained selectors. We can chain our `article` element selector with our `.featured` class selector to generate a higher specificity score. ``` article { /* Specificity: 0, 0, 1 */ }.featured { /* Specificity: 0, 1, 0 */ }articie.featured { /* Specificity: 0, 1, 1 */ } ``` This new **compound selector** is more specific (and powerful!) than the other two individual selectors. Notice in the following demo how the compound selector comes *before* the two individual selectors in the CSS yet still beats them when the Cascade evaluates their specificity scores. CodePen Embed FallbackInterestingly, we can use “fake” classes in chained selectors as a strategy for managing specificity. Take this real-life example: ``` .wp-block-theme-button .button:not(.specificity):not(.extra-specificity) { } ``` Whoa, right? There’s a lot going on there. But the idea is this: the `.specificity` and `.extra-specificity` class selectors are only there to bump up the specificity of the `.wp-block-theme .button` descendant selector. Let’s compare the specificity score with and without those artificial classes (that are `:not()` included in the match). ``` .wp-block-theme-button .button { /* Specificity: 0, 2, 0 */}.wp-block-theme-button .button:not(.specificity) { /* Specificity: 0, 3, 0 */}.wp-block-theme-button .button:not(.specificity):not(.extra-specificity { /* Specificity: 0, 4, 0 */} ``` Interesting! I’m not sure if I would use this in my own CSS but it is a less heavy-handed approach than resorting to the `!important` keyword, which is just as tough to override as an ID selector. --- CombinatorsIf selectors are “what” we select in CSS, then you might think of CSS combinators as “how” we select them. they’re used to write selectors that combine other selectors in order to target elements. *Inception!* The name “combinator” is excellent because it accurately conveys the many different ways we’re able to *combine selectors*. Why would we need to combine selectors? As we discussed earlier with Chained Selectors, there are two common situations where we’d want to do that: * When we want to *increase* the specificity of what is selected. * When we want to select an element based on a condition. Let’s go over the many types of combinators that are available in CSS to account for those two situations in addition to chained selectors. Descendant combinatorWe call it a “descendant” combinator because we use it to select elements inside other elements, sorta like this: ``` /* Selects all elements in .parent with .child class */.parent .child {} ``` …which would select all of the elements with the `.child` class in the following HTML example: ```

``` See that element with the `.friend` classname? That’s the only element inside of the `.parent` element that is not selected with the `.parent .child {}` descendant combinator since it does not match `.child` even though it is also a descendant of the `.parent` element. Child combinatorA child combinator is really just an offshoot of the descendant combinator, only it is more specific than the descendant combinator because **it only selects direct children of an element**, rather than any descendant. Let’s revise the last HTML example we looked at by introducing a descendant element that goes deeper into the family tree, like a `.grandchild`: ```

``` So, what we have is a `.parent` to four `.child` elements, one of which contains a `.grandchild` element inside of it. Maybe we want to select the `.child` element without inadvertently selecting the second `.child` element’s `.grandchild`. That’s what a child combinator can do. All of the following child combinators would accomplish the same thing: ``` /* Select only the "direct" children of .parent */.parent > .child {}.parent > div {}.parent > * {} ``` See how we’re *combining different selector types to make a selection*? We’re combinating, dangit! We’re just doing it in slightly different ways based on the type of child selector we’re combining. ``` /* Select only the "direct" children of .parent */.parent > #child { /* direct child with #child ID */.parent > .child { /* direct child with .child class */ }.parent > div { /* direct child div elements */ }.parent > * { /* all direct child elements */ } ``` It’s pretty darn neat that we not only have a way to select only the direct children of an element, but be more or less specific about it based on the type of selector. For example, the ID selector is more specific than the class selector, which is more specific than the element selector, and so on. General sibling combinatorIf two elements share the same parent element, that makes them siblings like brother and sister. We saw an example of this in passing when discussing the descendant combinator. Let’s revise the class names from that example to make the sibling relationship a little clearer: ```

``` This is how we can select the `.sister` element as long as it is preceded by a sibling with class `.brother`. ``` /* Select .sister only if follows .brother */.brother ~ .sister { } ``` The Tilda symbol (`~`) is what tells us this is a sibling combinator. It doesn’t matter if a `.sister` comes immediately after a `.brother` or not — as long as a `.sister` comes after a `brother` and they share the same parent element, it will be selected. Let’s see a more complicated HTML example: ```

``` The sibling combinator we wrote only selects the first three `.sister` elements because they are the only ones that come after a `.brother` element and share the same parent — even in the case of the third `.sister` which comes after another sister! The fourth `.sister` is contained inside of a `.cousin`, which prevents it from matching the selector. Let’s see this in context. So, we can select *all of the elements* with an **element selector** since each element in the HTML is a `div`: CodePen Embed FallbackFrom there, we can select *just the brothers* with a **class selector** to give them a different background color: CodePen Embed FallbackWe can also use a **class selector** to set a different background color on all of the elements with a `.sister` class: CodePen Embed FallbackAnd, finally, we can use a **general sibling combinator** to select *only sisters that are directly after a brother*. CodePen Embed FallbackDid you notice how the last `.sister` element’s background color remained green while the others became purple? That’s because it’s the only `.sister` in the bunch that does *not* share the same `.parent` as a `.brother` element. Adjacent combinatorBelieve it or not, we can get even *more* specific about what elements we select with an **adjacent combinator**. The general sibling selector we just looked at will select all of the `.sister` elements on the page as long as it shares the same parent as `.brother` and comes *after* the `.brother`. What makes an adjacent combinator different is that **it selects any element immediately following another**. Remember how the last `.sister` didn’t match because it is contained in a different parent element (i.e., `.cousin`)? Well, we can indeed select it by itself using an adjacent combinator: ``` /* Select .sister only if directly follows .brother */.brother + .sister { } ``` Notice what happens when we add that to our last example: CodePen Embed FallbackThe first two `.sister` elements changed color! That’s because they are the only sisters that come *immediately* after a `.brother`. The third `.sister` comes immediately after another `.sister` and the fourth one is contained in a `.cousin` which prevents both of them from matching the selection. --- Learn more about CSS selectors* Selectors (CSS-Tricks Almanac) * Learn CSS: Selectors (Mozilla Developer Network) * Guide to Advanced Selectors (ModernCSS.dev) * Selectors (web.dev) * Selectors Explained: Translate Selectors into English (Kitty Giraudel) * CSS Diner (Interactive game) Table of contents * Overview * Quick reference * General Selectors * Complex selectors * Combinators * Learn more about CSS selectors * References --- ReferencesThe vast majority of what you’re reading here is information pulled from articles we’ve published on CSS-Tricks and those are linked up throughout the guide. In addition to those articles, the following resources were super helpful for putting this guide together. * CSS Selectors Level 4 (W3C) * 3.2.6 Global Attributes (HTML Living Standard) --- CSS Selectors originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.