Syntax, selectors and specificity
Anatomy of a rule
selector { property: value; }
.card h2 { color: #a10000; margin-block: 0 .5rem; }
Selectors you will use
| Selector | Matches |
|---|---|
p |
every paragraph |
.btn |
elements with class btn |
#hero |
the element with id hero |
nav a |
links inside nav (descendant) |
ul > li |
direct children |
a:hover, :focus-visible |
states |
input[type="email"] |
attribute |
li:nth-child(odd) |
position |
.card:has(img) |
parent that contains an image |
Specificity
Inline styles > ids > classes/attributes/pseudo-classes > elements. When equal, the later rule wins. Keep specificity low and flat — prefer single classes — and you will rarely need !important.
Rating
0
0
There are no comments for now.