Pseudo-classesElizabeth Gardiner {@libwella}

http://www.w3schools.com/css/css_pseudo_classes.asp

“A pseudo-class is used to define a special state of an

element.”

http://www.thefreedictionary.com/Psuedo

pseu•do (ˈsu doʊ)

adj., n., pl. -dos. adj. 1. false or spurious; sham; pretended.

n. 2. a false or pretentious person.

Dynamic Pseudo-classes

:hover

:link :visited :hover :active

https://flic.kr/p/3ruY7o

:link o :visited e

:hover :active t e

:link :visited :hover :active

:link :visited :hover :active :focus

:link :visited :hover :active :focus

:link :visited :hover :active :focus

:link :visited :hover :active :focus

} :any-link(proposed CSS4)

:link :visited :hover :active :focus :local-link

} :any-link (proposed CSS4)

(proposed CSS4)

Structural Pseudo-classes

THE DOM!

https://flic.kr/p/9GVpoG

<ul><li>

<li>

<li> <li><li>

<li>

https://flic.kr/p/9GVpoG

HTML

BODY

ULli li li li li li

:nth-child

:nth-child(n)

:nth-child(3)

<ul><li>

<li>

<li> <li><li>

<li>

https://flic.kr/p/9GVpoG

:first-child :last-child :first-of-type :nth-last-child :nth-of-type :nth-last-of-type :only-child :only-of-type :empty :blank (CSS4 proposed)

:matches(CSS4 proposed)

https://css-tricks.com/almanac/selectors/m/matches/

:target

BROWSER SUPPORT

DEMOS

http://lea.verou.me/demos/nth.html

https://css-tricks.com/examples/nth-child-tester/#

THE negation pseudo-class

:not

Pseudo Elements

http://www.growingwiththeweb.com/2012/08/pseudo-classes-vs-pseudo-elements.html

“A pseudo-element […] allows us to create items that do not normally exist in the document

tree”

::first-line ::first-letter ::before ::after

::first-line ::first-letter ::before ::after

https://css-tricks.com/pseudo-element-roundup/

http://www.smashingmagazine.com/

2011/07/13/learning-to-use-the-before-and-after-pseudo-

elements-in-css/

Thanks!Elizabeth Gardiner {@libwella}