Class selectors in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select all elements with the class highlight.

CSS

.[1] { color: red; }

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

A*highlight

B#highlight

Chighlight

Dhighlighted

Attempts:

3 left

💡 Hint

Common Mistakes

Using a hash (#) instead of a dot (.) for class selectors.

Adding extra characters before the class name.

In CSS, a class selector starts with a dot (.) followed by the class name. Here, .highlight selects all elements with the class highlight.

2fill in blank

medium

Complete the code to make text bold for elements with the class bold-text.

CSS

.[1] { font-weight: bold; }

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

Abold-text

Btext-bold

Cboldtext

Dbold_text

Attempts:

3 left

💡 Hint

Common Mistakes

Using underscores instead of hyphens.

Mixing up the order of words in the class name.

The class selector must exactly match the class name used in HTML. Here, .bold-text targets elements with class bold-text.

3fill in blank

hard

Fix the error in the class selector to change background color for container class.

CSS

[1]container { background-color: lightblue; }

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

A#

B.

C*

D:

Attempts:

3 left

💡 Hint

Common Mistakes

Using # instead of . for class selectors.

Omitting the dot before the class name.

Class selectors must start with a dot (.) before the class name. Here, .container correctly selects elements with class container.

4fill in blank

hard

Complete the code to select elements with class menu and set font size to 1.2rem.

CSS

[1]menu { font-size: 1.2rem; }

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

A.

B#

D:

Attempts:

3 left

💡 Hint

Common Mistakes

Using # instead of .

Adding colon (:) before class name.

In CSS, a class selector starts with a dot (.) immediately followed by the class name. Here, .menu selects all elements with the class menu.

5fill in blank

hard

Fill all three blanks to create a CSS rule that selects elements with class btn inside a nav element and sets their color to green.

CSS

[1]nav[2].[3]btn { color: green; }

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

A>

D+

Attempts:

3 left

💡 Hint

Common Mistakes

Using > or + combinators incorrectly.

Adding spaces between dot and class name.

To select elements with class btn inside a nav element, use nav .btn. The first blank is empty (no combinator) between nav and the space, the second blank is a space to separate nav and .btn, and the third blank is empty because the dot is already present before btn.