TRA CU CSS SELECTOR

HTML

NGHA

CSS

<tag>

Khp vi tn phn t

h1 {}

<tag id=introduction>

Chn phn t c gi tr
thuc tnh id khp vi tn
ch nh

#introduction {}

Chn phn t c gi tr
thuc tnh class khp vi
tn ch nh

.note {}

Chn thnh phn c tn

thuc tnh hoc gi tr
thuc tnh khp vi tn ch
nh

tag[title], tag[title=here]

Chn tt c cc phn t
bn trong tn ch nh

body *

Chn tt c phn t c tn
ch nh l con bn trong
mt phn t khc

p a{}

Chn mt phn t l con

trc tip (1 cp) ca thnh
phn c ch nh

li>a {}

<tag class=note>

<tag title=here>

Universal symbol *

Descendant symbol space

Children symbol >

Chn phn t
id=introduction

Chn tt c phn t c
class=note

Chn tt c cc phn t c
thuc tnh l title hoc
title=here

Chn tt c cc phn t bn
trong body

Chn tt c phn t <a> nm

bn trong phn t <p>, chn
c cc phn t cp bn trong

Chn bt c phn t <a> no

m l con ca phn t <li>
(nhng khng chn ht cc
phn t <a> trn trang)

Adjacent Sibling symbol + Chn mt phn t nm st

bn mt phn t khc,
cng cp

h1+p {}

General Sibling symbol ~

h1~p {}

Chn mt phn t m l k
bn phn t khc, khng
nht thit phi l phn t
trc tip

Chn phn t <p> u tin bt

k nm sau phn t <h1> (v
khng chn cc phn t ca
<p> khc)

Nu bn c 2 phn t <p> nm
k tip cng cp phn t <h1,
th quy tc ny s chn c hai
pseudo-classes symbol :

Chn theo trng thi hoc

v tr ca mt phn t

a:hover {}
Quy tc ny s p dng vo
phn t a khi c trng thi di
chut trn chng
li:first-child {}
Quy tc ny s chn phn t
<li> u tin trong danh sch

pseudo-element symbol :

Chn mt phn vn bn
ca phn t

p:first-letter {}
Quy tc ny s chn k t u
tin ca vn bn bn trong
mt phn t <p>
h1:before, h1:after {}
Quy tc ny s thm mt phn
t trc before hoc sau after
ni dung vn bn bn trong
phn t <h1>