CodeX Cider Logo
CodeX Cider
CSS Topics
🎨 CSS Design✨Lesson 3 of 16

Selectors

Today we pick who to style: a type selector for every tag, a class for a reusable group, and an id for one unique element.

⏱️~5 min read🟢Beginner⚡Jump to Code Editor

What you'll learn in this lesson

  1. 01Type selectors target all elements of a tag
  2. 02Class selectors (.name) style reusable groups
  3. 03ID selectors (#name) target one unique element
  4. 04The Specificity formula: who wins when rules clash
  5. 05Combinators: styling children, descendants, and siblings
🎯 Specificity Weight & Priority LadderWho Wins in Conflicts?
Lowest (0-0-1)
h1, p, div

Type / Element Selector

Medium (0-1-0)
.btn, .card

Class / Attribute Selector

High (1-0-0)
#hero, #nav

ID Selector

Nuclear Option
!important

Overrides all rules (avoid!)

  1. 1

    The Roll-Call of Selectors: Element, Class, and ID

    In an army or classroom, if the sergeant shouts "Soldiers!", everyone turns around. That is a Type Selector (p, h1, button).

    If they call "Cricket Team!", only members wearing that badge respond. That is a Class Selector (.badge, .btn-primary).

    If they call a specific person by their unique passport or Aadhaar number, only one human answers. That is an ID Selector (#user-profile).

  2. 2

    The Battle of Specificity: Who Wins When Rules Clash?

    What happens when an element matches three different rules at the same time? Suppose p says text is blue, .lead says text is green, and #main says text is red.

    CSS resolves this clash using Specificity. An ID selector always beats a class selector, and a class selector always beats a type selector. If two selectors have identical specificity, the one written lower in the stylesheet wins (source order).

  3. 3

    Descendant and Child Combinators

    You can combine selectors to target elements based on their relationships:

    • nav a: Targets any link located anywhere inside a <nav> (Descendant).
    • ul > li: Targets only direct children <li> immediately inside a <ul>.
    • h2, p: Groups selectors so both receive the same styling without repeating code.
  4. 4

    Hands-On Practice: Styling with Classes and IDs

    Look at the code below. Notice how the class .alert styles a warning card, while #hero applies prominent styles to the banner.

  5. 5

    Best Practice: Classes for 95% of Everyday Work

    Modern frontend developers use classes for nearly all styling. Using IDs for CSS styling is considered an anti-pattern because their high specificity makes overriding them later in the project a nightmare.

Interactive Live Editor
selectors.css
Click & type to editHTML5
Browser Preview

Line by line

  1. p { color: #475569; }

    Type selector. Sets the base text color for every paragraph on the page. Lowest specificity.

  2. .alert { background: #fef2f2; }

    Class selector (starts with a dot .). Reusable across any element tagged with class="alert".

  3. #hero { font-size: 32px; }

    ID selector (starts with a hash #). Targets exactly one element with id="hero". Strongest specificity among the three.

Try it yourself

Write a class selector .badge that gives elements a background color of #4f46e5 and white text. Then write an ID rule #special that makes the text bold.

Hint: Remember: in CSS, class names begin with . and IDs begin with #.

💡 View Solution (if stuck)
/* 1. Class Selector */
.badge {
  background-color: #4f46e5;
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 9999px;
}

/* 2. ID Selector */
#special {
  font-weight: bold;
}
Quick Knowledge Check

If an element has <p id='intro' class='text'>, and CSS defines 'p { color: blue; }', '.text { color: green; }', and '#intro { color: red; }', what color will the text be?

Common mistakes

  • 1.Putting dots or hashes in HTML attributes: class=".lead" instead of class="lead".
  • 2.Overusing IDs for everyday CSS styling, making overrides difficult.
  • 3.Using multiple identical IDs on the same page (IDs must be unique per document).

Interview prep (Click to reveal)

Q: How is CSS specificity calculated?▼

Specificity is represented as a 3-part score (a, b, c):
- a: Number of ID selectors (e.g. #nav)
- b: Number of class, pseudo-class, and attribute selectors (e.g. .btn, :hover)
- c: Number of element (tag) and pseudo-element selectors (e.g. p, ::after)
Inline styles sit above all three as (1, 0, 0, 0).

Q: What is the difference between a class and an ID in CSS?▼

A class can be reused across any number of elements on a page, while an ID must be unique to a single element. In CSS, class selectors start with . and ID selectors start with #.

Q: Why is relying on !important considered bad practice?▼

!important completely breaks the natural cascade and specificity ladder. The only way to override an !important declaration later is by adding another !important with higher specificity, creating an uncontrollable 'specificity arms race'.

Next lessonPseudo-classes & Elements