Bird
Raised Fist0
CSSmarkup~5 mins

ID selectors in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

ID selectors let you style one specific element on a webpage. This helps you change the look of that element without affecting others.

You want to style a unique header or title on your page.
You need to change the color of a specific button.
You want to add special spacing or font size to one paragraph.
You want to highlight a single section differently from the rest.
You want to target one element for JavaScript or CSS effects.
Syntax
CSS
#idName { property: value; }
The # symbol is used before the ID name to select it.
ID names must be unique on the page; only one element should have that ID.
Examples
This changes the text color of the element with ID 'header' to blue.
CSS
#header { color: blue; }
This sets the background color of the element with ID 'submitButton' to green.
CSS
#submitButton { background-color: green; }
This makes the element with ID 'mainTitle' bigger and bold.
CSS
#mainTitle { font-size: 2rem; font-weight: bold; }
Sample Program

The paragraph with id="specialText" is styled to be red, bigger, and bold. The other paragraphs stay normal.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ID Selector Example</title>
  <style>
    #specialText {
      color: red;
      font-size: 1.5rem;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p>This is a normal paragraph.</p>
  <p id="specialText">This paragraph is styled using an ID selector.</p>
  <p>This is another normal paragraph.</p>
</body>
</html>
OutputSuccess
Important Notes

Remember, IDs should be unique on the page. Using the same ID on multiple elements can cause unexpected results.

ID selectors have higher priority than class selectors, so they override class styles if both apply.

Summary

ID selectors target one unique element using the # symbol.

Use IDs to style or control a single element on your page.

Make sure each ID is unique to avoid confusion.

Practice

(1/5)
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