Selectors are how CSS finds the elements to style.
Direct answer
A CSS selector picks the elements a rule applies to. The most common are element (p), class (.card), ID (#header), descendant (nav a), child (ul > li) and attribute (input[type="email"]) selectors. You can combine them for precision.
Examples
p { color: #333; } /* all paragraphs */
.card { padding: 16px; } /* class */
#hero { margin-bottom: 32px; } /* id */
nav a { text-decoration: none; } /* links inside nav */
ul > li { list-style: square; } /* direct children only */
input[type="email"] { border: 1px solid #999; }
h1, h2, h3 { font-family: sans-serif; } /* group */
Tips
- Prefer classes for styling.
- Keep selectors short.
- Avoid IDs for styling, since they are hard to override.
Where Teyro fits
Teyro's HTML & CSS for Beginners course turns this into short lessons you can play in a few minutes a day. It has 100 lessons, and you can start free.
The bottom line
Learn these six and you can target almost anything. See CSS specificity for what happens when rules collide.
