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:<br>

#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?<br>

#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?