WRT235: Writing in Electronic Environments CSS Classes, IDs, divs.
CSS Pseudo Classes
-
Upload
frontendne -
Category
Technology
-
view
194 -
download
3
Transcript of CSS Pseudo Classes
![Page 1: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/1.jpg)
Pseudo-classesElizabeth Gardiner {@libwella}
![Page 2: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/2.jpg)
http://www.w3schools.com/css/css_pseudo_classes.asp
“A pseudo-class is used to define a special state of an
element.”
![Page 3: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/3.jpg)
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.
![Page 4: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/4.jpg)
![Page 5: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/5.jpg)
Dynamic Pseudo-classes
![Page 6: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/6.jpg)
:hover
![Page 7: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/7.jpg)
:link :visited :hover :active
![Page 9: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/9.jpg)
:link o :visited e
:hover :active t e
![Page 10: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/10.jpg)
:link :visited :hover :active
![Page 11: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/11.jpg)
:link :visited :hover :active :focus
![Page 12: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/12.jpg)
:link :visited :hover :active :focus
![Page 13: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/13.jpg)
![Page 14: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/14.jpg)
:link :visited :hover :active :focus
![Page 15: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/15.jpg)
:link :visited :hover :active :focus
} :any-link(proposed CSS4)
![Page 16: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/16.jpg)
:link :visited :hover :active :focus :local-link
} :any-link (proposed CSS4)
(proposed CSS4)
![Page 17: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/17.jpg)
Structural Pseudo-classes
![Page 18: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/18.jpg)
THE DOM!
![Page 21: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/21.jpg)
HTML
BODY
ULli li li li li li
![Page 22: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/22.jpg)
:nth-child
![Page 23: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/23.jpg)
:nth-child(n)
![Page 25: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/25.jpg)
: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)
![Page 26: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/26.jpg)
:matches(CSS4 proposed)
https://css-tricks.com/almanac/selectors/m/matches/
![Page 27: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/27.jpg)
:target
![Page 28: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/28.jpg)
BROWSER SUPPORT
![Page 29: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/29.jpg)
DEMOS
http://lea.verou.me/demos/nth.html
https://css-tricks.com/examples/nth-child-tester/#
![Page 30: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/30.jpg)
THE negation pseudo-class
:not
![Page 31: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/31.jpg)
Pseudo Elements
![Page 32: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/32.jpg)
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”
![Page 33: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/33.jpg)
::first-line ::first-letter ::before ::after
![Page 34: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/34.jpg)
::first-line ::first-letter ::before ::after
![Page 35: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/35.jpg)
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/
![Page 36: CSS Pseudo Classes](https://reader034.fdocuments.net/reader034/viewer/2022042518/55c4ab86bb61ebf35a8b45e3/html5/thumbnails/36.jpg)
Thanks!Elizabeth Gardiner {@libwella}