TheUl

ti
mat
e

CSSSELECTORS Che
ats
hee
t

BASI
CSELECTORS&COMBI
NATORS

* TheUni
ver
sal
Sel
ect
or-s
ele
ctal
lel
eme
nts h1 p p ul p

h1 + p TheAdj
acentSibl
ingCombinator-s
ele
ctal
l<p> h1 p p ul p
el
ement
sthatimmediatel
yfol
lowa<h1>

h1 ~ p TheGener
alSi
bli
ngCombinat
or-sel
ectal
l<p> h1 p p ul p
el
ementst
hatf
oll
ow(andar
esi
bli
ngsof)a<h1>

<ul class=”list”>
<li>One 
.list > li TheChil
dCombinator-s
ele
ctal
l<l
i>e
leme
nts <li>Two 
tha
taredi
rec
tchi
ldr
e nof
.l
is
t <ul>
<li>Sub Item 

ATTRI
BUTESELECTORS-Tar
gett
hroughHTMLAt
tri
but
es

button[disabled] T
arg
etbut
tone
leme
ntsi
ftheyhav
ethedi
sabl
edat
tri
but
eappl
ied

input[type=”submit”] T
arg
eti
npute
leme
ntsi
ftheyhav
eat
ypea
ttr
ibut
ewi
thanexac
tval
ueof
submi
t

a[href^=”http://”] T
arg
et<
a>e
leme
ntst
hathav
eahr
efv
aluet
hats
tar
tswi
thht
tp:
//

a[href$=”.de”] T
arg
et<
a>e
leme
ntst
hathav
eahr
efv
aluet
hatendswi
th.
de

a[href*=”twitter”] T
arg
et<
a>e
leme
ntst
hathav
eahr
efv
aluet
hatc
ont
ainst
hewor
d“t
wit
ter
”

PSEUDO-
ELEMENTS-Theset
arg
ete
leme
ntst
hatdonote
xis
tint
heHTML(
asoppos
edt
ops
eudo-
clas
ses
)

The:befor
eand:a erpseudo-
ele
me nt
sal
lowyout
oinser
t
div:before {
conte
ntbefor
eora eranyHTMLe l
ementt
hati
sn’
tsel
fcl
osi
ng :before div
content: “”;
(l
ike<i
mg>and<input>
).
}
Thec
ont
entpr
ope
rtyi
sre
qui
redbutc
anbel
e bl
ank.
div:after {
div :after
content: “”; Thesepseudo-
element
scanbet
reat
edands
tyl
edl
ikeany
} otherel
ement.

Ps
eudo-
ele
ment
scont
inue
d..
.

St
ephe
nGr
eig/ 1
PSEUDO-
ELEMENTSCONTI
NUED

p:first-line T
arg
ett
hef
ir
stl
ineof
tex
t p:first-letter T
arg
ett
hef
ir
stl
ett
er

Thefol
lowi
ngpseudo-el
ement
sarenoti
nthespe
c i
fi
cati
onandc
urr
ent
lyhav
evar
yingi
mpl
eme
nta
tionsi
nthedi
ffer
entbr
ows
ers
.
Theyal
s or
equi
rethedoubl
ecol
onpseudo-
ele
me ntsynt
ax.

Loremips
umdolorsi
tame t,
consect
eturadipi
sci
ngeli
t.
p::-moz-selection St
ylesec
tionst
hathavebe
en
Ali
quaminphar
etr
ali
gula,egetmaxi
musl eo.Aenean
p::selection hi
ghli
ghtedbytheuse
r pret
iummi e
tmauri
smol l
ismales
uada.

input::-webkit-input-placeholder St
yleani
nputel
eme
nt’
s
input::-ms-input-placeholder pl
acehol
ert
ext Pl
ace
hol
derT
ext
input::-moz-placeholder Thesedon’
tworkwhe
ncomma
input::placeholder separ
atedatt
hemoment
.

STATEBASEDPSEUDO-
CLASSES(Thebori
ngps
eudo-
clas
ses
)

:link Se
lec
tsal
lunv
isi
tedl
ink
s

:hover Se
lec
tse
leme
ntsonmous
ehov
er

:visited Se
lec
tsal
lvi
si
tedl
ink
s

:active Se
lec
tsane
leme
ntwhi
ls
titi
sbe
ingac
tiv
ate
dbyt
heus
er,
fore
xampl
e,whe
ntheus
eri
smi
d-c
li
ck

:focus Se
lec
tse
leme
nts(
typi
cal
lyf
orme
leme
nts
)tha
thav
ebe
enf
ocus
edonv
iaac
li
ckork
eyboar
dev
ent

FORM&VALI
DATI
ONPSEUDO-
CLASSES(Moremostl
ybor
ingps
eudo-
clas
ses
)

:default Se
lec
tsf
orme
leme
ntst
hatar
eint
hei
rde
faul
tst
ate

:disabled Se
lec
tsf
orme
leme
ntst
hatar
einadi
sabl
eds
tat
e

:enabled Se
lec
tsf
orme
leme
ntst
hatar
enoti
nadi
sabl
eds
tat
e

Appl
ie
stoel
eme nt
sthathaverang
eli
mita
tions
;e.
g.
:in-range
<i
nputty
pe=”number”mi n=”
0”max=”5”> 4
Av
alueof
4woul
dma
tch:
i
n-r
ange
:out-of-range
Av
alueof
6woul
dma
tch:
out
-of
-r
ang
e
6

F
orm&V
ali
dat
ionps
eudo-
clas
sesc
ont
inue
d..
.

St
ephe
nGr
eig/ 2
FORM&VALI
DATI
ONPSEUDO-
CLASSESCONTI
NUED

:valid Select
sforme l
eme ntswhosec
ontent
sar
e s
tev
e.gr
eig@adt
rak.
co.
uk
vali
dorinvali
daccordingt
othei
rty
pe;e.
g.
:invalid <inputtype=”email”
> s
tev
e:gr
eig@adt
rak

:required Se
lec
tsf
orme
leme
ntst
hathav
ethe“
requi
red”HTMLa
ttr
ibut
e

:optional Se
lec
tsf
orme
leme
ntst
hatdon’
thav
ethe“
requi
red”HTMLa
ttr
ibut
e

Sel
ect
sele
me nt
stha
tar
euse
r-e
ditable
,suchasf
orminpute
leme
ntsor
:read-write
el
ementst
hathavet
he“
cont
entedit
able”HTMLat
tri
but
e

:read-only Se
lec
tse
leme
ntst
hatar
enotus
er-
edi
tabl
e(any
thi
ngt
hatdoe
sn’
tma
tch:
read-
wri
te)

:indeterminate
Se
lec
tsf
ormelement
sthatar
einanindete
rmina
tes
tat
e;e
.g.r
adi
obut
tonsc
an
us
ual
lybeche
ckedorunc
he c
ked,butcansomet
ime
sbeneit
her

T
arge
tsradi
obutt
ons,che
ckbox
esandsele
ctmenu<option>elementswhen
:checked t
heyhavebeense
lect
edbytheuse
r.Thi
scanbepart
icul
arlypowerf
uly,
e
nabli
ngwhathascometobeknownas“TheCheckboxHac k”(se
epag e6
).

STRUCTURALPSEUDO-
CLASSES(Themoref
unps
eudo-
clas
ses
..
.butt
heyg
etf
unne
r)

:first-child Se
lec
tst
hef
ir
stc
hil
d,r
egar
dle
ssof
type h1 p p ul p

p:first-of-type Se
lec
tst
hef
ir
stof
aspe
cif
ict
ypeof
ele
ment h1 p p ul p

:last-child Se
lec
tst
hel
astc
hil
d,r
egar
dle
ssof
type h1 p p ul p

p:last-of-type Se
lec
tst
hel
astof
aspe
cif
ict
ypeof
ele
ment h1 p p ul p

:only-child Sel
ectsanele
menti
fi
tist
hes
olec
hil
dandhas ul p ul p
noothersi
bli
ngs

p:only-of-type Sel
ectsas
pecif
ict
ypeof
elementi
fi
tist
hes
ole ul p ul p
chi
ldandhasnoothe
rsi
bli
ngs

:nth-child(2) Se
lec
tst
he2
ndc
hil
d,r
egar
dle
ssof
type h1 p p ul p

p:nth-of-type(2) Se
lec
tst
he2
ndof
aspe
cif
ict
ypeof
ele
ment h1 p p ul p

:nth-last-child(2) Sele
ctsthe2ndchi
ld,
reg
ardl
essof
type
,but h1 p p ul p
counti
ngfromtheend

p:nth-last-of-type(2) Sel
ect
sthe2
ndof
aspe
cif
ict
ypeof
ele
ment
, h1 p p ul p
butc
ount
ingf
romt
hee
nd

St
ephe
nGr
eig/ 3
 
 
Ҋ 

:root  ' /.
/#
#$"# ./
+- )/
' ( )/
$)

*0( )/Ѷ
/4+$''4
/#
#/('
' ( )/

:lang(en)  ' /.
)
' ( )/
2$/#
/#
҂')"҃

//-$0/
++'$ 

<div></div> /* Empty */
:empty  ' /.
)
' ( )/
/#/
$.
*(+' / '4
(+/4
<div> </div> /* Not empty */

p:not(:first-child)
#
 "/$*)
. 0*Ҋ'..
Ҋ
-" /.
' ( )/.
p p p p p
3 +/
!*-

.+ $!$ 
1-$)/
*!
/#/
' ( )/

<div id=”Lorem”>A</div>
 ' /.
)
' ( )/

2#*.
$
1'0
$.

url.com 
:target
0-- )/'4
 $)"
/-" / 
div { color: black; }
1$

ҿ
$)
/#
 div:target { color: red; }
url.com#Lorem 

 Ҋ



җ#
!0)
./0ȂҘ

:nth-child(2n+1) -" /
)
$)!$)$/
. ,0 )

1 2 3 4 5
 ./
24
/*
( (*-$.
/#$.
$.ѷ
#
!$-./
)0( -
$.
/#
. ,0 )
җ 1 -4
с
' ( )/.Ҙ 6 7 8 9 10
#
. *)
)0( -
$.
2# -
/#
. ,0 )
./-/.
җ/#
р./
' ( )/Ҙ

.$)"
) "/$1
)0( -.
/*
. ' /
/#
!$-./

:nth-child(-n+3)
3
(*0)/
*!
$/ (.
1 2 3 4 5

.$)"
) "/$1
)0( -.
/*
. ' /
/#
'./

:nth-last-child(-n+3)
3
(*0)/
*!
$/ (.
1 2 3 4 5

*($)$)"
)/#Ҋ#$'

:nth-child(n+2):nth-child(-n+4) 3+- ..$*).
/*
. ' /
)
1 2 3 4 5
$.*'/ 
-)"
*!
$/ (.

1 2 1 2 3 4
.$)"
(0'/$+'
. ' /*-.
!*-
(*-

3 4 ./-/
. ,0 ) . 5 6 7 8

5 6 9 10 11 12
:nth-child(8n+2),
7 8 :nth-child(8n+4), 13 14 15 16
:nth-child(4n+2), :nth-child(8n+5),
9 10 :nth-child(4n+3) :nth-child(8n+7) 17 18 19 20

/ +# )
- $"
ҝ у
CSSI
FSTATEMENTS?
!(Theme
ntal
stuff)

li:nth-child(7):last-child { Targetthel
asti
tem i
ftot
al i
tems=x 1 2 3
width: 100%; Thisexampl
etar
getst
helastchi
ldonl
yif
the
re
} are7itemsi
ntot
al 4 5 6

li:nth-child(4):nth-last-child(4),
li:nth-child(4):nth-last-child(4) ~ li {
1 2 3
width: 25%;
} 4 5 6 7

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

1 2 3 4

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

1 2 3 4

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

1 2 3 4

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

1 2 3

1 2 3 4

1 2 3 4 5

The
ses
ele
ctor
swi
ll
wor
kinI
E9+
.Kudost
oHey
donPi
cke
ringandL
eaVe
rouf
ormak
ingmeawar
eof
the
set
echni
que
s.

St
ephe
nGr
eig/ 5
BONUSCONTENT

TheChec
kboxHac
k-I
nit
ssi
mpl
estf
orm,
itc
ane
nabl
eeas
ycus
tomf
ormc
ont
rol
s

<input type=”checkbox” id=”abc”>

Whentheinputandlabe lhavec
or r
esponsi
ng“i
d”
Opt
ion1
<label for=”abc”>Option 1</label>
and“f
or”att
ribut
es,
t helabelbecome scl
ic
kabl
e
Opt
ion2 onbehal
fofthecheck boxinput
.

input { Wec anthenhidet

heactual
che
ckboxi
nputand
Opt
ion3 
opacity: 0; st
ylethelabe
lhoweverwewant.
position: absolute;
Opt
ion4
} Wecanus ethe:che
cke
dpseudo-cl
assandt
he
adj
acentsibl
ingcombi
nat
or(+)t
ostyl
ethe
input + label { cur
rentl
yse l
ect
edopti
onhoweverwewant.
background: black;
}

input:checked + label {
background: orange;
}

The“Lobot
omi
sedOwl
Sel
ect
or”-Madef
amousbyHey
donPi
cke
ring

*+*{
margin-top: 1.5em;
}
margin-top: 1.5em;

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

Us
ingPs
eudo-
element
stoOut
putAt
tri
but
eVal
ues

p:after {
Pse
udo-
ele
mentsar
eall
ther
age,butl
essmai
nstr
eamist
hei
rabi
li
tyt
o
content: attr(datetime);
out
putt
heval
ueofaHTMLat
tri
buteonthes
ele
ctedel
ement
.
}

a:after {
content: " ("attr(href)")";
Thisexampl
ewouldout
putan<a>ele
me nt
’shr
efval
ueinbracke
tsa e
r
}
theli
nk;whi
chcoul
dbepart
icul
arl
yusef
ulf
orpri
ntstyl
eshe
e t
s.

St
ephe
nGr
eig/ 6