CSS Selectors

Richard Carter from Peacock Carter takes the Frontend NE crowd though CSS selectors. From covering the basics to introducing some more obscure attribute selectors, there's plenty to brush up on!

Transcript

1. Introduction to CSS selectors @RichardCarter
2. Introduction to CSS selectors @RichardCarter
3. @RichardCarter CSS selectors: #FUCK>YEAH
4. @RichardCarter Element selectors
5. div { border: green; }
6. p { color: red }
7. @RichardCarter Descendant selectors
8. ul li { border-bottom: 1px #ccc solid; }
9. header ul li { border-bottom: 1px #ccc solid; }
10. header .lego { border-bottom: 1px #ccc solid; }
11. @RichardCarter Classes and IDs
12. <img id=“lego” src=“lego.jpg” alt=“LEGO ftw” />
13. #lego { display: block; }
14. @RichardCarter Better to use classes: IDs have high specificity
15. train.jpg simpsons.jpg
16. <img class=“lego train” src=“train.jpg” alt=“LEGO Trains ftw” /> <img class=“lego simpsons” src=“simpsons.jpg” alt=“LEGO Simpsons ftw” />
17. .lego { border: 1px red solid; } .simpsons { border-color: #09C; }
18. train.jpg simpsons.jpg
19. @RichardCarter Live coding time! (This is @libwella’s fault)
20. @RichardCarter Chained selectors
21. .lego.simpsons { border-color: blue; }
22. @RichardCarter Adjacency selector
23. h1 + p { color: blue; }
24. @RichardCarter General sibling selectors
25. p ~ p { color: blue; }
26. <p>LEGO</p> <p>LEGO</p> <div>LEGO</div> <p>LEGO</p>
27. @RichardCarter Child selector
28. // target only first-level li ul>li { font-weight: bold; }
29. @RichardCarter Attribute selectors
30. input[style] { }
31. // exact match input[type=“password”] { }
32. // one exact match input[class~=“lego”] { }
33. // exact match, separated by - p[lang|=“en”] { }
34. // all class values starting ‘lego’ input[class^=“lego”] { }
35. // all class values starting ‘lego’ input[class$=“lego”] { }
36. // all class values ending ‘lego’ input[class*=“lego”] { }
37. @RichardCarter “There is always someone better than you” ~@sebly
38. Questions? Feel free to email hello@peacockcarter.co.uk with any questions.
39. Had fun? Learned something? @RichardCarter facebook.com/peacockcarter