ID selectors in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an ID selector in CSS?

An ID selector targets an HTML element with a specific id attribute. It uses a # followed by the id name to apply styles to that unique element.

beginner

How do you write an ID selector for an element with id="header"?

You write it as #header in your CSS. For example:

#header { background-color: lightblue; }

beginner

Can multiple elements share the same ID in HTML?

No. IDs must be unique within a page. Only one element should have a particular ID to keep styles and scripts predictable.

intermediate

Which has higher priority: an ID selector or a class selector?

An ID selector has higher priority (specificity) than a class selector. This means styles from an ID selector override those from a class selector if both apply.

beginner

Example: What will this CSS do?

#main { color: red; }

It will make the text color red for the element with id="main". Only that element is affected.

How do you select an element with the ID "footer" in CSS?

A #footer

B .footer

C footer

D *footer

The # symbol is used to select elements by their ID.

Can two elements have the same ID in a valid HTML document?

A Yes, IDs can be reused

B Only if they have different classes

C No, IDs must be unique

D Only if they are inside different sections

IDs must be unique to ensure styles and scripts target the correct element.

Which selector has higher specificity?

A .menu

B #menu

C div

D *

ID selectors (#menu) have higher specificity than class selectors (.menu), element selectors (div), or universal selectors (*).

What symbol is used before the ID name in CSS selectors?

A #

B .

C @

D $

The # symbol is used to select elements by their ID.

If an element has both an ID and a class, which style will override if both set the same property?

A Neither, they cancel out

B Class style

C The one declared last

D ID style

ID selectors have higher specificity and override class selectors.

Explain what an ID selector is and how it is used in CSS.

Think about how you pick a unique item in a group.

Describe the difference in priority between ID selectors and class selectors in CSS.

Which one wins when both apply?

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