TheUl

t
i
ma
t
e

CSSSELECTORS
Che
a
t
s
he
e
t

BASI
CSELECTORS&COMBI
NATORS

TheUni
ver
s
al
Sel
ec
t
or-s
e
l
e
c
tal
l
e
l
e
me
nt
s

h1

ul

h1 + p

TheAdj
ac
entSi
bl
i
ngCombi
nat
or-s
e
l
e
c
tal
l
<
p>
e
l
e
me
nt
st
ha
ti
mmedi
a
t
el
yf
ol
l
owa<
h1
>

h1

ul

h1 ~ p

TheGener
al
Si
bl
i
ngCombi
nat
or-s
e
l
e
c
tal
l
<
p>
e
l
e
me
nt
st
ha
tf
ol
l
ow(
andar
es
i
bl
i
ngsof
)a<
h1
>

h1

ul

.list > li

TheChi
l
dCombi
nat
or-s
e
l
e
c
tal
l
<
l
i
>e
l
e
me
nt
s
t
ha
tar
edi
r
e
c
tc
hi
l
dr
e
nof
.
l
i
s
t

<ul class=list>
<li>One
<li>Two
<ul>
<li>Sub Item

g
e
tt
hr
oughHTMLAt
t
r
i
but
e
s
ATTRI
BUTESELECTORS-Tar
button[disabled]
input[type=submit]
a[href^=http://]
a[href$=.de]
a[href*=twitter]

T
ar
g
e
tbut
t
one
l
e
me
nt
si
f
t
heyhav
et
hedi
s
abl
e
dat
t
r
i
but
eappl
i
ed
T
ar
g
e
ti
npute
l
e
me
nt
si
f
t
heyhav
eat
y
pea
t
t
r
i
but
ewi
t
hanexac
tv
al
ueof
s
ubmi
t
T
ar
g
e
t<
a>e
l
e
me
nt
st
ha
thav
eahr
e
f
v
al
uet
ha
ts
t
ar
t
swi
t
hht
t
p:
/
/
T
ar
g
e
t<
a>e
l
e
me
nt
st
ha
thav
eahr
e
f
v
al
uet
ha
tendswi
t
h.
de
T
ar
g
e
t<
a>e
l
e
me
nt
st
ha
thav
eahr
e
f
v
al
uet
ha
tc
ont
ai
nst
hewor
d
t
wi
t
t
e
r

ar
g
e
te
l
e
me
nt
st
ha
tdonote
x
i
s
ti
nt
heHTML(
asoppos
e
dt
ops
e
udoc
l
as
s
e
s
)
PSEUDOELEMENTS-Theset
div:before {
content: ;
}
div:after {
content: ;
}

The:
bef
or
eand:
a erps
e
udoe
l
e
me
nt
sal
l
owy
out
oi
ns
e
r
t
c
ont
e
ntbe
f
or
eora e
ranyHTMLe
l
e
me
ntt
ha
ti
s
n
ts
e
l
f
c
l
os
i
ng
(
l
i
k
e<
i
mg>and<
i
nput
>
)
.

:before

div

div

:after

Thec
ont
e
ntpr
ope
r
t
yi
sr
e
qui
r
e
dbutc
anbel
e bl
ank.
Thes
eps
eudoel
ement
sc
anbet
r
eat
edands
t
yl
edl
i
keany
ot
herel
ement
.

Ps
e
udoe
l
e
me
nt
sc
ont
i
nue
d.
.
.

St
e
phe
nGr
e
i
g/

PSEUDOELEMENTSCONTI
NUED
p:first-line

p:first-letter

T
ar
g
e
tt
hef
i
r
s
tl
i
neof
t
e
x
t

T
ar
g
e
tt
hef
i
r
s
tl
e
t
t
e
r

Thef
ol
l
owi
ngps
e
udoe
l
e
me
nt
sar
enoti
nt
hes
pe
c
i
f
i
c
a
t
i
onandc
ur
r
e
nt
l
yhav
ev
ar
y
i
ngi
mpl
e
me
nt
a
t
i
onsi
nt
hedi
e
r
e
ntbr
ows
e
r
s
.
Theyal
s
or
e
qui
r
et
hedoubl
ec
ol
onps
e
udoe
l
e
me
nts
y
nt
ax
.
p::-moz-selection
p::selection

St
y
l
es
e
c
t
i
onst
ha
thav
ebe
e
n
hi
ghl
i
ght
e
dbyt
heus
e
r

input::-webkit-input-placeholder
input::-ms-input-placeholder
input::-moz-placeholder
input::placeholder

L
or
e
mi
ps
umdol
ors
i
tame
t
,
c
ons
e
c
t
e
t
uradi
pi
s
c
i
nge
l
i
t
.
Al
i
quami
nphar
e
t
r
al
i
gul
a,
e
g
e
tmax
i
musl
e
o.
Ae
ne
an
pr
e
t
i
ummi
e
tmaur
i
smol
l
i
smal
e
s
uada.

St
y
l
eani
npute
l
e
me
nt

s
pl
ac
e
hol
e
rt
e
x
t
The
s
edon
twor
kwhe
nc
omma
s
e
par
a
t
e
da
tt
hemome
nt
.

Pl
ac
e
hol
de
rT
e
x
t

ngps
e
udoc
l
as
s
e
s
)
STATEBASEDPSEUDOCLASSES(Thebori
:link
:hover
:visited
:active
:focus

Se
l
e
c
t
sal
l
unv
i
s
i
t
e
dl
i
nk
s
Se
l
e
c
t
se
l
e
me
nt
sonmous
ehov
e
r
Se
l
e
c
t
sal
l
v
i
s
i
t
e
dl
i
nk
s
Se
l
e
c
t
sane
l
e
me
ntwhi
l
s
ti
ti
sbe
i
ngac
t
i
v
a
t
e
dbyt
heus
e
r
,
f
ore
x
ampl
e
,
whe
nt
heus
e
ri
smi
dc
l
i
c
k
Se
l
e
c
t
se
l
e
me
nt
s(
t
y
pi
c
al
l
yf
or
me
l
e
me
nt
s
)t
ha
thav
ebe
e
nf
oc
us
e
donv
i
aac
l
i
c
kork
ey
boar
dev
e
nt

ybor
i
ngps
e
udoc
l
as
s
e
s
)
FORM&VALI
DATI
ONPSEUDOCLASSES(Moremostl
:default
:disabled

Se
l
e
c
t
sf
or
me
l
e
me
nt
st
ha
tar
ei
nt
he
i
rde
f
aul
ts
t
a
t
e
Se
l
e
c
t
sf
or
me
l
e
me
nt
st
ha
tar
ei
nadi
s
abl
e
ds
t
a
t
e

:enabled

Se
l
e
c
t
sf
or
me
l
e
me
nt
st
ha
tar
enoti
nadi
s
abl
e
ds
t
a
t
e

:in-range

Appl
i
e
st
oe
l
e
me
nt
st
ha
thav
er
ang
el
i
mi
t
a
t
i
ons
;
e
.
g.
<i
nputt
y
pe=
number
mi
n=
0max
=
5
>

Av
al
ueof
4woul
dma
t
c
h:
i
nr
ang
e
Av
al
ueof
6woul
dma
t
c
h:
out
of
r
ang
e

:out-of-range

F
or
m&V
al
i
da
t
i
onps
e
udoc
l
as
s
e
sc
ont
i
nue
d.
.
.

St
e
phe
nGr
e
i
g/

FORM&VALI
DATI
ONPSEUDOCLASSESCONTI
NUED
:valid
:invalid

Se
l
e
c
t
sf
or
me
l
e
me
nt
swhos
ec
ont
e
nt
sar
e
v
al
i
dori
nv
al
i
dac
c
or
di
ngt
ot
he
i
rt
y
pe
;
e
.
g.
<i
nputt
y
pe=
emai
l

>

s
t
ev
e
.
gr
e
i
g@adt
r
ak.
c
o.
uk
s
t
ev
e
:
gr
e
i
g@adt
r
ak

:required

Se
l
e
c
t
sf
or
me
l
e
me
nt
st
ha
thav
et
he
r
e
qui
r
e
dHTMLa
t
t
r
i
but
e

:optional

Se
l
e
c
t
sf
or
me
l
e
me
nt
st
ha
tdon
thav
et
he
r
e
qui
r
e
dHTMLa
t
t
r
i
but
e

:read-write
:read-only
:indeterminate

:checked

Se
l
e
c
t
se
l
e
me
nt
st
ha
tar
eus
e
r
e
di
t
abl
e
,
s
uc
hasf
or
mi
npute
l
e
me
nt
sor
e
l
e
me
nt
st
ha
thav
et
he
c
ont
e
nt
e
di
t
abl
e
HTMLa
t
t
r
i
but
e
Se
l
e
c
t
se
l
e
me
nt
st
ha
tar
enotus
e
r
e
di
t
abl
e(
any
t
hi
ngt
ha
tdoe
s
n
tma
t
c
h:
r
e
adwr
i
t
e
)
Se
l
e
c
t
sf
or
me
l
e
me
nt
st
ha
tar
ei
nani
nde
t
e
r
mi
na
t
es
t
a
t
e
;
e
.
g.
r
adi
obut
t
onsc
an
us
ual
l
ybec
he
c
k
e
dorunc
he
c
k
e
d,
butc
ans
ome
t
i
me
sbene
i
t
he
r
T
ar
g
e
t
sr
adi
obut
t
ons
,
c
he
c
k
box
e
sands
e
l
e
c
tme
nu<
opt
i
on>e
l
e
me
nt
swhe
n
t
heyhav
ebe
e
ns
e
l
e
c
t
e
dbyt
heus
e
r
.
Thi
sc
anbepar
t
i
c
ul
ar
l
ypowe
r
f
ul
y
,
e
nabl
i
ngwha
thasc
omet
obek
nownas
TheChec
kboxHac
k(
s
e
epag
e6
)
.

unps
e
udoc
l
as
s
e
s
.
.
.
butt
heyg
e
tf
unne
r
)
STRUCTURALPSEUDOCLASSES(Themoref

Se
l
e
c
t
st
hef
i
r
s
tc
hi
l
d,
r
e
g
ar
dl
e
s
sof
t
y
pe

h1

ul

Se
l
e
c
t
st
hef
i
r
s
tof
as
pe
c
i
f
i
ct
y
peof
e
l
e
me
nt

h1

ul

Se
l
e
c
t
st
hel
as
tc
hi
l
d,
r
e
g
ar
dl
e
s
sof
t
y
pe

h1

ul

Se
l
e
c
t
st
hel
as
tof
as
pe
c
i
f
i
ct
y
peof
e
l
e
me
nt

h1

ul

:only-child

Se
l
e
c
t
sane
l
e
me
nti
f
i
ti
st
hes
ol
ec
hi
l
dandhas
noot
he
rs
i
bl
i
ngs

ul

ul

p:only-of-type

Se
l
e
c
t
sas
pe
c
i
f
i
ct
y
peof
e
l
e
me
nti
f
i
ti
st
hes
ol
e
c
hi
l
dandhasnoot
he
rs
i
bl
i
ngs

ul

ul

Se
l
e
c
t
st
he2
ndc
hi
l
d,
r
e
g
ar
dl
e
s
sof
t
y
pe

h1

ul

p:nth-of-type(2)

Se
l
e
c
t
st
he2
ndof
as
pe
c
i
f
i
ct
y
peof
e
l
e
me
nt

h1

ul

:nth-last-child(2)

Se
l
e
c
t
st
he2
ndc
hi
l
d,
r
e
g
ar
dl
e
s
sof
t
y
pe
,
but
c
ount
i
ngf
r
omt
hee
nd

h1

ul

e
l
e
c
t
st
he2
ndof
as
pe
c
i
f
i
ct
y
peof
e
l
e
me
nt
,
p:nth-last-of-type(2) S

h1

ul

:first-child
p:first-of-type
:last-child
p:last-of-type

:nth-child(2)

butc
ount
i
ngf
r
omt
hee
nd

St
e
phe
nGr
e
i
g/

MI
SCELLANEOUSPSEUDOCLASSES
:root
:lang(en)

:empty

Se
l
e
c
t
st
hehi
ghe
s
tpar
e
nte
l
e
me
nti
nadoc
ume
nt
,
t
y
pi
c
al
l
yt
heht
ml
e
l
e
me
nt
Se
l
e
c
t
sane
l
e
me
ntwi
t
ht
he
l
angHTMLa
t
t
r
i
but
eappl
i
e
d

Se
l
e
c
t
sane
l
e
me
ntt
ha
ti
sc
ompl
e
t
el
ye
mpt
y

p:not(:first-child)

:target

TheNegat
i
onPs
eudoc
l
as
s-T
ar
g
e
t
se
l
e
me
nt
s
e
x
c
e
ptf
oras
pe
c
i
f
i
e
dv
ar
i
antof
t
ha
te
l
e
me
nt

Se
l
e
c
t
sane
l
e
me
nt
whos
ei
dv
al
uei
s
c
ur
r
e
nt
l
ybe
i
ngt
ar
g
e
t
e
d
v
i
aa#i
nt
heURL

<div></div> /* Empty */

<div> </div> /* Not empty */

<div id=Lorem>A</div>
div { color: black; }

div:target { color: red; }

url.com

url.com#Lorem

uns
t
u)
NTHCHI
LDEXPRESSI
ONS(Thef
:nth-child(2n+1)

T
ar
getani
nf
i
ni
t
es
equenc
e

Be
s
twayt
ome
mor
i
s
et
hi
si
s
:
Thef
i
r
s
tnumbe
ri
st
hes
e
que
nc
e(
ev
e
r
y2e
l
e
me
nt
s
)
Thes
e
c
ondnumbe
ri
swhe
r
et
hes
e
que
nc
es
t
ar
t
s(
t
he1
s
te
l
e
me
nt
)

10

:nth-child(-n+3)

Us
i
ngne
g
a
t
i
v
enumbe
r
st
os
e
l
e
c
tt
hef
i
r
s
t
xamountof
i
t
e
ms

:nth-last-child(-n+3)

Us
i
ngne
g
a
t
i
v
enumbe
r
st
os
e
l
e
c
tt
hel
as
t
xamountof
i
t
e
ms

10

11

12

13

14

15

16

17

18

19

20

:nth-child(n+2):nth-child(-n+4)

10

St
e
phe
nGr
e
i
g/

Combi
ni
ngnt
hc
hi
l
d
e
x
pr
e
s
s
i
onst
os
el
ec
tan
i
s
ol
at
edr
angeofi
t
ems

Us
i
ngmul
t
i
pl
es
e
l
e
c
t
or
sf
ormor
e
abs
t
r
ac
ts
e
que
nc
e
s

:nth-child(4n+2),
:nth-child(4n+3)

:nth-child(8n+2),
:nth-child(8n+4),
:nth-child(8n+5),
:nth-child(8n+7)

(
Theme
nt
al
s
t
u)
CSSI
FSTATEMENTS?
!
li:nth-child(7):last-child {
width: 100%;
}

T
ar
gett
hel
as
ti
t
em i
ft
ot
al
i
t
ems=x
Thi
se
x
ampl
et
ar
g
e
t
st
hel
as
tc
hi
l
donl
yi
f
t
he
r
e
ar
e7i
t
e
msi
nt
ot
al

7
li:nth-child(4):nth-last-child(4),
li:nth-child(4):nth-last-child(4) ~ li {
width: 25%;
}

li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
background: orange;
}

li:first-child:nth-last-child(n+3),
li:first-child:nth-last-child(n+3) ~ li {
background: orange;
}

li:first-child:nth-last-child(-n+3),
li:first-child:nth-last-child(-n+3) ~ li {
background: orange;
}

li:first-child:nth-last-child(n+2):nth-last-child(-n+4),
li:first-child:nth-last-child(n+2):nth-last-child(-n+4) ~ li {
background: orange;
}

1
1

The
s
es
e
l
e
c
t
or
swi
l
l
wor
ki
nI
E9
+
.
Kudost
oHey
donPi
c
k
e
r
i
ngandL
e
aVe
r
ouf
ormak
i
ngmeawar
eof
t
he
s
et
e
c
hni
que
s
.

St
e
phe
nGr
e
i
g/

BONUSCONTENT
TheChec
kboxHac
k-I
ni
t
ss
i
mpl
e
c
tf
or
m,
i
tc
ane
nabl
ee
as
yc
us
t
omf
or
mc
ont
r
ol
s
<input type=checkbox id=abc>
<label for=abc>Option 1</label>
input {
opacity: 0;
position: absolute;
}

Opt
i
on1
Opt
i
on2
Opt
i
on3
Opt
i
on4

input + label {
background: black;
}

Whe
nt
hei
nputandl
abe
l
hav
ec
or
r
e
s
pons
i
ng
i
d
and
f
or
a
t
t
r
i
but
e
s
,
t
hel
abe
l
be
c
ome
sc
l
i
c
k
abl
e
onbe
hal
f
of
t
hec
he
c
k
boxi
nput
.
Wec
ant
he
nhi
det
heac
t
ual
c
he
c
k
boxi
nputand
s
t
y
l
et
hel
abe
l
howev
e
rwewant
.
Wec
anus
et
he:
c
he
c
k
e
dps
e
udoc
l
as
sandt
he
adj
ac
e
nts
i
bl
i
ngc
ombi
na
t
or(
+
)t
os
t
y
l
et
he
c
ur
r
e
nt
l
ys
e
l
e
c
t
e
dopt
i
onhowev
e
rwewant
.

input:checked + label {
background: orange;
}

TheLobot
omi
s
edOwl
Sel
ec
t
or
-Madef
amousbyHey
donPi
c
k
e
r
i
ng
*+*{
margin-top: 1.5em;
}

margin-top: 1.5em;

.sidebar > * + * {
margin-top: 1.5em;
}

margin-top: 1.5em;

Us
i
ngPs
eudoel
ement
st
oOut
putAt
t
r
i
but
eVal
ues
p:after {
content: attr(datetime);
}

Ps
e
udoe
l
e
me
nt
sar
eal
l
t
her
ag
e
,
butl
e
s
smai
ns
t
r
e
ami
st
he
i
rabi
l
i
t
yt
o
out
putt
hev
al
ueof
aHTMLa
t
t
r
i
but
eont
hes
e
l
e
c
t
e
de
l
e
me
nt
.

a:after {
content: " ("attr(href)")";
}

Thi
se
x
ampl
ewoul
dout
putan<
a>e
l
e
me
nt

shr
e
f
v
al
uei
nbr
ac
k
e
t
sa e
r
t
hel
i
nk;
whi
c
hc
oul
dbepar
t
i
c
ul
ar
l
yus
e
f
ul
f
orpr
i
nts
t
y
l
e
s
he
e
t
s
.

St
e
phe
nGr
e
i
g/