CSS Selectors – All Types Explained with Examples And Live Preview (2026-27)

✅ What is a CSS Selector?

A CSS selector is the first part of a CSS rule — it defines which HTML element(s) the style should be applied to. It is written before the opening curly brace {.

✅ Without a selector, CSS cannot know where to apply the styles.

✅ Selectors can target all elements of a type, elements with a specific class or ID, elements in a specific state, or even virtual parts of elements.

✅ All CSS Selector Types – Overview

✅ 1. Element Selector

The element selector targets all HTML elements of a specific tag type. It is the simplest selector and is written as just the tag name.

✅ Syntax:-

/* Targets ALL p elements on the page */
p {
  color: #333;
  font-size: 16px;
  line-height: 1.8;
}

/* Targets ALL h1 elements */
h1 {
  color: #1E3A5F;
  font-size: 32px;
  font-weight: bold;
}

/* Targets ALL anchor links */
a {
  color: #0EA5E9;
  text-decoration: none;
}

✅ 2. Class Selector (.classname)

The class selector targets all elements with a specific class attribute. It starts with a dot (.) followed by the class name. Classes are the most commonly used selector in real CSS projects.

✅ Syntax:-

/* CSS — class selector with . prefix */
.highlight {
  background: yellow;
  padding: 2px 6px;
}

.btn-primary {
  background: #0EA5E9;
  color: #fff;
  padding: 10px 24px;
  border-radius: 6px;
  border: none;
}

✅ HTML using class:-

<p>This word is <span class="highlight">highlighted</span>.</p>
<button class="btn-primary">Click Me</button>
<a href="#" class="btn-primary">I am also a button</a>

✅ 3. ID Selector (#idname)

The ID selector targets the one element with a specific id attribute. It starts with a hash (#) followed by the ID name. IDs must be unique — only one element per page should have a given ID.

✅ Syntax:-

/* CSS — ID selector with # prefix */
#main-header {
  background: #1E3A5F;
  color: #fff;
  height: 80px;
  padding: 0 24px;
  display: flex;
  align-items: center;
}

#hero-section {
  background: linear-gradient(135deg, #F0F9FF, #E0F2FE);
  padding: 80px 40px;
  text-align: center;
}

✅ HTML using ID:-

<header id="main-header">
  <h1>LearnToSAP.com</h1>
</header>

<section id="hero-section">
  <h2>Learn CSS Step by Step</h2>
</section>

✅ 4. Universal Selector (*)

The universal selector (*) targets every element on the page. It is most commonly used in CSS resets to remove default browser styles.

✅ Example:-

/* CSS reset — remove all default margins and padding */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Reset combined with child selector */
.card * {
  font-family: Arial, sans-serif;
  color: #333;
}

✅ 5. Group Selector (A, B)

The group selector applies the same CSS rule to multiple selectors at once by separating them with commas. This is the DRY (Don't Repeat Yourself) approach to CSS.

✅ Without grouping (repetitive):-

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

✅ With grouping (clean and DRY):-

/* One rule for three selectors */
h1, h2, h3 {
  color: #1E3A5F;
  font-family: Arial, sans-serif;
}

/* Mix elements and classes */
input, textarea, select {
  border: 1px solid #ddd;
  padding: 8px 12px;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
}

✅ 6. Descendant & Child Selectors

These selectors target elements based on their position inside another element.

✅ Examples:-

/* Descendant: all links inside nav */
nav a {
  color: #0EA5E9;
  text-decoration: none;
}

/* Child: only direct li inside ul */
ul > li {
  list-style: none;
  padding: 8px 0;
}

/* Adjacent sibling: p right after h2 */
h2 + p {
  font-size: 16px;
  color: #666;
  margin-top: 0;
}

✅ 7. Pseudo-class Selectors (:hover :focus :nth-child)

A pseudo-class targets an element in a specific state — like when a user hovers over it, clicks it, or when it is the first element in a list. Written with a single colon (:).

✅ Most Common Pseudo-classes:-

/* Hover state — mouse over element */
a:hover {
  color: #0284C7;
  text-decoration: underline;
}

button:hover {
  background: #0284C7;
  transform: translateY(-1px);
}

/* Focus state — form element is active */
input:focus {
  border-color: #0EA5E9;
  outline: none;
  box-shadow: 0 0 0 3px rgba(14,165,233,0.2);
}

/* First and last child */
li:first-child { font-weight: bold; }
li:last-child  { border-bottom: none; }

/* Nth child — target specific positions */
tr:nth-child(even) { background: #F0F9FF; } /* alternating rows */
tr:nth-child(odd)  { background: #fff; }

/* Not selector */
p:not(.special) { color: #444; } /* all p except .special */

✅ 8. Pseudo-element Selectors (::before ::after)

A pseudo-element targets a virtual part of an element — content that doesn't physically exist in the HTML but can be styled with CSS. Written with a double colon (::).

✅ Most Used Pseudo-elements:-

/* ::before — insert virtual content before the element */
.quote::before {
  content: '"';
  color: #0EA5E9;
  font-size: 40px;
  font-weight: bold;
  line-height: 0;
  vertical-align: -15px;
  margin-right: 4px;
}

/* ::after — insert virtual content after the element */
.required-field::after {
  content: ' *';
  color: red;
  font-weight: bold;
}

/* ::first-line — style the first line of text only */
p::first-line {
  font-weight: bold;
  color: #1E3A5F;
}

/* ::first-letter — style the first letter only */
p::first-letter {
  font-size: 3em;
  float: left;
  color: #0EA5E9;
  margin-right: 4px;
  line-height: 0.8;
}

/* ::placeholder — style placeholder text in inputs */
input::placeholder {
  color: #aaa;
  font-style: italic;
}

✅ 9. Attribute Selectors ([attr=value])

Attribute selectors target elements based on their HTML attributes and attribute values. They use square brackets [ ].

✅ Examples:-

/* Exact match — input where type equals "text" */
input[type="text"] {
  border: 1px solid #ddd;
  padding: 8px;
  border-radius: 4px;
}

/* Has attribute — images that have an alt attribute */
img[alt] {
  border: 2px solid #d4edda; /* green border = accessible */
}

/* Starts with — links to external sites (https) */
a[href^="https"] {
  color: #2e7d32; /* green for secure links */
}

/* Ends with — links to PDF files */
a[href$=".pdf"] {
  color: #c0392b;
}
a[href$=".pdf"]::after {
  content: " 📄";
}

/* Contains — any element where class contains "btn" */
[class*="btn"] {
  cursor: pointer;
  border-radius: 6px;
}

/* Language attribute */
[lang="en"] {
  font-family: Arial, sans-serif;
}

✅ Class vs ID – Key Differences

✅ Selector Specificity

When multiple CSS rules target the same element, specificity determines which rule wins. Higher specificity = rule takes priority.

✅ Specificity calculation examples:-

p              /* 0,0,0,1 = score:   1 — element */
.text          /* 0,0,1,0 = score:  10 — class   */
#main          /* 0,1,0,0 = score: 100 — ID      */
p.text         /* 0,0,1,1 = score:  11 — element + class */
#main p.text   /* 0,1,1,1 = score: 111 — ID + element + class */

✅ Complete CSS Selector Reference Table

✅ ✏️ Live Interactive CSS Selectors Playground

Edit the HTML and CSS below and see the result instantly in the live preview. Try all the preset examples to see each selector type in action!

✅ Common CSS Selector Mistakes to Avoid