Debugging specificity issues in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select all paragraphs with class highlight.

CSS

p[1]highlight { color: red; }

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

A.

B#

C:

D*

Attempts:

3 left

💡 Hint

Common Mistakes

Using # which selects by ID, not class.

Using : which is for pseudo-classes.

The dot . is used to select elements by class in CSS.

2fill in blank

medium

Complete the code to make the color style more specific for the element with ID title.

CSS

#[1] { color: blue; }

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

Afooter

Bheader

Cmain

Dtitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using a tag name instead of the ID name.

Confusing class selectors with ID selectors.

The ID selector uses a hash # followed by the exact ID name.

3fill in blank

hard

Fix the error in the selector to increase specificity for a button inside a form with class submit.

CSS

form[1]submit button { background-color: green; }

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

A.

B>

C#

D+

Attempts:

3 left

💡 Hint

Common Mistakes

Using #submit which selects by ID, not class.

Using combinators like > or + incorrectly.

To select elements by class, use a dot . before the class name.

4fill in blank

hard

Fill both blanks to select all li elements inside an unordered list with class menu that are direct children.

CSS

ul[1]menu [2] li { font-weight: bold; }

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

A.

B>

D#

Attempts:

3 left

💡 Hint

Common Mistakes

Using space instead of > selects all descendants, not just direct children.

Using # instead of . for class.

Use . to select by class and > to select direct children.

5fill in blank

hard

Fill both blanks to select all input elements inside a form with ID login that have class required.

CSS

form[1]login input[2]required { border: 2px solid red; }

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

A#

C.

D>

Attempts:

3 left

💡 Hint

Common Mistakes

Using dot instead of hash for ID.

Using combinators incorrectly between elements.

Forgetting to use dot for class.

Use # for ID, space for descendant, and . for class selectors.