css pseudo classes
TRANSCRIPT
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
HTML
BODY
ULli li li li li li
:nth-child
:nth-child(n)
: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}