Basic selector nesting in SASS

Introduction

Nesting selectors helps you write CSS in a cleaner and more organized way. It groups related styles together, making your code easier to read and maintain.

When styling elements inside a container or component, like buttons inside a card.

When you want to apply styles to child elements only within a specific parent.

When you want to avoid repeating the parent selector multiple times.

When you want to visually group related CSS rules for better clarity.

When you want to write less code but keep it structured.

Syntax

SASS

& { nested-selector { property: value; } }

The & symbol represents the parent selector.

You can nest selectors inside each other to reflect HTML structure.

Examples

This styles any element with class title inside an element with class card.

SASS

.card {
  .title {
    color: blue;
  }
}

This removes bullet points from ul inside a nav element.

SASS

nav {
  ul {
    list-style: none;
  }
}

This changes the background color when hovering over an element with class button.

SASS

.button {
  &:hover {
    background-color: green;
  }
}

Sample Program

This example shows a card with a title and description. The styles use nested selectors in SASS to group styles for .title and .description inside .card. The card also changes background color on hover. The tabindex="0" makes the card focusable by keyboard for accessibility.

SASS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Basic Selector Nesting Example</title>
  <style>
    /* Compiled CSS from SASS nesting example */
    .card {
      border: 2px solid #333;
      padding: 1rem;
      max-width: 300px;
      font-family: Arial, sans-serif;
    }
    .card .title {
      color: #2a7ae2;
      font-weight: bold;
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
    }
    .card .description {
      color: #555;
      font-size: 1rem;
    }
    .card:hover {
      background-color: #f0f8ff;
    }
  </style>
</head>
<body>
  <section class="card" tabindex="0" aria-label="Information card">
    <h2 class="title">Welcome to Nesting</h2>
    <p class="description">This card uses nested selectors in SASS for styling.</p>
  </section>
</body>
</html>

Important Notes

Remember that nesting too deeply can make your CSS hard to read and maintain.

Use the & symbol to refer to the parent selector when needed, like for pseudo-classes.

Always test your compiled CSS in the browser to see the visual effect.

Summary

Nesting groups related CSS selectors inside a parent for cleaner code.

The & symbol represents the parent selector in nested rules.

Use nesting to reflect the HTML structure and avoid repeating selectors.

Practice

1. What does the & symbol represent in Sass nesting?

easy

A. The parent selector in the nested rule

B. A new CSS class

C. A CSS property

D. A comment in Sass

Solution

1. Step 1: Understand the role of & in Sass

   The & symbol is used inside nested selectors to refer to the parent selector.

2. Step 2: Apply this understanding to nesting

   When you nest selectors, & helps avoid repeating the parent selector by representing it directly.

3. Final Answer:

   The parent selector in the nested rule -> Option A

4. Quick Check:

   & means parent selector [OK]

Hint: Remember & means 'this selector' inside nesting [OK]

Common Mistakes:

• Thinking & creates a new class
• Confusing & with CSS properties
• Assuming & is a comment

2. Which of the following is the correct Sass syntax to nest a .button class inside a .container class?

easy

A. .container .button { color: blue; }

B. .container > .button { color: blue; }

C. .container { .button { color: blue; } }

D. .container, .button { color: blue; }

Solution

1. Step 1: Identify correct nesting syntax in Sass

   In Sass, nesting is done by placing the child selector inside the parent block using curly braces.

2. Step 2: Check each option

   .container { .button { color: blue; } } correctly nests .button inside .container using braces. Options B and C are plain CSS selectors, not Sass nesting. .container, .button { color: blue; } combines selectors incorrectly.

3. Final Answer:

   .container { .button { color: blue; } } -> Option C

4. Quick Check:

   Nested selectors use braces inside parent [OK]

Hint: Nesting means putting selector inside braces of parent [OK]

Common Mistakes:

• Using plain CSS selectors instead of nesting
• Combining selectors with commas incorrectly
• Missing curly braces for nesting

3. Given the Sass code:

.nav {
  ul {
    margin: 0;
    li {
      list-style: none;
    }
  }
}

What is the compiled CSS output?

medium

A. .nav { ul { margin: 0; } li { list-style: none; } }

B. .nav ul, .nav li { margin: 0; list-style: none; }

C. .nav ul li { margin: 0; list-style: none; }

D. .nav ul { margin: 0; } .nav ul li { list-style: none; }

Solution

1. Step 1: Understand nesting levels

   The ul is nested inside .nav, so the selector becomes .nav ul. The li is nested inside ul, so it becomes .nav ul li.

2. Step 2: Write the compiled CSS

   Each nested block compiles to a combined selector with all parents. Properties stay inside their respective selectors.

3. Final Answer:

   .nav ul { margin: 0; } .nav ul li { list-style: none; } -> Option D

4. Quick Check:

   Nesting combines selectors in order [OK]

Hint: Nested selectors combine parents in order [OK]

Common Mistakes:

• Leaving nested selectors inside braces in output
• Combining properties incorrectly
• Using commas instead of nesting

4. Identify the error in this Sass code:

.card {
  &.active {
    background: green;
  }
  .title {
    font-weight: bold;
  }
  & .subtitle {
    font-size: 1.2rem;
  }
}

medium

A. Missing semicolon after font-weight: bold.

B. The selector & .subtitle adds an unwanted space, changing meaning.

C. Cannot use & with class selectors.

D. Nesting .title inside .card is invalid.

Solution

1. Step 1: Analyze the & .subtitle selector

   The space after & means it selects .card .subtitle. This is different from &.subtitle which selects .card.subtitle.

2. Step 2: Check other parts for errors

   Semicolons are present, & usage with classes is valid, and nesting .title inside .card is correct.

3. Final Answer:

   The selector & .subtitle adds an unwanted space, changing meaning. -> Option B

4. Quick Check:

   Space after & changes selector meaning [OK]

Hint: No space after & means same element, space means child [OK]

Common Mistakes:

• Adding space after & when not intended
• Thinking & cannot be combined with classes
• Missing semicolons (but they are present here)

5. You want to style a button inside a .card only when the card is .active. Which Sass nesting produces the correct CSS selector .card.active button?

hard

A. .card {
&.active {
button {
color: red;
}
}
}

B. .card {
button {
&.active {
color: red;
}
}
}

C. .card {
& button.active {
color: red;
}
}

D. .card.active {
&button {
color: red;
}
}

Solution

1. Step 1: Understand the target selector

   The selector .card.active button means a button inside a .card that also has the .active class.

2. Step 2: Check nesting structure

   .card { &.active { button { color: red; } } } nests button inside &.active inside .card, producing .card.active button. Other options either place .active on the button or use incorrect nesting.

3. Final Answer:

   .card { &.active { button { color: red; } } } -> Option A

4. Quick Check:

   Nesting &.active then button matches .card.active button [OK]

Hint: Nest &.active first, then button inside for correct selector [OK]

Common Mistakes:

• Placing .active on button instead of card
• Using & with space incorrectly
• Not nesting button inside &.active