HTML and CSS Reference
In-Depth Information
We c
an only s
tyle
eleme
nts in t
he body,
so w
e're not
showing
the
<head> e
lement
and
everythi
ng under
it.
Seeing selectors visually
Let's take some selectors and see how they map
to the tree you just created. Here's how this “h1”
selector maps to the graph:
html
h1 {
font-family: sans-serif;
}
head
body
h1
p
p
h2
p
This s
elector m
atches
any
<h1> e
lements
in the p
age,
and t
here's on
ly one.
img
a
em
a
And here's how the “h1, h2” selector looks:
html
h1, h2 {
font-family: sans-serif;
}
body
p
p
p
h1
h2
Now
th
e sel
ecto
r
img
a
em
a
mat
che
s bot
h <
h1>
and
<h2
> e
leme
nts.
If we use a “p” selector, here's how that looks:
html
p {
font-family: sans-serif;
}
body
p
p
p
h1
h2
This s
elector mat
ches all the
<p> el
ements in t
he tree.
img
a
em
a
