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!

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=“LEGOTrains 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