Basic Selectors
/* Element — all h1 tags */
h1 { color: red; }
/* Class — elements with class="card" */
.card { padding: 16px; }
/* ID — element with id="header" */
#header { background: black; }
/* Universal — every element */
* { box-sizing: border-box; }
/* Attribute */
input[type="email"] { border-color: blue; }Combinators
| Selector | Meaning | Example |
|---|---|---|
| Space | Descendant (any level deep) | nav a |
> | Direct child only | ul > li |
+ | Adjacent sibling | h2 + p |
~ | All siblings after | h2 ~ p |
, | Group — apply to both | h1, h2 |
Pseudo-classes & Pseudo-elements
a:hover { color: red; } /* mouse over */
li:first-child { font-weight: bold; }
input:focus { outline: 2px solid blue; }
p::first-line { font-weight: bold; } /* first line of text */
li::marker { color: red; } /* bullet/number */Prefer classes over IDs for styling — classes are reusable, IDs are not.