CSS Selectors

CSS CODES & EXAMPLES

CSS Selectors

Learn how CSS selectors target HTML elements and apply styles to specific parts of a webpage. Explore basic, grouping, attribute, combinator and pseudo-class selectors with practical examples.

← CSS Introduction Start Learning →

What is a CSS Selector?

Select HTML elements for styling

A CSS selector identifies the HTML elements to which CSS rules should be applied. Selectors allow you to style individual elements, groups of elements, classes, IDs, attributes and elements based on their position or state.

Basic structure:selector { property: value; }

Element Selector

Select elements by their HTML tag

element-selector.css

p {
  color: #1769d5;
  font-size: 18px;
}

h1 {
  color: #172337;
}

This paragraph is selected using the p element selector.

Universal Selector

Select every element

universal-selector.css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

The * selector targets all HTML elements.

Class Selector

Select elements using a class name

class-selector.css

.student {
  color: #1769d5;
  font-weight: bold;
}

.card {
  padding: 20px;
  border-radius: 12px;
}

Student Card

ID Selector

Select an element using its unique ID

id-selector.css

#main-heading {
  color: #1769d5;
  font-size: 32px;
}

Main Heading

Grouping Selector

Style multiple selectors together

grouping.css

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

Separate multiple selectors with commas.

Descendant Selector

Select elements inside another element

descendant.css

.card p {
  color: #1769d5;
}

This selects every p element inside an element having the card class.

Child Selector

Select direct children

child-selector.css

.menu > li {
  margin-bottom: 10px;
}

The > combinator selects only direct children.

Adjacent Sibling Selector

Select the next sibling element

adjacent.css

h2 + p {
  color: #1769d5;
}

The + selector targets the immediately following sibling.

General Sibling Selector

Select following siblings

general-sibling.css

h2 ~ p {
  color: #1769d5;
}

The ~ selector targets all matching siblings that appear after the selected element.

Attribute Selector

Select elements based on attributes

attribute.css

input[type="email"] {
  border: 2px solid #1769d5;
}

input[required] {
  background: #f4f8ff;
}

Attribute Value Selector

Select a specific attribute value

attribute-value.css

input[type="text"] {
  background: #f8fbff;
}

a[target="_blank"] {
  color: #1769d5;
}

:first-child

Select the first child

first-child.css

li:first-child {
  color: #1769d5;
  font-weight: bold;
}

:last-child

Select the last child

last-child.css

li:last-child {
  color: #d94b4b;
}

:nth-child()

Select elements by their position

nth-child.css

li:nth-child(2) {
  color: #1769d5;
}

li:nth-child(even) {
  background: #f4f8ff;
}

:hover

Style an element when the mouse moves over it

hover.css

.button {
  background: #1769d5;
  color: white;
}

.button:hover {
  background: #0d4e9f;
}

:focus

Style focused form controls

focus.css

input:focus {
  border-color: #1769d5;
  outline: none;
  box-shadow:
    0 0 0 3px
    rgba(23,105,213,.12);
}

:active

Style an element while it is being activated

active.css

button:active {
  transform: scale(.96);
}

:not()

Exclude matching elements

not.css

p:not(.special) {
  color: #555;
}

::before and ::after

Create generated content

pseudo-elements.css

.title::before {
  content: "★ ";
}

.title::after {
  content: " ✓";
}

Combined Selectors

Use multiple selector types together

combined.css

.card > h2 {
  color: #1769d5;
}

.card p.special {
  font-weight: bold;
}

input[type="email"]:focus {
  border-color: #1769d5;
}

CSS Selectors Live Preview

Interactive selector example

LIVE PREVIEW

CSS Selector Quick Reference

Important selectors at a glance

Selector	Example	Purpose
`*`	`*`	All elements
Element	`p`	Select paragraphs
Class	`.card`	Select class
ID	`#header`	Select ID
Grouping	`h1, h2`	Select multiple elements
Descendant	`.card p`	Element inside another
Child	`.card > p`	Direct child
Attribute	`input[type="email"]`	Attribute matching
Pseudo-class	`a:hover`	Element state
Pseudo-element	`p::before`	Generated content