CSS Selectors

CSS selectors are patterns used to 'select' the HTML elements you want to style. They are the target of your CSS rules, telling the browser which parts of the page to apply the formatting to.

---

1. Universal Selector (*)

The universal selector targets every single element on the HTML page. It is frequently used for resets (like removing default margins and padding).

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

---

2. Element Selector

The element selector selects elements based on their HTML tag name (like h1, p, div, etc.).

p {
    color: #333;
    line-height: 1.6;
}

h1 {
    color: #2e7d52;
}

---

3. Class Selector (.class)

The class selector targets elements with a specific class attribute. Unlike IDs, classes can be reused on multiple elements within the same page.

.highlight-text {
    color: #2e7d52;
    font-weight: bold;
}

---

4. ID Selector (#id)

The ID selector uses the id attribute of an HTML element to select a **single, unique** element. An ID should only be used once per page.

#unique-element {
    background-color: #e8f5e9;
    padding: 5px;
    border-radius: 4px;
}

---

Grouping Selectors

If multiple elements share the same style, you can group their selectors by separating them with a **comma** to keep your code clean.

/* Styles multiple heading levels at once */
h1, h2, h3 {
    text-align: center;
    color: #2e7d52;
}

---

---

Common Mistakes to Avoid

---

Try It: A Navigation Menu

Combining an element selector with a class selector — a realistic pairing you'll use constantly:

<nav>
    <a class="nav-link" href="#">Home</a>
    <a class="nav-link" href="#">About</a>
</nav>

<style>
nav a.nav-link {
    text-decoration: none;
    color: #2e7d52;
    margin-right: 12px;
}
nav a.nav-link:hover {
    text-decoration: underline;
}
</style>

Rendered result:

---

Frequently Asked Questions