Basic selector nesting in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

What CSS does this Sass code produce?

Given the Sass code below, what is the resulting CSS output?

SASS

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    text-decoration: none;
  }
}

A

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    text-decoration: none;
  }
}

B

ul nav {
  margin: 0;
  padding: 0;
  list-style: none;
}
li nav {
  display: inline-block;
}
a nav {
  text-decoration: none;
}

C

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  text-decoration: none;
}

D

nav > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav > li {
  display: inline-block;
}
nav > a {
  text-decoration: none;
}

💡 Hint

Remember that nested selectors in Sass combine the parent selector with the nested one.

In Sass, nesting selectors inside another selector combines them by placing the parent selector before the nested one, separated by a space. So 'nav { ul { ... } }' becomes 'nav ul { ... }' in CSS.

❓ selector

intermediate

Which option shows the correct nested Sass for this CSS?

Given this CSS, which Sass code would produce it? nav ul { margin: 0; } nav ul li { display: block; } nav ul li a { color: blue; }

A

nav {
  ul {
    margin: 0;
  }
  li {
    display: block;
    a {
      color: blue;
    }
  }
}

B

nav {
  ul {
    margin: 0;
    li {
      display: block;
      a {
        color: blue;
      }
    }
  }
}

C

nav ul {
  margin: 0;
  li {
    display: block;
    a {
      color: blue;
    }
  }
}

D

nav {
  ul {
    margin: 0;
  }
  ul li {
    display: block;
    a {
      color: blue;
    }
  }
}

💡 Hint

Think about how nesting inside 'ul' inside 'nav' matches the CSS selectors.

Nesting 'li' inside 'ul' inside 'nav' in Sass creates selectors like 'nav ul li' in CSS. Further nesting 'a' inside 'li' inside 'ul' inside 'nav' creates 'nav ul li a'.

❓ selector

advanced

What is the output CSS of this Sass with parent selector &?

Consider this Sass code: .button { color: white; &-primary { background: blue; } &-secondary { background: gray; } }

A

.button {
  color: white;
}
&-primary {
  background: blue;
}
&-secondary {
  background: gray;
}

B

.button {
  color: white;
  -primary {
    background: blue;
  }
  -secondary {
    background: gray;
  }
}

C

.button {
  color: white;
}
-primary {
  background: blue;
}
-secondary {
  background: gray;
}

D

.button {
  color: white;
}
.button-primary {
  background: blue;
}
.button-secondary {
  background: gray;
}

💡 Hint

The & symbol in Sass means 'use the parent selector here'.

Using &-primary inside .button means the selector becomes .button-primary. Similarly for &-secondary. The base .button keeps its styles.

❓ layout

advanced

How does this nested Sass affect layout with Flexbox?

Given this Sass code: .container { display: flex; .item { flex: 1; &:hover { background: lightgray; } } }

A The container becomes a flex container. Each .item inside it shares space equally and changes background on hover.

B The container is block by default. .item elements float left and no hover effect.

C The container uses grid layout. .item elements have fixed width and no hover effect.

D The container is flex but .item elements do not share space equally and hover does nothing.

💡 Hint

Flexbox distributes space among children with flex: 1. &:hover applies styles on hover.

display:flex on .container makes it a flex container. .item with flex:1 means all items share space equally. &:hover inside .item applies background color on hover.

❓ accessibility

expert

Which nested Sass code best supports keyboard focus styles accessibly?

You want to style a button and its focus state for keyboard users. Which Sass code correctly nests and uses :focus-visible for accessibility? Options:

A

.btn {
  background: blue;
  color: white;
  &:focus-visible {
    outline: 3px solid orange;
  }
}

B

.btn {
  background: blue;
  color: white;
  &:focus {
    outline: none;
  }
}

C

.btn {
  background: blue;
  color: white;
  &:hover {
    outline: 3px solid orange;
  }
}

D

.btn {
  background: blue;
  color: white;
  &:active {
    outline: 3px solid orange;
  }
}

💡 Hint

Use :focus-visible to show focus outlines only when keyboard navigation is used.

:focus-visible applies styles only when the element is focused via keyboard, improving accessibility by not showing outlines on mouse clicks. &:focus-visible nests this selector properly in Sass.