? CSS Selectors

? Quick Overview

CSS selectors are patterns used to select the HTML elements you want to style. They form the first part of a CSS rule-set and determine which elements the styles will apply to. You can target elements by their name, ID, class, attributes, and even relationships between elements.

? Key Concepts

Element Selector: Targets all HTML elements of a specific type, for example p selects all paragraphs.
Class Selector: Targets elements with a specific class using a dot (.) prefix, for example .highlight.
ID Selector: Targets a specific element with a unique ID using a hash (#) prefix, for example #special.
Universal Selector: The selector * selects all elements on the page.
Grouping Selector: A list like h1, h2, p targets multiple element types with the same rule.
Combinators: Selectors such as div span (descendant) and ul > li (child) use relationships between elements.

? Selector Syntax

A basic CSS rule uses a selector followed by a declaration block:

? View Selector Syntax

/* General structure of a CSS rule */
selector {
property: value;
}

Different selector types plug into this same structure. Below are the most common basic selectors.

? View Basic Selector Types

/* Element, class and ID selectors */
p {
color: blue;
}

.highlight {
background-color: yellow;
}

#special {
font-weight: bold;
}

? Basic Example

Here is a simple HTML snippet that uses the selectors above.

? View HTML Example

<!-- HTML using the CSS selectors above -->
<p>This is a normal paragraph.</p>
<p class="highlight">This paragraph uses a class selector.</p>
<p id="special">This paragraph uses an ID selector.</p>

? Live Output Concept

This is a normal paragraph.

This paragraph uses a class selector.

This paragraph uses an ID selector.

In a real browser with the CSS applied, you would see:

The normal paragraph in default text color.
The .highlight paragraph with a yellow background.
The #special paragraph in bold text.

? Combinator Selectors

Selectors can also target elements based on their relationship in the HTML tree.

? View Combinator Examples

/* Descendant and child combinator examples */
div span {
color: green;
}

ul > li {
list-style-type: square;
}

? What These Rules Do

div span selects any <span> that lives inside a <div>, at any nesting level, and colors the text green.

ul > li selects only those <li> that are direct children of a <ul>, and sets their bullet style to squares.

Example structure:

A <span> inside a <div> will be green.
List items in a <ul> will show square bullets.

? Tips & Best Practices

Prefer class selectors over ID selectors for styling; classes are reusable and more flexible.
Use IDs for unique elements such as main headings or layout hooks, not for everything.
Keep selector names meaningful, like .highlight or .notice, so your CSS is easier to understand.
When you want to target several elements with the same style, group them: h1, h2, p.
Remember that h1 h2 means “h2 inside h1”. If you want both, use h1, h2 instead.
Use browser DevTools to inspect elements and verify which selector is applying which style.
Explore advanced selectors like :hover, :first-child, and attribute selectors (for example input[type="text"]) as you get more comfortable.

? Try It Yourself

Create a paragraph with a class notice and make its text red using a class selector.
Add an ID main-title to an h1 element and change its color to green using an ID selector.
Style all li elements inside a ul to have circle bullets using a descendant selector.
Use the universal selector * to apply margin: 0 to all elements on the page.
Combine selectors: style all span elements inside div tags with a light background color.
Group h2 and p in one selector and give them the same font-size or color.
Write a rule that selects li elements that are direct children of a ul using ul > li.
Try an attribute selector like input[type="text"] and give those inputs a custom border.
Use the :hover pseudo-class to change the background color of a button when the mouse is over it.
Intentionally write a wrong selector, then use DevTools to see why it isn’t matching and fix it.