OverviewCSS is really good at many things, but it’s really, really good at two specific things: selecting elements and styling them. That’s the raison d’être for CSS and why it’s a core web language. In this guide, we will cover the different ways to select elements — because the styles we write are pretty much useless without the ability to select which elements to apply them to.

The source of truth for CSS selectors is documented in the Selectors Module Level 4 specification. With one exception (which we’ll get to), all of the selectors covered here are well-covered by browsers across the board, and most certainly by all modern browsers.

In addition to selectors, this guide also looks at CSS combinators. If selectors identify what we are selecting, you might think of combinators as how the styles are applied. Combinators are like additional instructions we give CSS to select a very particular element on the page, not totally unlike the way we can use filters in search engines to find the exact result we want.

Quick referenceCommon Selectors

/* Universal */* {  box-sizing: border-box;}/* Type or Tag */p {  margin-block: 1.5rem;}/* Classname */.class {  text-decoration: underline;}/* ID */#id {  font-family: monospace;}/* Relational */li:has(a) {  display: flex;}

Common Combinators

/* Descendant */header h1 {  /* Selects all Heading 1 elements in a Header element. */}/* Child */header > h1 {  /* Selects all Heading 1 elements that are children of Header elements. */}/* General sibling */h1 ~ p {  /* Selects a Paragraph as long as it follows a Heading 1. */}/* Adjacent sibling */h1 + p {  /* Selects a Paragraph if it immediately follows a Heading 1 */}/* Chained */h1, p {   /* Selects both elements. */}

General SelectorsWhen we talk about CSS selectors, we’re talking about the first part of a CSS ruleset:

/* CSS Ruleset */selector { /* Style rule */ property: value;} See that selector? That can be as simple as the HTML tag we want to select. For example, let’s select all <article> elements on a given page.

/* Select all <article> elements... */article {  /* ... and apply this background-color on them */  background-color: hsl(25 100% 50%);}

That’s the general process of selecting elements to apply styles to them. Selecting an element by its HTML tag is merely one selector type of several. Let’s see what those are in the following section.

Element selectorsElement selectors are exactly the type of selector we looked at in that last example: Select the element’s HTML tag and start styling!

That’s great and all, but consider this: Do you actually want to select all of the <article> elements on the page? That’s what we’re doing when we select an element by its tag — any and all HTML elements matching that tag get the styles. The following demo selects all <article> elements on the page, then applies a white (#fff) background to them. Notice how all three articles get the white background even though we only wrote one selector.

CodePen Embed FallbackI’ve tried to make it so the relevant for code for this and other demos in this guide is provided at the top of the CSS tab. Anything in a @layer can be ignored. And if you’re new to @layer, you can learn all about it in our CSS Cascade Layers guide.

But maybe what we actually want is for the first element to have a different background — maybe it’s a featured piece of content and we need to make it stand out from the other articles. That requires us to be more specific in the type of selector we use to apply the styles.

Let’s turn our attention to other selector types that allow us to be more specific about what we’re selecting.

ID selectorsID selectors are one way we can select one element without selecting another of the same element type. Let’s say we were to update the HTML in our <article> example so that the first article is “tagged” with an ID:

``
Now we can use that ID to differentiate that first article from the others and apply styles *specifically* to it. We prepend a hashtag character (

#`) to the ID name when writing our CSS selector to properly select it.

/* Selects all <article> elements */article {  background: #fff;}/* Selects any element with id="featured" */#featured {  background: hsl(35 100% 90%);  border-color: hsl(35 100% 50%);}

There we go, that makes the first article pop a little more than the others!

CodePen Embed FallbackBefore you go running out and adding IDs all over your HTML, be aware that IDs are considered a heavy-handed approach to selecting. IDs are so specific, that it is tough to override them with other styles in your CSS. IDs have so much specificity power than any selector trying to override it needs at least an ID as well. Once you’ve reached near the top of the ladder of this specificity war, it tends to lead to using !important rules and such that are in turn nearly impossible to override.

/* Selects any element with id="featured" */#featured {  background: hsl(35 100% 90%);  border-color: hsl(35 100% 50%);}/* Selects all <article> elements */article {  background: #fff;}

The ID selector now comes before the element selector. According to how the CSS Cascade determines styles, you might expect that the article elements all get a white background since that ruleset comes after the ID selector ruleset. But that’s not what happens.

CodePen Embed FallbackSo, you see how IDs might be a little too “specific” when it comes to selecting elements because it affects the order in which the CSS Cascade applies styles and that makes styles more difficult to manage and maintain.

The other reason to avoid IDs as selectors? We’re technically only allowed to use an ID once on a page, per ID. In other words, we can have one element with #featured but not two. That severely limits what we’re able to style if we need to extend those styles to other elements — not even getting into the difficulty of overriding the ID’s styles.

A better use case for IDs is for selecting items in JavaScript — not only does that prevent the sort of style conflict we saw above, but it helps maintain a separation of concerns between what we select in CSS for styling versus what we select in JavaScript for interaction.

Another thing about ID selectors: The ID establishes what we call an “anchor” which is a fancy term for saying we can link directly to an element on the page. For example, if we have an article with an ID assigned to it:

<a href="featured">Jump to article below ⬇️</a><!-- muuuuuuch further down the page. --><article id="featured">...</article>

Clicking the link will navigate you to the element as though the link is anchored to that element. Try doing exactly that in the following demo:

CodePen Embed FallbackThis little HTML goodie opens up some pretty darn interesting possibilities when we sprinkle in a little CSS. Here are a few articles to explore those possibilities.

That’s what makes class selectors so popular — they’re only slightly more specific than elements, but keep specificity low enough to be manageable if we need to override the styles in one ruleset with styles in another.

The only difference when writing a class is that we prepend a period (.) in front of the class name instead of the hashtag (#).

/* Selects all <article> elements */article {  background: #fff;}/* Selects any element with class="featured" */.featured {  background: hsl(35 100% 90%);  border-color: hsl(35 100% 50%);}

Here’s how our <article> example shapes up when we swap out #featured with .featured.

CodePen Embed FallbackSame result, better specificity. And, yes, we can absolutely combine different selector types on the same element:

`? We can select it by:

Its element type (article)
Its ID (#someID)
Its class (.featured)

The following articles will give you some clever ideas for using class selectors in CSS.

 **Article**  on Jan 25, 2020    The Difference Between ID and Class    selectors       Chris Coyier     **Article**  on Sep 28, 2022    Multiple Class / ID and Class Selectors    selectors       Chris Coyier     **Article**  on Nov 15, 2018    Scaling CSS: Two Sides of a Spectrum    selectors       Chris Coyier     **Article**  on Apr 22, 2019    Could Grouping HTML Classes Make Them More Readable?    selectors       Chris Coyier    But we have even more ways to select elements like this, so let’s continue.

Attribute selectorsID and class selectors technically fall into this attribute selectors category. We call them “attributes” because they are present in the HTML and give more context about the element. All of the following are attributes in HTML:

```

``` Anything with an equals sign (`=`) followed by a value in that example code is an attribute. So, we can technically style all links with an `href` attribute equal to `https://css-tricks.com`: ``` a[href="https://css-tricks.com"] { color: orangered;} ``` Notice the syntax? We’re using square brackets (`[]`) to select an attribute instead of a period or hashtag as we do with classes and IDs, respectively. CodePen Embed FallbackThe equals sign used in attributes suggests that there’s more we can do to select elements besides matching something that’s exactly equal to the value. That is indeed the case. For example, we can make sure that the matching selector is capitalized or not. A good use for that could be selecting elements with the `href` attribute as long as they do not contain uppercase letters: ``` /* Case sensitive */a[href*='css-tricks' s] {} ``` The `s` in there tells CSS that we only want to select a link with an `href` attribute that does not contain uppercase letters. ``` ...... ``` If case sensitivity isn’t a big deal, we can tell CSS that as well: ``` /* Case insensitive */a[href*='css-tricks' i] {} ``` Now, either one of the link examples will match regardless of there being upper- or lowercase letters in the `href` attribute. ``` ...... ``` There are many, many different types of HTML attributes. Be sure to check out our Data Attributes guide for a complete rundown of not only `[data-attribute]` but how they relate to other attributes and how to style them with CSS. **Article** on Jun 13, 2024 A Complete Guide to Data Attributes selectors Chris Coyier **Article** on Jun 12, 2020 The Skinny on CSS Attribute Selectors selectors Chris Coyier **Article** on Dec 18, 2011 Multiple Attribute Values selectors Chris Coyier **Article** on Sep 3, 2019 Working with Attributes on DOM Elements selectors Chris Coyier **Article** on Jun 30, 2020 Responsive Styling Using Attribute Selectors selectors Jakob E **Article** on Jan 16, 2018 “Stop Using CSS Selectors for Non-CSS” selectors Chris Coyier **Article** on Nov 20, 2020 The Actual Browser Problems with Unquoted Attributes selectors Chris Coyier **Article** on Aug 17, 2016 You can kinda invent your own weird design language with attributes and attribute selectors selectors Chris Coyier Universal selectorCSS-Tricks has a special relationship with the Universal Selector — it’s our logo! That’s right, the asterisk symbol (`*`) is a selector all unto itself whose purpose is to **select all the things**. Quite literally, we can select *everything* on a page — every single element — with that one little asterisk. Note I said every single *element*, so this won’t pick up things like IDs, classes, or even pseudo-elements. It’s the element selector for selecting all elements. ``` /* Select ALL THE THINGS! 💥 */* { /* Styles */} ``` Or, we can use it with another selector type to select everything *inside* a specific element. ``` /* Select everything in an

*/article * { /* Styles */} ``` That is a handy way to select everything in an `

`, even in the future if you decide to add other elements inside that element to the HTML. The times you’ll see the Universal Selector used most is to set `border-sizing` on all elements across the board, including all elements and pseudo-elements. ``` *,*::before,*::after { box-sizing: border-box;} ``` There’s a good reason this snippet of CSS winds up in so many stylesheets, which you can read all about in the following articles. **Almanac** on Jun 20, 2024 Universal `* { box-sizing: border-box; }` selectors Sara Cope **Article** on May 6, 2015 Box Sizing selectors Marie Mosley **Article** on Sep 23, 2014 Better Box Sizing selectors Chris Coyier **Article** on Mar 4, 2016 International box-sizing Awareness Day selectors Chris Coyier **Article** on Sep 23, 2014 Inheriting box-sizing Probably Slightly Better Best-Practice selectors Chris Coyier **Article** on Sep 23, 2014 Things It Might Be Fun/Useful to Try the Universal (*) Selector On selectors Chris Coyier Sometimes the Universal Selector is implied. For example, when using a pseudo selector at the start of a new selector. These are selecting exactly the same: ``` *:has(article) { }:has(article) { } ``` Pseudo-selectorsPseudo-selectors are for selecting pseudo-elements, just as element selectors are for selecting elements. And a pseudo-element is just like an element, but it doesn’t actually show up in the HTML. If pseudo-elements are new to you, we have a quick explainer you can reference. Every element has a `::before` and `::after` pseudo-element attached to it even though we can’t see it in the HTML. ```

Item

``` These are super handy because they’re additional ways we can hook into an element an apply additional styles without adding more markup to the HTML. Keep things as clean as possible, right?! We know that `::before` and `::after` are pseudo-elements because they are preceded by a pair of colons (`::`). That’s how we select them, too! ``` .container::before { /* Styles */} ``` The `::before` and `::after` pseudo-elements can also be written with a single colon — i.e., `:before` and `:after` — but it’s still more common to see a double colon because it helps distinguish pseudo-elements from pseudo-classes. But there’s a catch when using pseudo-selectors: **they require the `content` property**. That’s because pseudos aren’t “real” elements but ones that do not exist as far as HTML is concerned. That means they need content that can be displayed… even if it’s empty content: ``` .container::before { content: "";} ``` Of course, if we were to supply words in the `content` property, those would be displayed on the page. CodePen Embed Fallback **Article** on Feb 4, 2022 Meet the Pseudo Class Selectors selectors Chris Coyier **Video** on Feb 25, 2015 #94: Intro to Pseudo Elements ▶ Running Time: 18:37 selectors Chris Coyier **Article** on Aug 29, 2018 ::before vs :before selectors Chris Coyier **Article** on Sep 21, 2021 7 Practical Uses for the ::before and ::after Pseudo-Elements in CSS selectors Habdul Hazeez **Article** on Aug 3, 2021 Use Cases for Multiple Pseudo Elements selectors Chris Coyier **Article** on Aug 19, 2021 A Whole Bunch of Amazing Stuff Pseudo Elements Can Do selectors Chris Coyier **Article** on Jul 9, 2019 A Little Reminder That Pseudo Elements are Children, Kinda. selectors Chris Coyier **Article** on Dec 14, 2020 One Invalid Pseudo Selector Equals an Entire Ignored Selector selectors Chris Coyier **Article** on Sep 27, 2021 CSS Pseudo Commas selectors Geoff Graham **Article** on Apr 16, 2013 List of Pseudo-Elements to Style Form Controls selectors Chris Coyier **Article** on Oct 24, 2020 Animating the `content` Property selectors Robin Rendle **Article** on May 31, 2017 Animating Single Div Art selectors Dan Wilson **Article** on Jun 5, 2020 Text Wrapping & Inline Pseudo Elements selectors Chris Coyier **Article** on Jul 25, 2011 3D Cube with One Element selectors Chris Coyier --- Complex selectorsComplex selectors may need a little marketing help because “complex” is an awfully scary term to come across when you’re in the beginning stages of learning this stuff. While selectors can indeed become complex and messy, the general idea is super straightforward: **we can combine multiple selectors in the same ruleset.** Let’s look at three different routes we have for writing these “not-so-complex” complex selectors. Listing selectorsFirst off, it’s possible to combine selectors so that they share the same set of styles. All we do is separate each selector with a comma. ``` .selector-1,.selector-2,.selector-3 { /* We share these styles! 🤗 */} ``` You’ll see this often when styling headings — which tend to share the same general styling except, perhaps, for `font-size`. ``` h1,h2,h3,h4,h5,h6 { color: hsl(25 80% 15%); font-family: "Poppins", system-ui;} ``` Adding a line break between selectors can make things more legible. You can probably imagine how complex and messy this might get. Here’s one, for example: ``` section h1, section h2, section h3, section h4, section h5, section h6, article h1, article h2, article h3, article h4, article h5, article h6, aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 { color: #BADA55;} ``` *Ummmm, okay.* No one wants this in their stylesheet. It’s tough to tell what exactly is being selected, right? The good news is that we have modern ways of combining these selectors more efficiently, such as the `:is()` pseudo selector. In this example, notice that we’re technically selecting all of the same elements. If we were to take out the four `section`, `article`, `aside`, and `nav` element selectors and left the descendants in place, we’d have this: ``` h1, h2, h3, h4, h5, h6, h1, h2, h3, h4, h5, h6,h1, h2, h3, h4, h5, h6, h1, h2, h3, h4, h5, h6, { color: #BADA55;} ``` The only difference is which element those headings are scoped to. This is where `:is()` comes in handy because we can match those four elements like this: ``` :is(section, article, aside, nav) { color: #BADA55;} ``` That will apply `color` to the elements themselves, but what we want is to apply it to the headings. Instead of listing those out for each heading, we can reach for `:is()` again to select them in one fell swoop: ``` /* Matches any of the following headings scoped to any of the following elements. */:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) { color: #BADA55;} ``` While we’re talking about `:is()` it’s worth noting that we have the `:where()` pseudo selector as well and that it does the exact same thing as `:is()`. The difference? The specificity of `:is()` will equal the specificity of the most specific element in the list. Meanwhile, `:where()` maintains *zero* specificity. So, if you want a complex selector like this that’s easier to override, go with `:where()` instead. **Almanac** on Dec 2, 2022 :is `:is(ul, ol) li { color: #f8a100; }` selectors Geoff Graham **Almanac** on Jul 14, 2021 :where `main :where(h1, h2, h3) { color: #f8a100; }` selectors Chris Coyier **Article** on Apr 1, 2021 :where() has a cool specificity trick, too. selectors Chris Coyier **Article** on Jun 10, 2020 CSS :is() and :where() are coming to browsers selectors Chris Coyier **Article** on Apr 15, 2021 Platform News: Prefers Contrast, MathML, :is(), and CSS Background Initial Values selectors Šime Vidas **Article** on Jul 12, 2021 Using the Specificity of :where() as a CSS Reset selectors Mojtaba Seyedi Nesting selectorsThat last example showing how `:is()` can be used to write more efficient complex selectors is good, but we can do even better now that CSS nesting is a widely supported feature. This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up. Desktop | Chrome | Firefox | IE | Edge | Safari | | --- | --- | --- | --- | --- | | 120 | 117 | No | 120 | 17.2 | Mobile / Tablet | Android Chrome | Android Firefox | Android | iOS Safari | | --- | --- | --- | --- | | 126 | 127 | 126 | 17.2 | CSS nesting allows us to better see the relationship between selectors. You know how we can clearly see the relationship between elements in HTML when we indent descendant elements? ```

Title

Article content.

``` CSS nesting is a similar way that we can format CSS rulesets. We start with a parent ruleset and then embed descendant rulesets inside. So, if we were to select the `

` 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.

View Details

A few sirens went off a couple of weeks ago when the CSS Working Group (CSSWG) resolved to add an if() conditional to the CSS Values Module Level 5 specification. It was Lea Verou’s X post that same day that caught my attention:

A historical day for CSS 😀🎉

If you write any components used and/or styled by others, you know how huge this is!

background: if(style(–variant: success), var(–green));

Even if you don’t, this will allow things like:
padding: if(var(–2xl), 1em, var(–xl) or var(–m),… pic.twitter.com/cXeqwBuXvK

— Lea Verou (@LeaVerou) June 13, 2024

Lea is the one who opened the GitHub issue leading to the discussion and in a stroke of coincidence — or serendipity, perhaps — the resolution came in on her birthday. That had to be quite a whirlwind of a day! What did you get for your birthday? “Oh, you know, just an accepted proposal to the CSS spec.” Wild, just wild.

The accepted proposal is a green light for the CSSWG to work on the idea with the intent of circulating a draft specification for further input and considerations en route to, hopefully, become a recommended CSS feature. So, it’s gonna be a hot minute before any of this is baked, that is, if it gets fully baked.

But the idea of applying styles based on a conditional requirement is super exciting and worth an early look at the idea. I scribbled some notes about it on my blog the same day Lea posted to X and thought I’d distill those here for posterity while rounding up more details that have come up since then.

This isn’t a new ideaMany proposals are born from previously rejected proposals and if() is no different. And, indeed, we have gained several CSS features in recent days that allow for conditional styling — :has() and Container Style Queries being two of the more obvious examples. Lea even cites a 2018 ticket that looks and reads a lot like the accepted proposal.

The difference?

Style queries had already shipped, and we could simply reference the same syntax for conditions (plus media() and supports() from Tab’s @when proposal) whereas in the 2018 proposal how conditions would work was largely undefined.

Lea Verou, “Inline conditionals in CSS?”

I like how Lea points out that CSS goes on to describe how CSS has always been a conditional language:

Folks… CSS had conditionals from the very beginning. Every selector is essentially a conditional!

Lea Verou, “Inline conditionals in CSS?”

True! The Cascade is the vehicle for evaluating selectors and matching them to HTML elements on a page. What if() brings to the table is a way to write inline conditions with selectors.

SyntaxIt boils down to this:

<if()> = if( <container-query>, [<declaration-value>]{1, 2} ) …where:

Values can be nested to produce multiple branches.
If a third argument is not provided, it becomes equivalent to an empty token stream.

All of this is conceptual at the moment and nothing is set in stone. We’re likely to see things change as the CSSWG works on the feature. But as it currently stands, the idea seems to revolve around specifying a condition, and setting one of two declared styles — one as the “default” style, and one as the “updated” style when a match occurs.

.element { background-color: /* If the style declares the following custom property: */ if(style(--variant: success), var(--color-green-50), /* Matched condition */ var(--color-blue-50); /* Default style */ );} In this case, we’re looking for a style() condition where a CSS variable called --variant is declared and is set to a value of success, and:

…if --variant is set to success, we set the value of success to --color-green-50 which is a variable mapped to some greenish color value.
…if --variant is not set to success, we set the value of the success to --color-blue-50 which is a variable mapped to some bluish color value.

The default style would be optional, so I think it can be omitted in some cases for slightly better legibility:

.element { background-color: /* If the style declares the following custom property: */ if(style(--variant: success), var(--color-green-50) /* Matched condition */ );} The syntax definition up top mentions that we could support a third argument in addition to the matched condition and default style that allows us to nest conditions within conditions:

background-color: if( style(--variant: success), var(--color-success-60), if(style(--variant: warning), var(--color-warning-60), if(style(--variant: danger), var(--color-danger-60), if(style(--variant: primary), var(--color-primary) ) ), )); Oomph, looks like some wild inception is happening in there! Lea goes on to suggest a syntax that would result in a much flatter structure:

<if()> = if( [ <container-query>, [<declaration-value>]{2} ]#{0, }, <container-query>, [<declaration-value>]{1, 2} ) In other words, nested conditions are much more flat as they can be declared outside of the initial condition. Same concept as before, but a different syntax:

background-color: if( style(--variant: success), var(--color-success-60), style(--variant: warning), var(--color-warning-60), style(--variant: danger), var(--color-danger-60), style(--variant: primary), var(--color-primary)); So, rather than one if() statement inside another if() statement, we can lump all of the possible matching conditions into a single statement.

This is all related to style queriesWe’re attempting to match an if() condition by querying an element’s styles. There is no corresponding size() function for querying dimensions — container queries implicitly assume size:

.element { background: var(--color-primary); /* Condition */ @container parent (width >= 60ch) { /* Applied styles */ background: var(--color-success-60); }} And container queries become style queries when we call the style() function instead:

.element { background: orangered; /* Condition */ @container parent style(--variant: success) { /* Applied styles */ background: dodgerblue; }} Style queries make a lot more sense to me when they’re viewed in the context of if(). Without if(), it’s easy to question the general usefulness of style queries. But in this light, it’s clear that style queries are part of a much bigger picture that goes beyond container queries alone.

There’s still plenty of things to suss out with the if() syntax. For example, Tab Atkins describes a possible scenario that could lead to confusion between what is the matched condition and default style parameters. So, who knows how this all shakes out in the end!

Conditions supporting other conditionsAs we’ve already noted, if() is far from the only type of conditional check already provided in CSS. What would it look like to write an inline conditional statement that checks for other conditions, such as @supports and @media?

In code:

background-color: if( supports( /* etc. */ ), @media( /* etc. */ )); The challenge would be container supporting size queries. As mentioned earlier, there is no explicit size() function; instead it’s more like an anonymous function.

@andruud has a succinctly describes the challenge in the GitHub discussion:

I don’t see why we couldn’t do supports() and media(), but size queries would cause cycles with layout that are hard/impossible to even detect. (That’s why we needed the restrictions we currently have for size CQs in the first place.

“Can’t we already do this with [X] approach?”When we were looking at the syntax earlier, you may have noticed that if() is just as much about custom properties as it is about conditionals. Several workarounds have emerged over the years to mimic what we’d gain if() we could set a custom property value conditionally, including:

Using custom properties as a Boolean to apply styles or not depending on whether it is equal to 0 or 1. (Ana has a wonderful article on this.)
Using a placeholder custom property with an empty value that’s set when another custom property is set, i.e. “the custom property toggle trick” as Chris describes it.
Container Style Queries! The problem (besides lack of implementation) is that containers only apply styles to their descendants, i.e., they cannot apply styles to themselves when they meet a certain condition, only its contents.

Lea gets deep into this in a separate post titled “Inline conditional statements in CSS, now?” that includes a table that outlines and compares approaches, which I’ll simply paste below. The explanations are full of complex CSS nerdery but are extremely helpful for understanding the need for if() and how it compares to the clever “hacks” we’ve used for years.

| Method | Input values | Output values | Pros | Cons | | --- | --- | --- | --- | --- | | Binary Linear Interpolation | Numbers | Quantitative | Can be used as part of a value | Limited output range | | Toggles | var(--alias) (actual values are too weird to expose raw) | Any | Can be used in part of a value | Weird values that need to be aliased | | Paused animations | Numbers | Any | Normal, decoupled declarations | Takes over animation propertyCascade weirdness | | Type Grinding | Keywords | Any value supported by the syntax descriptor | High flexibility for exposed APIGood encapsulation | Must insert CSS into light DOMTedious code (though can be automated with build tools)No Firefox support (though that’s changing) | | Variable animation name | Keywords | Any | Normal, decoupled declarations | Impractical outside of Shadow DOM due to name clashesTakes over animation propertyCascade weirdness |

Happy birthday, Lea!Belated by two weeks, but thanks for sharing the spoils of your big day with us! 🎂

References* What is the MVP for inline conditionals on custom properties? (Lea Verou, GitHub Issue #10064) * Inline conditionals in CSS? (Lea Verou) * Inline conditionals in CSS, now? (Lea Verou)

To Shared Link — Permalink on CSS-Tricks

“If” CSS Gets Inline Conditionals originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

View Details

I know this is something Chris has wanted forever, so it’s no surprise he’s already got a fantastic write-up just a day after the news broke. In fact, I first learned about it from his post and was unable to dredge up any sort of announcement. So, I thought I’d jot some notes down because it feels like a significant development.

The news: transitioning to auto is now a thing! Well, it’s going to be a thing. Chrome Canary recently shipped support for it and that’s the only place you’ll find it for now. And even then, we just don’t know if the Chrome Canary implementation will find its way to the syntax when the feature becomes official.

The problemHere’s the situation. You have an element. You’ve marked it up, plopped in contents, and applied a bunch of styles to it. Do you know how tall it is? Of course not! Sure, we can ask JavaScript to evaluate the element for us, but as far as CSS is concerned, the element’s computed dimensions are unknown.

That makes it difficult to, say, animate that element from height: 0 to height: whatever. We need to know what “whatever” is and we can only do that by setting a fixed height on the element. That way, we have numbers to transition from zero height to that specific height.

.panel { height: 0; transition: height 0.25s ease-in; &.expanded { height: 300px; }} But what happens if that element changes over time? Maybe the font changes, we add padding, more content is inserted… anything that changes the dimensions. We likely need to update that height: 300px to whatever new fixed height works best. This is why we often see JavaScript used to toggle things that expand and contract in size, among other workarounds.

I say this is about the height property, but we’re also talking about the logical equivalent, block-size, as well as width and inline-size. Or any direction for that matter!

Transitioning to autoThat’s the goal, right? We tend to reach for height: auto when the height dimension is unknown. From there, we let JavaScript calculate what that evaluates to and take things from there.

The current Chrome implementation uses CSS calc() to do the heavy lifting. It recognizes the auto keyword and, true to its name, calculates that number. In other words, we can do this instead of the fixed-height approach:

.panel { height: 0; transition: height 0.25s ease-in; &.expanded { height: calc(auto); }} That’s really it! Of course, calc() is capable of more complex expressions but the fact that we can supply it with just a vague keyword about an element’s height is darn impressive. It’s what allows us to go from a fixed value to the element’s intrinsic size and back.

I had to give it a try. I’m sure there are a ton of use cases here, but I went with a floating button in a calendar component that indicates a certain number of pending calendar invites. Click the button, and a panel expands above the calendar and reveals the invites. Click it again and the panel goes back to where it came from. JavaScript is handling the click interaction, triggering a class change that transitions the height in CSS.

CodePen Embed FallbackA video in case you don’t feel like opening Canary:

This is the relevant CSS:

.invite-panel { height: 0; overflow-y: clip; transition: height 0.25s ease-in;} On click, JavaScript sets auto height on the element as an inline style to override the CSS:

```

``` The `transition` property in CSS lets the browser know that we plan on changing the `height` property at some point, and to make it smooth. And, as with any transition or animation, it’s a good idea to account for motion sensitivities by slowing down or removing the motion with `prefers-reduced-motion`. What about `display: none`?This is one of the first questions that popped into my head when I read Chris’s post and he gets into that as well. Transitioning from an element from `display: none` to its intrinsic size is *sort of* like going from `height: 0`. It might seem like a non-displayed element has zero height, but it actually does have a computed height or `auto` unless a specific height is declared on it. So, there’s extra work to do if we want to transition from `display: none` in CSS. I’ll simply plop in the code Chris shared because it nicely demonstrates the key parts: ``` .element { /* hard mode!! */ display: none; transition: height 0.2s ease-in-out; transition-behavior: allow-discrete; height: 0; @starting-style { height: 0; } &.open { height: calc-size(auto); }} ``` * The element starts with both `display: none` and `height: 0`. * There’s an `.open` class that sets the element’s height to `calc(auto)`. Those are the two dots we need to connect and we do it by first setting `transition-behavior: allow-discrete` on the element. This is new to me, but the spec says that `transition-behavior` “specifies whether transitions will be started or not for discrete properties.” And when we declare `allow-discrete`, “transitions will be started for discrete properties as well as interpolable properties.” Well, DevTools showed us right there that `height: auto` is a discrete property! Notice the `@starting-style` declaration, though. If you’re unfamiliar with it, you’re not alone. The idea is that it lets us set a style for a transition to “start” with. And since our element’s discrete height is `auto`, we need to tell the transition to start at `height: 0` instead: ``` .element { /* etc. */ @starting-style { height: 0; }} ``` Now, we can move from zero to `auto` since we’re sorta overriding the discrete height with `@starting-style`. Pretty cool we can do that! To Shared Link — Permalink on CSS-Tricks --- Transitioning to Auto Height originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

View Details

Oh, hey there! It’s been a hot minute, hasn’t it? Thought I’d pop in and say hello. 👋

Speaking of “popping” in, I’ve been playing with the Popover API a bit. We actually first noted it wayyyyy back in 2018 when Chris linked up some information about the <dialog> element. But it’s only been since April of this year that we finally have full Popover API support in modern browsers.

There was once upon a time that we were going to get a brand-new <popover> element in HTML for this. Chromium was working on development as recently as September 2021 but reached a point where it was dropped in favor of a popover attribute instead. That seems to make the most sense given that any element can be a popover — we merely need to attach it to the attribute to enable it.

```

``` This is interesting because let’s say we have some simple little element we’re using as a popover:

```

👋

``` If this is all the markup we have and we do absolutely nothing in the CSS, then the waving emoji displays as you might expect.

CodePen Embed FallbackAdd that popover attribute to the mix, however, and it’s gone!

CodePen Embed FallbackThat’s perhaps the first thing that threw me off. Most times something disappears and I assume I did something wrong. But cracking open DevTools shows this is exactly what’s supposed to happen.

The element is set to display: none by default.There may be multiple popovers on a page and we can differentiate them with IDs.

```

`` That’s not enough, as we also need some sort of “trigger” to make the popover, well, *pop!* We get another attribute that turns any button (or`-flavored button) into that trigger.

<button popovertarget="wave">Say Hello!</button><div popover id="wave">👋</div> Now we have a popover “targeted ” to a <button>. When the button is clicked, the popover element toggles visibility.

CodePen Embed FallbackThis is where stuff gets really fun because now that CSS is capable of handling logic to toggle visibility, we can focus more on what happens when the click happens.

Like, right now, the emoji is framed by a really thick black border when it is toggled on. That’s a default style.

Notice that the border sizing in the Box Model diagram.A few other noteworthy things are going on in DevTools there besides the applied border. For example, notice that the computed width and height behave more like an inline element than a block element, even though we are working with a straight-up <div> — and that’s true even though the element is clearly computing as display: block. Instead, what we have is an element that’s sized according to its contents and it’s placed in the dead center of the page. We haven’t even added a single line of CSS yet!

Speaking of CSS, let’s go back to removing that default border. You might think it’s possible by declaring no border on the element.

/* Nope 👎 */#wave { border: 0;} There’s actually a :popover-open pseudo-class that selects the element specifically when it is in an “open” state. I’d love this to be called :popover-popped but I digress. The important thing is that :popover-open only matches the popover element when it is open, meaning these styles are applied after those declared on the element selector, thus overriding them.

CodePen Embed FallbackAnother way to do this? Select the [popover] attribute:

/* Select all popovers on the page */[popover] { border: 0;}/* Select a specific popover: */#wave[popover] { border: 0;}/* Same as: */#wave:popover-open { border: 0;} With this in mind, we can, say, attach an animation to the #wave in its open state. I’m totally taking this idea from one of Jhey’s demos.

CodePen Embed FallbackWait, wait, there’s more! Popovers can be a lot like a <dialog> with a ::backdrop if we need it. The ::backdrop pseudo-element can give the popover a little more attention by setting it against a special background or obscuring the elements behind it.

I love this example that Mojtaba put together for us in the Almanac, so let’s go with that.

CodePen Embed FallbackCan you imagine all the possibilities?! Like, how much easier will it be to create tooltips now that CSS has abstracted the visibility logic? Much, much easier.

CodePen Embed FallbackMichelle Barker notes that this is probably less of a traditional “tooltip” that toggles visibility on hover than it is a “toggletip” controlled by click. That makes a lot of sense. But the real reason I mention Michelle’s post is that she demonstrates how nicely the Popover API ought to work with CSS Anchor Positioning as it gains wider browser support. That will help clean out the magic numbers for positioning that are littering my demo.

Here’s another gem from Jhey: a popover doesn’t have to be a popover. Why not repurpose the Popover API for other UI elements that rely on toggled visibility, like a slide-out menu?

CodePen Embed FallbackOh gosh, look at that: it’s getting late. There’s a lot more to the Popover API that I’m still wrapping my head around, but even the little bit I’ve played with feels like it will go a long way. I’ll drop in a list of things I have bookmarked to come back to. For now, though, thanks for letting me pop back in for a moment to say hi.

On popover accessibility: what the browser does and doesn’t do (Hidde de Vries)
If you’re using popover, also use the dialog element for your modal dialogs 📺(Hidde de Vries)
Open UI and the Popover API (Brecht De Ruyte)
Brief Note on Popovers with Dialogs (Adrian Roselli)
Advanced Form Control Styling With Selectmenu And Anchoring API (Brecht De Ruyte)
Using the Popover API for HTML Tooltips (Chris Coyier)
Comparing the Popover API and the element (LogRocket)

Poppin’ In originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

View Details

CSS Meditation #8: .work + .life { border: 10px solid #000; }