Specificity rules 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 instead of class.

Using ':' which is for pseudo-classes.

Using '*' which selects all elements.

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

2fill in blank

medium

Complete the code to select an element with ID 'main'.

CSS

[1]main { background-color: yellow; }

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

A#

B:

C.

D*

Attempts:

3 left

💡 Hint

Common Mistakes

Using '.' which selects by class instead of ID.

Using ':' which is for pseudo-classes.

Using '*' which selects all elements.

The hash # is used to select elements by their ID in CSS.

3fill in blank

hard

Fix the error in the selector to increase specificity by selecting a button inside a div with class 'container'.

CSS

div[1]container button { font-weight: bold; }

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.

Using '>' which selects direct children only.

To select elements by class, use a dot .. Here, div.container button selects buttons inside divs with class 'container'.

4fill in blank

hard

Fill both blanks to select all list items inside an unordered list with class 'menu'.

CSS

ul[1]menu [2] { color: blue; }

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

A.

B>

Cli

D#

Attempts:

3 left

💡 Hint

Common Mistakes

Using '#' instead of '.' for class selection.

Using '>' which selects only direct children, not all descendants.

Omitting the 'li' element selector.

The selector ul.menu li selects all li elements inside a ul with class 'menu'.

5fill in blank

hard

Fill all three blanks to create a selector that selects all paragraphs with class 'text' inside a section with ID 'content'.

CSS

section[1]content [2].[3] { font-size: 1.2rem; }

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

A#

Bp

Ctext

D>

Attempts:

3 left

💡 Hint

Common Mistakes

Using '.' instead of '#' for ID selection.

Omitting the element name 'p'.

Not using a dot before the class name 'text'.

The selector section#content p.text selects all p elements with class 'text' inside the section with ID 'content'.