CSS Selectors – Targeting HTML Elements Like a Pro

Introduction – Why Learn CSS Selectors?

At the core of every styled webpage lies one fundamental concept—CSS Selectors. They allow you to target HTML elements precisely and apply styles to them. Whether you’re styling a single element, an entire section, or elements based on relationships or attributes, selectors give you total control.

In this article, you’ll learn:

• The different types of CSS selectors
• How to target elements using IDs, classes, and attributes
• The difference between combinators and pseudo-selectors
• Real-life examples to understand usage

Topics Covered

Basic Selectors

CSS Element Selectors

Targets HTML elements by tag name.

p {
  color: green;
}

All <p> elements turn green.

CSS ID Selectors

Targets elements by unique id using #.

#header {
  background: blue;
}

Only the element with id="header" is affected.

CSS Class Selectors

Targets elements by class using ..

.card {
  border: 1px solid #ccc;
}

Applies to any element with class="card".

CSS Group Selectors

Apply the same style to multiple elements.

h1, h2, h3 {
  font-family: sans-serif;
}

Saves duplication in stylesheets.

CSS Universal Selectors

Targets all elements using *.

* {
  margin: 0;
  padding: 0;
}

Resets all element spacing.

CSS Combinator Selectors

Select elements based on relationships in the HTML hierarchy.

CSS Descendant Selector (A B)

Targets B inside A at any level.

article p {
  line-height: 1.6;
}

Applies to all <p> tags inside <article>.

CSS Child Selector (A > B)

Targets B elements that are direct children of A.

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

Only top-level <li>s inside <ul> are styled.

↔️ CSS Adjacent Sibling Selector (A + B)

Targets B that is the immediate sibling of A.

h2 + p {
  color: gray;
}

Styles <p> that follows an <h2>.

CSS General Sibling Selector (A ~ B)

Targets all siblings B after A.

h2 ~ p {
  font-style: italic;
}

Affects every <p> after an <h2>.

CSS Attribute Selectors

Selects elements based on attributes or attribute values.

Examples:

input[type="text"] {
  border: 1px solid #000;
}

a[href^="https"] {
  color: green;
}

img[alt*="icon"] {
  width: 24px;
}

Attribute selectors are powerful for targeting form fields, links, icons, etc.

CSS Pseudo-classes

Apply styles based on user interactions or element state.

Examples:

a:hover {
  color: red;
}

input:focus {
  outline: 2px solid blue;
}

li:first-child {
  font-weight: bold;
}

Used for hover effects, active elements, form interactions, etc.

CSS Pseudo-elements

Target specific parts of an element.

Examples:

p::first-line {
  text-transform: uppercase;
}

h1::after {
  content: "";
}

Style the first line, first letter, or insert decorative content.

Summary – CSS Selectors

CSS Selectors are the building blocks for styling web pages. By understanding each selector type, you can craft powerful, efficient styles that match your layout needs and UI behaviors.

Key Takeaways:

• Use basic selectors for general styling
• Use combinators to style based on structure
• Use attribute selectors for targeting by attributes
• Use pseudo-classes for interaction/state
• Use pseudo-elements to style parts of content

Mastering selectors lets you write clean, efficient, and scalable stylesheets.

Frequently Asked Questions (FAQs) — CSS Selectors

What’s the difference between a class and ID selector?
Class uses . and can be reused. ID uses # and must be unique per page.

Can I combine multiple selectors?
Yes! Use combinators like A B, A > B, or group them with commas.

How do I style elements based on their attributes?
Use attribute selectors like input[type="checkbox"].

What’s the difference between pseudo-classes and pseudo-elements?
Pseudo-classes style based on state (:hover, :focus), pseudo-elements style content parts (::before, ::after).

Are CSS combinators supported in all browsers?
Yes, all modern browsers fully support CSS combinators.