CSS Pseudo Classes

Elizabeth Gardiner take Frontend NE through CSS pseudo selectors and pseudo classes

1. Pseudo-classes
Elizabeth Gardiner {@libwella}

2. http://www.w3schools.com/css/css_pseudo_classes.asp
“A pseudo-class is used to
define a special state of an
element.”

3. 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.

5. Dynamic
Pseudo-classes

6. :hover

7. :link
:visited
:hover
:active

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

9. :link
o
:visited
e
:hover
:active
t
e

10. :link
:visited
:hover
:active

11. :link
:visited
:hover
:active
:focus

12. :link
:visited
:hover
:active
:focus

14. :link
:visited
:hover
:active
:focus

15. :link
:visited
:hover
:active
:focus
}
:any-link
(proposed CSS4)

16. :link
:visited
:hover
:active
:focus
:local-link
}
:any-link
(proposed CSS4)
(proposed CSS4)

17. Structural
Pseudo-classes

18. THE DOM!

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

20. <ul>
<li>
<li>
<li>
<li>
<li>
<li>
https://flic.kr/p/9GVpoG

21. HTML
BODY
UL
li li li li li li

22. :nth-child

23. :nth-child(n)

24. :nth-child(3)
<ul>
<li>
<li>
<li>
<li>
<li>
<li>
https://flic.kr/p/9GVpoG

25. :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)

26. :matches(CSS4 proposed)
https://css-tricks.com/almanac/selectors/m/matches/

27. :target

28. BROWSER SUPPORT

29. DEMOS
http://lea.verou.me/demos/
nth.html
https://css-tricks.com/examples/
nth-child-tester/#

30. THE negation
pseudo-class
:not

31. Pseudo Elements

32. 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”

33. ::first-line
::first-letter
::before
::after

34. ::first-line
::first-letter
::before
::after

35. 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/

36. Thanks!
Elizabeth Gardiner {@libwella}