Lesson 2 of 8

Selectors: picking what to style

A CSS rule is only as good as its selector. If you can't pick the right elements, you can't style them. In this lesson you'll learn the selectors you'll use every day and what happens when two rules disagree.

Element selectors

You've already used these. The selector is just the name of an element, and it picks every element of that type:

css

p {
  line-height: 1.6;
}

Every paragraph on the page gets that line height. Simple and powerful, but sometimes too broad. What if you only want some paragraphs to look different?

Class selectors

That's what classes are for. You add a class attribute to the elements you want in HTML:

html

<p class="intro">Hi, I'm Alex and I'm learning web development.</p>
<p>This is a normal paragraph.</p>

And in CSS, you pick them with a dot in front of the class name:

css

.intro {
  font-size: 22px;
}

Only the paragraph with the intro class gets bigger. You can use the same class on as many elements as you like, and one element can have several classes, separated by spaces:

html

<p class="intro highlight">...</p>

Classes are what you'll use most of the time. They're flexible, reusable and easy to read.

Quick check

Which selector picks every element with class="card"?

Select one answer

ID selectors

An id is like a class, but it must be unique. Only one element on the page can have a given id. In CSS, you pick it with a hash sign:

css

#contact {
  background-color: whitesmoke;
}

You've already used ids for your menu links, like href="#contact". You can style them too, but most developers prefer classes for styling and keep ids for linking and JavaScript. You'll see why in a moment.

Combining selectors

Grouping. To give several selectors the same styles, separate them with commas:

css

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

Descendants. A space between two selectors means "inside". This picks only the links inside the nav, not every link on the page:

css

nav a {
  text-decoration: none;
}

Descendant selectors are really useful for styling a part of the page without adding classes everywhere.

Quick check

What does the selector footer p pick?

Select one answer

Hover and other states

Pseudo-classes let you style an element when it's in a certain state. They're written with a colon. The one you'll use most is :hover, which applies while the mouse is over the element:

css

a:hover {
  color: tomato;
}

Another important one is :focus-visible, which applies when someone reaches an element with the keyboard. Remember the focus outline from the accessibility lesson? If you ever change how it looks, make sure it's still clearly visible.

Which rule wins?

Sometimes two rules target the same element and set the same property. Which one wins depends on how specific the selectors are. From weakest to strongest:

Element selectors, like p
Class selectors, like .intro
ID selectors, like #contact

So with this HTML:

html

<p class="intro">Hello</p>

And this CSS:

css

.intro {
  color: green;
}

p {
  color: blue;
}

The paragraph is green, even though the blue rule comes later. A class is more specific than an element, and specificity beats order. Only when two selectors are equally specific does the later one win.

This is also why many developers avoid ids for styling. An id is so specific that it's hard to override later, which can lead to some frustrating moments.

Quick check

An element has class="note". The rule .note sets the color to red and a later rule p sets it to black. What color is it?

Select one answer

Use the developer tools

When a style isn't working, the developer tools are your best friend. Right click the element and choose Inspect. In the Styles panel you'll see every rule that applies to it. Rules that lost the fight are shown with a line through them, so you can see exactly what's overriding what.

You can even change values right there and see the result instantly. It's the fastest way to experiment.

Try it yourself

Use selectors to style different parts of your website:

Add class="intro" to the first paragraph in your about section and make it bigger with a .intro rule
Style all the links in your nav with a descendant selector, for example by removing the underline
Add a :hover rule that changes the color of links when the mouse is over them
Give all your h1 and h2 elements the same font with a grouped selector

Then right click one of your styled elements, choose Inspect and find your rules in the Styles panel.