HTML & CSS Course
HTML & CSS
/
Beginner

Selectors

Definition

CSS Selectors define the HTML elements to which a set of CSS rules apply.

Explain Like I'm New

CSS is a sniper. Selectors are the scope. Before you can change the color of a button, you have to 'select' the button. You can target elements by their tag name (`button`), their Class (`.btn`), or their ID (`#submit-btn`).

Real World Example

Using `.nav-link:hover` to select navigation links, but ONLY when the user's mouse is hovering over them.

Common Use Cases

  • •Targeting specific elements for styling

Interactive Example

Interview Questions

basic

  • What symbol is used to select a Class, and what symbol is used for an ID?

intermediate

  • What does the selector `div p` (with a space) do?

Flash Cards

Question

Class vs ID symbols?

Click to reveal answer
Answer

A period (`.`) selects a Class (e.g., `.card`). A hashtag (`#`) selects an ID (e.g., `#header`).

Question

What does 'div p' do?

Click to reveal answer
Answer

It is a Descendant Selector. It selects EVERY paragraph `<p>` that lives anywhere inside a `<div>`.