CSS Selectors

A CSS selector is the part of a CSS rule that points to the HTML element(s) that should be styled. Think of a selector as an address — it tells the browser exactly where to apply the styling.

CSS provides several types of selectors, each useful in different situations. Understanding selectors is one of the most important foundations of CSS.

1. Universal Selector

The universal selector uses an asterisk (*) and targets every single element on the page.

* {
    margin: 0;
    padding: 0;
}

This is often used at the top of a stylesheet to remove default spacing from all elements before applying custom styles.

2. Element (Type) Selector

The element selector targets all HTML elements of a specific type by their tag name.

p {
    color: gray;
    font-size: 16px;
}

h2 {
    color: navy;
}

This styles all <p> tags in gray and all <h2> tags in navy color.

3. Class Selector

A class selector targets elements that have a specific class attribute. It is written with a dot (.) before the class name.

HTML

<p class="highlight">This text is highlighted.</p>
<p>This text is normal.</p>

CSS

.highlight {
    background-color: yellow;
    font-weight: bold;
}

Only the paragraph with class="highlight" will get the yellow background. The other paragraph stays normal.

A class can be used on multiple elements, and one element can have multiple classes separated by spaces.

<p class="highlight large">Styled with two classes.</p>

4. ID Selector

An ID selector targets a single unique element with a specific id attribute. It is written with a hash (#) before the ID name.

HTML

<div id="header">This is the main header.</div>

CSS

#header {
    background-color: darkblue;
    color: white;
    padding: 20px;
}

An ID should be unique — only one element on a page should have a particular ID value.

5. Grouping Selector

When multiple elements need the same styles, list them together separated by commas to avoid repeating code.

h1, h2, h3 {
    font-family: Arial, sans-serif;
    color: #333;
}

This applies the same font and color to all three heading levels at once.

6. Descendant Selector

The descendant selector targets elements that are nested inside another element. It uses a space between two selectors.

div p {
    color: green;
}

This styles only the <p> tags that are inside a <div>. Paragraphs outside a div are not affected.

7. Child Selector

The child selector is similar to the descendant selector but more specific. It only targets elements that are direct children (one level deep), not grandchildren. It uses a greater-than sign (>).

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

This targets only <li> elements that are directly inside a <ul>.

8. Attribute Selector

The attribute selector targets elements based on a specific HTML attribute or attribute value.

input[type="text"] {
    border: 1px solid gray;
    padding: 8px;
}

This styles only <input> fields where the type is "text". Other input types like checkboxes or buttons are not affected.

9. Pseudo-class Selector

A pseudo-class selector targets an element based on its state or position. It is written with a colon (:) after the selector.

a:hover {
    color: red;
    text-decoration: underline;
}

This changes a link's color to red when the mouse cursor hovers over it. Common pseudo-classes include :hover, :focus, :first-child, and :last-child.

Selector Priority (Specificity)

When multiple CSS rules target the same element, the browser decides which one to apply based on specificity — a scoring system that ranks how specific each selector is.

Summary

CSS selectors are the foundation of writing effective stylesheets. The element selector is best for applying broad styles, the class selector is perfect for reusable styles across multiple elements, and the ID selector is ideal for unique page sections. Learning to combine selectors correctly allows precise control over every element on a web page.