Skip to main content
CSS for Beginners
CHAPTER 02 Beginner

CSS Selectors and Specificity

Updated: May 10, 2026
5 min read

# CSS Selectors and Specificity

1. Introduction

Welcome to Chapter 2! CSS Selectors are the foundation of styling. They are the rules you use to target exactly which HTML elements you want to design. If CSS is a paintbrush, selectors are how you choose the canvas.

2. Learning Objectives

By the end of this chapter, you will understand:
  • How to select elements by tag, class, and ID.
  • Advanced selectors like descendant and child selectors.
  • How to use pseudo-classes and pseudo-elements.
  • The concept of CSS Specificity (the cascade).

3. Detailed Explanations

Element Selectors

The simplest way to target elements is by their HTML tag name.
css
12345 
/* Selects all <p> tags on the page */
p {
    color: blue;
    font-size: 16px;
}

Class Selectors

Class selectors target elements with a specific class attribute. They start with a dot .. You can use a class on multiple elements.
css
12345 
/* Selects all elements with class="highlight" */
.highlight {
    background-color: yellow;
    font-weight: bold;
}

ID Selectors

ID selectors target a single, unique element using the id attribute. They start with a hash #.
css
12345 
/* Selects the exact element with id="main-header" */
#main-header {
    font-size: 32px;
    text-align: center;
}

Universal and Group Selectors

The universal selector * targets *everything*. Group selectors let you apply the same styles to multiple selectors by separating them with commas.
css
1234567891011 
/* Universal selector */
* {
    box-sizing: border-box;
    margin: 0;
}

/* Group selector */
h1, h2, h3 {
    font-family: Arial, sans-serif;
    color: darkblue;
}

Descendant and Child Selectors

Target elements based on their relationships.
  • Descendant (Space): Targets any element inside another, no matter how deep.
  • Child (>): Targets only direct children.
css
123456789 
/* Descendant: Any <a> inside a <div> */
div a {
    text-decoration: none;
}

/* Child: Only <p> tags directly inside <article> */
article > p {
    line-height: 1.5;
}

Pseudo-classes

Pseudo-classes target an element in a specific *state*, like when a user hovers over it.
css
12345678910 
/* Applies when the mouse is over the button */
button:hover {
    background-color: darkgreen;
    cursor: pointer;
}

/* Targets the first paragraph in a container */
p:first-child {
    font-size: 18px;
}

CSS Specificity

When two rules conflict, which one wins? CSS uses a points system called Specificity:
  1. 1. Inline styles (Highest)
  1. 2. IDs
  1. 3. Classes, Attributes, Pseudo-classes
  1. 4. Elements (Lowest)
css
123 
/* ID wins over Class, so the text will be red */
#title { color: red; }
.title-class { color: blue; }

4. Mini Project: Blog Article Styler

Let's build a styled article using these selectors!
html
123456789 
<article id="blog-post">
    <h1 class="title">My CSS Journey</h1>
    <p class="intro">Learning CSS selectors is fun!</p>
    <div class="content">
        <p>This is standard text.</p>
        <p class="highlight">This is important text.</p>
        <a href="#">Read more</a>
    </div>
</article>
css
1234567 
/* Mini Project Styles */
#blog-post { max-width: 600px; padding: 20px; }
.title { color: navy; border-bottom: 2px solid gray; }
.intro { font-style: italic; color: gray; }
.content > p { margin-bottom: 15px; }
.content p.highlight { background-color: yellow; font-weight: bold; }
a:hover { color: orange; }

5. MCQs

Q1: Which selector is used to select an element with a specific ID? A) . B) # C) * D) > *Answer: B*

6. Summary

Selectors are the backbone of CSS. Mastering them ensures you can accurately and cleanly apply your styles without writing repetitive code. Specificity dictates which rule wins in a conflict.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter CSS Basics for Beginners
Next Chapter CSS Colors, Backgrounds, and Gradients

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 6

🎥 Related Videos 1