Css nesting

MDN Learn
#1

In this guide in example section we have the following html structure:

<div class="wrapper">
  <article class="card">
    <h2>Card 1</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  </article>
  <article class="card featured">
    <h2>Card 2</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  </article>
  ...
</div>

and css applied:

.card {
  padding: 0.5rem;
  border: 1px solid black;
  border-radius: 0.5rem;
  & h2 {
    /* equivalent to `.card h2` */
    color: slateblue;
    .featured & {
      /* equivalent to `.featured .card h2` */
      color: tomato;
    }
  }
}

My question about this css line

/* equivalent to .featured .card h2 */

How does it work? Since in the example the card element is not a child of feature element. But styles are still applied.
It should be like this

.featured.card h2

But then i don’t understand how nesting works in this particular case when we have several layers nested and & in the end of the selector. Could you please help.

#2

Certainly! The CSS you’re looking at uses a feature of Sass, a CSS preprocessor, which allows for more complex styling strategies than plain CSS. The & symbol in Sass is a special operator that refers to the parent selector. Let’s break down how the code you provided works:

  1. Basic Card Styling:

    .card {
  padding: 0.5rem;
  border: 1px solid black;
  border-radius: 0.5rem;
}

    This block sets the basic styling for any element with the class .card.

  2. Styling for h2 Inside .card:

    .card {
  & h2 {
    color: slateblue;
  }
}

    In this case, & refers to .card. So & h2 is equivalent to writing .card h2. It means “select any h2 that is a descendant of an element with the class .card.”

  3. Featured Card Styling:

    .card {
  & h2 {
    .featured & {
      color: tomato;
    }
  }
}

    This is where it gets a bit more complex. Inside this block, & refers to .card h2. So when you have .featured &, it gets translated to .featured .card h2.

However, your observation about the HTML structure is correct. In the HTML provided, .card is not a child of .featured; rather, they are the same element in one case. So, the correct way to target the h2 inside the card that also has the featured class would indeed be .featured.card h2.

To make the CSS work as intended for the given HTML structure, it should be:

.card {
  padding: 0.5rem;
  border: 1px solid black;
  border-radius: 0.5rem;
  & h2 {
    color: slateblue;
  }
}

.featured.card h2 {
  color: tomato;
}

In this revised version:

  • .card h2 targets h2 elements inside any .card.
  • .featured.card h2 specifically targets h2 elements inside a .card that also has the .featured class.

Sass’s & operator can be very powerful but also a bit tricky, especially when dealing with complex selectors or nested structures. It’s always important to consider the actual HTML structure when writing Sass or CSS to ensure the styles are applied as intended.