CSS Selectors: Element, Class, ID & Combinators

When styling web pages with CSS, one of the very first things you’ll encounter is the selector. A CSS selector tells the browser which part of the HTML you want to style.

From simple element selectors to more advanced combinators, selectors help you target your content precisely and keep your code clean.

In this post, we’ll explore the most commonly used selectors: element, class, id, and combinators.

What Is a CSS Selector?

A selector is the part of a CSS rule that targets one or more elements.

Example:

css
p {
  color: blue;
}

Here:

• p is the selector (targeting all

  elements).

• color: blue; is the declaration that styles the selected elements.

1. Element Selector

The element selector targets all instances of a specific HTML element.

Example:

css
h1 {
  font-size: 2rem;
  color: crimson;
}

This styles all <h1> headings on your page.

Use when you want to apply global styles to an element type.

2. Class Selector

The class selector uses a dot (.) followed by the class name. It allows you to style multiple elements that share a specific class.

HTML:

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

CSS:

css
.highlight {
  background-color: yellow;
}

Use when you need reusable styles across multiple elements.

3. ID Selector

The ID selector uses a hash (#) followed by the element’s ID. It’s unique on a page (intended for one element).

HTML:

xml
<p id="intro">Welcome to my site!</p>

CSS:

css
#intro {
  font-style: italic;
}

Best practice: use ID selectors sparingly (mainly for unique elements like headers or anchors). Classes are more flexible and reusable.

4. Combinators

Combinators define relationships between selectors. They allow for more specific and hierarchical styling.

(a) Descendant Selector ( )

Targets elements nested inside another.

css
div p {
  color: green;
}

Styles all <p> inside <div>.

(b) Child Selector (>)

Targets direct children only, not nested deeper.

css
div > p {
  color: blue;
}

Styles <p> that are direct children of <div>, but not deeper nested ones.

(c) Adjacent Sibling Selector (+)

Targets the element immediately after another element.

css
h1 + p {
  font-weight: bold;
}

Styles the first <p> right after <h1>.

(d) General Sibling Selector (~)

Targets all siblings that come after a specified element.

css
h1 ~ p {
  color: gray;
}

Styles all <p> elements that appear after an <h1> within the same parent.

Best Practices

• Use element selectors for broad, global styling.
• Use class selectors for reusable, modular styles.
• Use IDs sparingly, primarily for unique elements or JavaScript hooks.
• Use combinators for precise targeting while keeping CSS readable.

Final Thoughts

CSS selectors give you fine-grained control over which elements you want to style. Starting with simple element, class, and id selectors, and then moving to combinators, you can precisely define how styles are applied across your web pages.

Mastering selectors is the first step to mastering CSS itself — because before you style something, you need to know how to select it.

Check out the YouTube Playlist for great CSS content for basic to advanced topics.

Please Do Subscribe Our YouTube Channel for clearing programming concept and much more ...CodenCloud