Basic selector nesting in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to nest the p selector inside .container.

SASS

.container {
  [1] {
    color: blue;
  }
}

Drag options to blanks, or click blank then click option'

A#p

Bp

C.p

Dcontainer

Attempts:

3 left

💡 Hint

Common Mistakes

Using a dot before 'p' which makes it a class selector.

Using a hash before 'p' which makes it an ID selector.

The selector p targets paragraph elements inside .container. Using .p or #p would look for classes or IDs named 'p', which is incorrect here.

2fill in blank

medium

Complete the code to nest .title inside .header.

SASS

.header {
  [1] {
    font-weight: bold;
  }
}

Drag options to blanks, or click blank then click option'

Aheader

Btitle

C#title

D.title

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the dot before 'title'.

Using a hash instead of a dot.

To target elements with the class title inside .header, use .title. Without the dot, it would look for a tag named 'title', which is not correct.

3fill in blank

hard

Fix the error in nesting the li selector inside ul.menu.

SASS

ul.menu {
  [1] {
    list-style: none;
  }
}

Drag options to blanks, or click blank then click option'

Ali

B.li

C#li

Dmenu

Attempts:

3 left

💡 Hint

Common Mistakes

Adding a dot before 'li' making it a class selector.

Adding a hash before 'li' making it an ID selector.

The li tag is used for list items inside ul.menu. Using .li or #li would look for class or ID selectors named 'li', which is incorrect.

4fill in blank

hard

Fill both blanks to nest span inside .button and set its color to red.

SASS

.button {
  [1] {
    color: [2];
  }
}

Drag options to blanks, or click blank then click option'

Aspan

Bred

Cblue

Dp

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong tag name like 'p' instead of 'span'.

Choosing a color other than red.

The span selector targets span elements inside .button. The color red is set by the value 'red'.

5fill in blank

hard

Fill all three blanks to nest input inside form.login, set its border to 1px solid black, and background to white.

SASS

form.login {
  [1] {
    border: [2];
    background: [3];
  }
}

Drag options to blanks, or click blank then click option'

Ainput

B1px solid black

Cwhite

Dbutton

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'button' instead of 'input' for the selector.

Incorrect border value or missing units.

Choosing wrong background color.

The input selector targets input fields inside the form. The border style is '1px solid black' and the background color is 'white' as required.

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