ID selectors in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select an element with the ID "header".

CSS

#[1] { color: blue; }

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

A.header

Bheader

Cheader1

Dmain

Attempts:

3 left

💡 Hint

Common Mistakes

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

Misspelling the ID name.

The # symbol is used to select an element by its ID. So #header selects the element with ID "header".

2fill in blank

medium

Complete the code to change the background color of the element with ID "main-content".

CSS

#[1] { background-color: lightgray; }

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

Amain-content

Bcontent-main

Cmaincontent

Dcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Using a similar but incorrect ID name.

Forgetting the hyphen (-) in the ID.

The ID selector must match the exact ID of the element. Here, the ID is "main-content", so #main-content selects it.

3fill in blank

hard

Fix the error in the CSS selector to style the element with ID "footer".

CSS

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

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

A*

B.

C#

D@

Attempts:

3 left

💡 Hint

Common Mistakes

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

Using invalid symbols like * or @.

The # symbol is required to select an element by its ID. Using #footer correctly targets the element with ID "footer".

4fill in blank

hard

Fill both blanks to select the element with ID "nav" and set its text color to red.

CSS

[1][2] { color: red; }

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

A#

B.

Cnav

Dheader

Attempts:

3 left

💡 Hint

Common Mistakes

Using a dot (.) instead of a hash (#).

Using the wrong ID name.

The # symbol selects by ID, and the ID name is "nav". So #nav selects the element with that ID.

5fill in blank

hard

Fill all three blanks to select the element with ID "sidebar", set its width to 250px, and add a border.

CSS

[1][2] { width: [3]; border: 1px solid black; }

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

A#

Bsidebar

C250px

D.

Attempts:

3 left

💡 Hint

Common Mistakes

Using a dot (.) instead of a hash (#) for ID selector.

Forgetting units for width value.

Use #sidebar to select the element by ID. Then set the width to 250px to control its size.

Practice

1. What does an ID selector in CSS target?
#header { color: blue; }

easy

A. All elements of a specific type

B. A single unique element with the specified ID

C. All elements with the specified class

D. All elements inside a container

Solution

1. Step 1: Understand the meaning of # in CSS

   The # symbol in CSS is used to select an element by its unique ID attribute.

2. Step 2: Identify what an ID selector targets

   An ID selector targets exactly one element that has the matching ID value.

3. Final Answer:

   A single unique element with the specified ID -> Option B

4. Quick Check:

   ID selector = unique element [OK]

Hint: ID selectors start with # and target one unique element [OK]

Common Mistakes:

• Confusing ID selector with class selector (which uses .)
• Thinking ID selects multiple elements
• Using ID selector without # symbol

2. Which of the following is the correct syntax to select an element with ID main-content in CSS?

easy

A. #main-content { }

B. .main-content { }

C. main-content { }

D. *main-content { }

Solution

1. Step 1: Recall the syntax for ID selectors

   ID selectors use the # symbol followed by the ID name without spaces.

2. Step 2: Match the correct syntax

   The correct syntax is #main-content { } to select the element with ID "main-content".

3. Final Answer:

   #main-content { } -> Option A

4. Quick Check:

   ID selector syntax = #idname [OK]

Hint: Use # before ID name, no spaces [OK]

Common Mistakes:

• Using . instead of # for ID
• Omitting # symbol
• Adding extra characters like * before ID

3. Given the HTML:

<div id="box">Hello</div>

And CSS:

#box { color: red; } .box { color: blue; }

What color will the text inside the div appear?

medium

A. Blue

B. Black (default)

C. Red

D. Both red and blue

Solution

1. Step 1: Identify the selectors applied

   The div has an ID "box" but no class "box". The CSS has an ID selector #box and a class selector .box.

2. Step 2: Determine which selector applies

   Since the div has ID "box", the #box selector applies, setting color to red. The class selector does not apply.

3. Final Answer:

   Red -> Option C

4. Quick Check:

   ID selector overrides class selector = red [OK]

Hint: ID selectors override class selectors in CSS [OK]

Common Mistakes:

• Confusing class and ID selectors
• Assuming both styles apply simultaneously
• Ignoring CSS specificity rules

4. What is wrong with this CSS code if the element with ID nav is not styled?

#nav { background-color: yellow color: white }

medium

A. CSS property name is incorrect

B. ID selector should use a dot (.) instead of #

C. ID selector must be written as nav#

D. Missing semicolon after property value

Solution

1. Step 1: Check CSS syntax for property declarations

   Each CSS property declaration must end with a semicolon ;. Omitting semicolons between properties causes errors.

2. Step 2: Identify the missing semicolon

   The code #nav { background-color: yellow color: white } is missing a semicolon after yellow. This can cause some browsers to ignore the rule.

3. Final Answer:

   Missing semicolon after property value -> Option D

4. Quick Check:

   CSS properties end with ; [OK]

Hint: Always end CSS declarations with a semicolon [OK]

Common Mistakes:

• Using . instead of # for ID selectors
• Writing selector as nav# instead of #nav
• Misspelling CSS property names

5. You want to style only the element with ID footer to have a green background and white text. Which CSS code correctly does this and ensures no other elements are affected?

hard

A. #footer { background-color: green; color: white; }

B. .footer { background-color: green; color: white; }

C. footer { background-color: green; color: white; }

D. *#footer { background-color: green; color: white; }

Solution

1. Step 1: Identify the correct selector for an ID

   To select an element by ID, use #idname. Here, #footer targets the element with ID "footer".

2. Step 2: Confirm the CSS properties and uniqueness

   The properties background-color: green; and color: white; style the background and text color. Using #footer ensures only that element is styled.

3. Final Answer:

   #footer { background-color: green; color: white; } -> Option A

4. Quick Check:

   ID selector with # targets one element [OK]

Hint: Use #footer to style only the footer element [OK]

Common Mistakes:

• Using .footer which targets class, not ID
• Using element selector footer which targets all footer tags
• Adding unnecessary * before #footer