TABLE OF CONTENTS

CSS selectors are used to find (or select) the HTML elements you want to style.
This guide covers the most commonly used selectors so you can target elements precisely and confidently.


Simple Selectors

Simple selectors target elements based on:

  • Element name

  • ID

  • Class

  • The universal selector (*) which selects everything

Common Simple Selectors

SelectorExampleWhat it Does
elementpSelects all <p> elements
#id#firstnameSelects the element with id="firstname"
**Selects all elements
.class.introSelects all elements with class="intro"
element.classp.introSelects <p> elements with class "intro"

Usage Examples


/* Select all paragraph elements */
p {
color: blue;
}

/* Select element with specific ID */
#firstname {
font-weight: bold;
}

/* Select everything (universal selector) */
* {
margin: 0;
padding: 0;
}

/* Select all elements with a class */
.intro {
font-size: 18px;
}


/* Select only <p> elements with class intro */
p.intro {
background-color: yellow;
}


Attribute Selectors

Attribute selectors target elements based on the presence or value of an attribute.

Common Attribute Selectors

SelectorExampleDescription
[attribute][lang]Elements that have a lang attribute
[attribute=value][lang="it"]Exact match of attribute value
[attribute~=value][title~="flower"]Attribute contains the word "flower"
[attribute|=value][lang|="en"]Value is "en" or starts with "en-"
[attribute^=value][href^="https"]Attribute begins with "https"
[attribute$=value][href$=".pdf"]Attribute ends with ".pdf"
[attribute*=value][href*="w3schools"]Attribute contains "w3schools"

Usage Examples

/* Elements that have a lang attribute */
[lang] {
border: 1px solid gray;
}

/* Exact match */
[lang="it"] {
font-style: italic;
}

/* Title contains the word "flower" */
[title~="flower"] {
color: green;
}

/* lang is en or starts with en- */
[lang|="en"] {
text-decoration: underline;
}

/* Links starting with https */
[href^="https"] {
color: green;
}

/* Links ending in .pdf */
[href$=".pdf"] {
background-image: url("pdf-icon.png");
}

/* Links containing w3schools */
[href*="w3schools"] {
font-weight: bold;
}

Examples in Practice

Example 1: Styling External Links

/* External links */
a[href^="http"] {
color: blue;
text-decoration: underline;
}

/* Add icon to PDF links */
a[href$=".pdf"]::after {
content: " ?";
}

Example 2: Form Styling

/* Required inputs */
input[required] {
border: 2px solid red;
}

/* Text inputs */
input[type="text"] {
padding: 10px;
border-radius: 4px;
}

/* Email inputs */
input[type="email"] {
background-color: #f0f0f0;
}

Example 3: Combining Selectors

/* Div with class container + data-theme attribute */
div.container[data-theme] {
padding: 20px;
}

/* Submit button with btn class */
button.btn[type="submit"] {
background-color: green;
color: white;
}

Quick Reference Cheat Sheet

GoalSelector
Select all elements of a typeelement (div, p, a)
Select by ID#idname
Select by class.classname
Select everything*
Has attribute[attr]
Attribute equals[attr="value"]
Attribute starts with[attr^="value"]
Attribute ends with[attr$="value"]
Attribute contains[attr*="value"]

Tips 

Specificity matters

  • #id is stronger than .class

  • .class is stronger than element

Combine selectors for precision

div.container[data-active="true"]

Targets only:

  • <div>

  • with class "container"

  • and attribute data-active="true"

Case sensitivity

Attribute selectors are case-sensitive by default.
Use i for case-insensitive:

[href$=".PDF" i]

Great for dynamic styling

Attribute selectors are perfect for data-* attributes without needing JavaScript.