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.