Tutorials › CSS Mastery › Selectors

Selectors

5 min read Quiz at the end

Selectors target elements. p selects all paragraphs, .card by class, and #header by ID. Combine: .nav a targets links inside .nav. Pseudo-classes like :hover and :focus style elements in specific interactive states.

CSS Selectors

*           { box-sizing: border-box; }  /* universal */
p           { color: gray; }             /* element */
#header     { background: blue; }        /* id */
.card       { padding: 1rem; }           /* class */
div p       { margin: 0; }              /* descendant */
div > p     { margin: 0; }              /* direct child */
h1, h2, h3  { font-family: serif; }     /* group */
a:hover     { text-decoration: none; }  /* pseudo-class */
a::before   { content: "→ "; }          /* pseudo-element */
input[type="text"] { border: 1px solid; } /* attribute */

← Adding CSS Next: Specificity and Cascade →

Topic Quiz · 5 questions

Test your understanding before moving on

1. Which selector has highest specificity?

💡 ID selectors (#id) have higher specificity than class or element selectors.

2. Which selector selects direct children?

💡 div > p selects only direct child p elements, not descendants.

3. [type="text"] is a:

💡 [attr="value"] is an attribute selector.

4. Which pseudo-class selects on hover?

💡 :hover applies styles when the mouse cursor is over an element.

5. ::before is a:

💡 ::before is a pseudo-element that inserts content before the element's content.

Quick Access

Selectors

CSS Selectors

Test your understanding before moving on