Property nesting for related styles in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to nest the color property inside the p selector.

SASS

p {
  [1]: blue;
}

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

Acolor

Bmargin

Cbackground

Dfont-size

Attempts:

3 left

💡 Hint

Common Mistakes

Using properties that do not affect text color like margin or background.

The color property sets the text color inside the p selector.

2fill in blank

medium

Complete the code to nest the :hover pseudo-class inside the a selector.

SASS

a {
  color: blue;
  [1] {
    color: red;
  }
}

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

A:focus

B:active

C:visited

D:hover

Attempts:

3 left

💡 Hint

Common Mistakes

Using :active or :visited which have different effects.

The :hover pseudo-class changes the link color when the mouse is over it.

3fill in blank

hard

Fix the error in nesting the span selector inside the div selector.

SASS

div {
  background: gray;
  [1] {
    color: white;
  }
}

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

A#span

B.span

Cspan

Ddiv span

Attempts:

3 left

💡 Hint

Common Mistakes

Adding a dot or hash before span which changes it to class or id selector.

To nest the span selector inside div, just write span without extra symbols.

4fill in blank

hard

Fill both blanks to nest the h1 selector and its :after pseudo-element inside the header selector.

SASS

header {
  [1] {
    font-size: 2rem;
    [2] {
      content: ' - Welcome';
    }
  }
}

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

Ah1

B:before

C:after

Dfooter

Attempts:

3 left

💡 Hint

Common Mistakes

Using :before instead of :after for the pseudo-element.

Using footer instead of h1.

The h1 selector is nested inside header, and its :after pseudo-element adds content after the heading.

5fill in blank

hard

Fill all three blanks to nest the nav selector, its ul child, and the :hover pseudo-class for li inside nav.

SASS

nav {
  [1] {
    list-style: none;
    [2] {
      padding: 0.5rem;
      [3] {
        background-color: lightgray;
      }
    }
  }
}

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

Aul

Bli

C:hover

Da

Attempts:

3 left

💡 Hint

Common Mistakes

Using a instead of li or ul in nesting.

Using :active or other pseudo-classes instead of :hover.

The ul is nested inside nav, then li inside ul, and :hover pseudo-class inside li to style on mouse hover.