CSS Pseudo Classes

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

Transcript

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}