CSS Selectors

CSS selectors identify the HTML elements you want to style. They act like instructions that tell the browser, “Find these elements and apply these styles.”

A CSS rule has this structure:

selector {
  property: value;
}

For example:

p {
  color: blue;
}

Here, p is the selector. It selects every <p> element and changes its text colour to blue.

Element Selector

The element selector uses an HTML tag name. It selects every element with that tag.

h1 {
  color: navy;
}

This rule changes all <h1> headings to navy.

Use it when every element of the same type needs a common style.

Class Selector

A class selector starts with a full stop (.). The same class can be added to multiple HTML elements.

<p class="highlight">Important information</p>

.highlight {
  background-color: yellow;
}

Class selectors are useful because they:

• Can be reused on different elements
• Help create consistent designs
• Are commonly used for buttons, cards, and messages

ID Selector

An ID selector starts with a hash symbol (#). It normally targets one unique element on a page.

<h1 id="page-title">Learn CSS</h1>

#page-title {
  color: purple;
}

Use classes for reusable styles and IDs when an element needs a unique identifier.

Universal Selector

The universal selector is written as an asterisk (*). It selects every HTML element.

* {
  box-sizing: border-box;
}

It is helpful for applying a common setting across the page. However, use it carefully because it can affect many elements.

Grouping Selector

A grouping selector applies the same styles to multiple selectors. Separate each selector with a comma.

h1,
h2,
h3 {
  color: darkblue;
}

This makes all three heading types dark blue without repeating the declaration.

Descendant Selector

A descendant selector uses a space between two selectors. It targets matching elements located anywhere inside another element.

article p {
  color: gray;
}

This selects every paragraph inside an <article>. Paragraphs outside the article are not affected.

Child Selector

A child selector uses the greater-than symbol (>). It selects elements that are direct children of another element.

nav > a {
  color: green;
}

This selects links placed directly inside <nav>. It does not select links inside another nested element within the navigation.

Adjacent Sibling Selector

The adjacent sibling selector uses a plus symbol (+). It selects the first matching element immediately after another element.

h2 + p {
  font-weight: bold;
}

This selects the first paragraph appearing directly after an <h2> heading.

General Sibling Selector

The general sibling selector uses a tilde (~). It selects all matching sibling elements that appear later.

h2 ~ p {
  color: brown;
}

This selects all paragraphs that come after an <h2> and share the same parent.

Attribute Selector

An attribute selector targets elements based on an HTML attribute or its value.

input[type="email"] {
  border: 2px solid blue;
}

This selects only <input> elements whose type is email.

Another example selects every element containing a title attribute:

[title] {
  cursor: help;
}

Combined Selector

Selectors can be combined to create a more specific target.

p.notice {
  color: red;
}

This selects only <p> elements with the notice class:

<p class="notice">Please complete all fields.</p>

A <div class="notice"> would not be selected because it is not a paragraph.