CSS — Selectors

What are Selectors?

CSS selectors tell the browser which HTML elements to style. The right selector means the right elements get the right styles.

Basic Selectors

Element Selector

Targets all elements of a type:

p {
  color: blue;
}

h1 {
  font-size: 2rem;
}

Class Selector

Targets elements with a specific class (use .):

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

.highlight {
  background-color: yellow;
}

<div class="card highlight">Styled card</div>

ID Selector

Targets a single element with a specific ID (use #):

#header {
  background: #333;
  color: white;
}

<div id="header">Unique element</div>

Universal Selector

Targets everything:

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

Attribute Selector

Targets elements with specific attributes:

a[target="_blank"] { color: red; }
input[type="email"] { border-color: blue; }
a[href^="https"] { color: green; }       /* starts with */
a[href$=".pdf"] { color: orange; }        /* ends with */
a[href*="example"] { color: purple; }    /* contains */

Combinators

Descendant (space)

Targets all descendants:

div p {
  color: blue; /* all p inside div, at any depth */
}

Child (>)

Targets direct children only:

div > p {
  color: red; /* only p directly inside div */
}

Adjacent Sibling (+)

Targets the immediately following sibling:

h2 + p {
  margin-top: 0; /* p right after h2 */
}

General Sibling (~)

Targets all following siblings:

h2 ~ p {
  color: gray; /* all p after h2 (same parent) */
}

Pseudo-Classes

Target elements in a specific state:

a:hover { color: red; }           /* mouse over */
a:visited { color: purple; }      /* already clicked */
a:active { color: orange; }       /* being clicked */
a:focus { outline: 2px solid blue; } /* keyboard focus */

li:first-child { font-weight: bold; }  /* first li */
li:last-child { border: none; }         /* last li */
li:nth-child(2) { color: red; }         /* second li */
li:nth-child(odd) { background: #f5f5f5; } /* odd rows */

input:required { border-left: 3px solid red; }
input:disabled { opacity: 0.5; }
p:not(.special) { color: gray; }  /* p without .special */

Pseudo-Elements

Target parts of an element:

p::first-line { font-weight: bold; }    /* first line of text */
p::first-letter { font-size: 2rem; }    /* first letter */
p::before { content: "→ "; }            /* insert before */
p::after { content: " ✓"; }             /* insert after */
p::selection { background: yellow; }     /* highlighted text */

Specificity

When multiple rules target the same element, specificity decides which wins:

/* Lowest specificity */
p { color: blue; }           /* 0-0-1 */

/* Higher specificity */
p.intro { color: green; }    /* 0-1-1 */

/* Even higher */
#main { color: red; }        /* 1-0-0 */

/* Highest */
p.intro#main { color: purple; }  /* 1-1-1 */

/* !important beats everything (avoid!) */
p { color: orange !important; }

Specificity order: !important > inline > ID > class/attribute/pseudo-class > element/pseudo-element

Grouping Selectors

Style multiple selectors with the same rules:

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

Chaining Selectors

Combine selectors for precision:

/* Class AND element */
p.intro { color: blue; }  /* only <p> with class "intro" */

/* Two classes */
.card.featured { border: 2px solid gold; }

/* Element with attribute */
input[type="text"]:focus { border-color: blue; }

Best Practices

• Use classes for styling (reusable, maintainable)
• Reserve IDs for unique elements and JavaScript targeting
• Avoid !important — it makes debugging harder
• Keep selectors specific but not too specific
• Use data-* attributes for JavaScript hooks, classes for styling

Mini Practice

1. Style all <a> tags on hover
2. Use :nth-child to create zebra-striped table rows
3. Use ::before to add icons before list items
4. Create a dropdown that appears on :hover
5. Use attribute selectors to style different input types

Up Next

Next: Colors →