The Declarative Power of CSS Selectors

CSS is at times something of the red headed step-shild of Web technologies, seen as fine for adding a bit of style to Web sites, but not "real programming". Well think again. Beneath its stylish surface beats a powerhours of sophistication, Selectors, which you can use not only with CSS, but to manipulate the DOM as well using querySelector.

This talk was presented at Web Directions Code 14.

Transcript

1. THE DECLARATIVE POWER OF CSS SELECTORS @mobywhale
2. THE DECLARATIVE POWER OF CSS SELECTORS @mobywhale
3. Question
4. What can CSS do?
5. What can CSS do? A. Style a webpage
6. What can CSS do? A. Style a webpage B. Reduce your HTML
7. What can CSS do? A. Style a webpage B. Reduce your HTML C. Reduce your JavaScript
8. What can CSS do? A. Style a webpage B. Reduce your HTML C. Reduce your JavaScript D. Testing
9. What can CSS do? A. Style a webpage B. Reduce your HTML C. Reduce your JavaScript D. Testing E. All of the above
10. E. All of the above
11. Yeah sure... A lot of people still think CSS is just used as something to make things look pretty
12. CSS is powerful CSS is really powerful and there is so much you can do with it.
13. beyond .classes and #id CSS • These days it is so much more than just a bunch of classes and ids. • Lot more you can do with CSS Level 3 and the upcoming Level 4 selectors. • Show you some real world examples of where CSS selectors can in fact do all the things I mentioned before
14. CSS level 3
15. Attribute selector
16. <input type="search" class="search-bar" placeholder="Enter keywords"> HTML - add a class - > apply styles to that class
17. <input type="search" class="search-bar" placeholder="Enter keywords"> HTML .search-bar { ... } CSS - add a class - > apply styles to that class
18. [foo=”bar”] attribute value - or use attr selector
19. <input type="search" placeholder="Enter keywords"> HTML - instead of using a class, we can use the type attribute to style the selector
20. <input type="search" placeholder="Enter keywords"> HTML input[type="search"] { ... } CSS - instead of using a class, we can use the type attribute to style the selector
21. microdata [itemprop=”telephone”] [itemprop=”location”] - Also use attr selector to target content that has microdata, so in this case
22. Substring matching attribute • Also do substring matching • check the value of the specified attribute for a string match
23. Ends with substring
24. [foo$=”bar”] ends with Instead of the ^, you use $ instead
25. <a href="assets/doc/manual.pdf"> Download user manual <span class="icon icon-pdf"></span> </a> HTML • To make it clearer what type of document the user might be downloading
26. .icon {font-family: iconfont;} .icon-pdf:before { content: "\e600"; color: crimson; } CSS <a href="assets/doc/manual.pdf"> Download user manual <span class="icon icon-pdf"></span> </a> HTML • To make it clearer what type of document the user might be downloading
27. <a href="assets/doc/manual.pdf"> Download user manual </a> HTML • Can make it even simpler by removing the span • Use “ends with” substring • Can determine what icon to display simply based on the href, and you can quite easily show different icons for the different file formats without having to worry about adding spans with different class names • Consistently apply the same visual treatment across your site without having to worry
28. a[href$=".pdf"]:after { font-family: iconfont; content: "\e600"; color: crimson; } CSS <a href="assets/doc/manual.pdf"> Download user manual </a> HTML • Can make it even simpler by removing the span • Use “ends with” substring • Can determine what icon to display simply based on the href, and you can quite easily show different icons for the different file formats without having to worry about adding spans with different class names • Consistently apply the same visual treatment across your site without having to worry
29. :not() •opp of what other selectors do • basically saying.. if an element does not match an argument then apply styles
30. Simple selectors
31. • Class Selector • ID Selector • Type Selector • Universal Selector • Attribute Selector • Pseudo Class Selector Simple selectors
32. <div class="banner"> <h1>h1. Heading 1</h1> <p>This is a paragraph of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <ul> <li>List 1</li> <li>List 2</li> <li>List 3</li> </ul> </div> HTML - Banner with some text -> want to apply color green to everything but keep the heading 1 using the default black - ...color green
33. .banner :not(h1) { color: green; } CSS <div class="banner"> <h1>h1. Heading 1</h1> <p>This is a paragraph of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <ul> <li>List 1</li> <li>List 2</li> <li>List 3</li> </ul> </div> HTML - Banner with some text -> want to apply color green to everything but keep the heading 1 using the default black - ...color green
34. Test accessibility (really?)
35. <img src="http://placekitten.com/200/200"> HTML
36. <img src="http://placekitten.com/200/200"> HTML img:not([alt]) { border: 5px solid red; } CSS
37. <img src="http://placekitten.com/200/200"> HTML img:not([alt]) { border: 5px solid red; } CSS
38. <table cellspacing="0"> <thead> ... </thead> <tbody> ... </tbody> </table> HTML Testing accessibility this way is really handy because you can see at a glance where all the problems are without the need look through the HTML
39. <table cellspacing="0"> <thead> ... </thead> <tbody> ... </tbody> </table> HTML table:not([summary]):after{ content: "Y U NO SUMMARY !(ಠӹಠ!"; font-weight: bold; color: red; } CSS Testing accessibility this way is really handy because you can see at a glance where all the problems are without the need look through the HTML
40. <table cellspacing="0"> <thead> ... </thead> <tbody> ... </tbody> </table> HTML table:not([summary]):after{ content: "Y U NO SUMMARY !(ಠӹಠ!"; font-weight: bold; color: red; } CSS Testing accessibility this way is really handy because you can see at a glance where all the problems are without the need look through the HTML
41. :target • Most under used and also one of my favourites • Pseudo selector that allows you to style the element that matches the URL fragment identifier, which is the # in the URL
42. http://mywebsite.com#comment
43. http://mywebsite.com#comment http://mywebsite.com#comment
44. • where it’s used - wikipedia - number takes you to the footnote it references and highlights the one it references. • makes it easier to see which part you’re suppose to be looking at
45. <a href="#target">7</a> <p id="target">The targeted paragraph</p> HTML - p has id that matches href of anchor - apply some style to the p when it’s targeted
46. <a href="#target">7</a> <p id="target">The targeted paragraph</p> HTML p:target { background: yellow; transition: background .25s ease-in-out; } CSS - p has id that matches href of anchor - apply some style to the p when it’s targeted
47. - this is what happens
48. :target for simple interaction - this is why i like it because
49. JS free accordion
50. <a href="#acc1">1</a> <div class="acc-content" id="acc1"> .... </div> HTML - just showing u the first panel of the accordion to keep things simple - by default -> content is hidden
51. .acc-content { max-height: 0; overflow: hidden; opacity: 0; transition: all 1s ease; } .acc-content:target { max-height: 400px; opacity: 1; } CSS <a href="#acc1">1</a> <div class="acc-content" id="acc1"> .... </div> HTML - just showing u the first panel of the accordion to keep things simple - by default -> content is hidden
52. .acc-content { max-height: 0; overflow: hidden; opacity: 0; transition: all 1s ease; } .acc-content:target { max-height: 400px; opacity: 1; } CSS <a href="#acc1">1</a> <div class="acc-content" id="acc1"> .... </div> HTML .acc-content:target { max-height: 400px; opacity: 1; } - just showing u the first panel of the accordion to keep things simple - by default -> content is hidden
53. - advantage -> adds the id of the panel to the URL. - and it doesn’t require JS to do that. so if u need to reference one of the accordion panel elsewhere, you can easily use the URL with the URI fragment identifier
54. selector Another good thing about these selectors is that.. you can use them in combination with querySelector and querySelectorAll.
55. querySelector( ) selector selector Another good thing about these selectors is that.. you can use them in combination with querySelector and querySelectorAll.
56. querySelector( ) selector selector querySelectorAll( ) selector Another good thing about these selectors is that.. you can use them in combination with querySelector and querySelectorAll.
57. $('input[type="text"]')[0].value(); jQuery document.querySelector('input[type="text"]').value; JavaScript - if u just want to do simple things like selecting a DOM element -> don’t need jquery, and use querySelector, if no IE7
58. document.querySelectorAll('.list li:not(:first-child):not(:last-child)'); JavaScript - can have quite complicated selectors - power of CSS selectors can extend into your JS and help make your it faster and better
59. CSS Level 4 What’s coming in the (probably very far) future - lastly -> CSS4 - current in working draft
60. !parentSelector - selector that people wish for the most
61. <ul> <li class="active">...</li> <li>...</li> <li>...</li> </ul> HTML - class active on LI then style the UL - can’t do that now without JS - but with !parent you can - The syntax is still changing so it might not be the ! in the future
62. <ul> <li class="active">...</li> <li>...</li> <li>...</li> </ul> HTML - class active on LI then style the UL - can’t do that now without JS - but with !parent you can - The syntax is still changing so it might not be the ! in the future
63. <ul> <li class="active">...</li> <li>...</li> <li>...</li> </ul> HTML document.querySelector('.active').parentNode.classList.add('list-active'); JavaScript - class active on LI then style the UL - can’t do that now without JS - but with !parent you can - The syntax is still changing so it might not be the ! in the future
64. <ul> <li class="active">...</li> <li>...</li> <li>...</li> </ul> HTML document.querySelector('.active').parentNode.classList.add('list-active'); JavaScript !ul > .active {...} CSS4 - class active on LI then style the UL - can’t do that now without JS - but with !parent you can - The syntax is still changing so it might not be the ! in the future
65. :matches :matches pseudo class
66. li.active, li.selected, li#item-1 { ... } CSS - apply the same style on all the different LI... currently we need to list them all out like so.. - with :matches, things are a little simpler and u don’t need to keep specifing the LI
67. li:matches(.active, .selected, #item-1) {...} CSS4 li.active, li.selected, li#item-1 { ... } CSS - apply the same style on all the different LI... currently we need to list them all out like so.. - with :matches, things are a little simpler and u don’t need to keep specifing the LI
68. a:hover, a:focus, a:active { ... } CSS
69. a:matches(:hover, :focus, :active) {...} CSS4 a:hover, a:focus, a:active { ... } CSS
70. :local-link - Location pseudo class - local:link - used to identify internal links and you can pass in a number as a parameter to target the different levels of the URL
71. http://webdirections.org http://webdirections.org - if webdirections is the local URL, we can style this link by passing in 0 into the local-link selectpr - if the URL is one level deep, we can.. - What makes it more useful, is if we combine it with the :not selector
72. a:local-link(0) {color: green;} CSS4 http://webdirections.org - if webdirections is the local URL, we can style this link by passing in 0 into the local-link selectpr - if the URL is one level deep, we can.. - What makes it more useful, is if we combine it with the :not selector
73. http://webdirections.org/code14 http://webdirections.org - if webdirections is the local URL, we can style this link by passing in 0 into the local-link selectpr - if the URL is one level deep, we can.. - What makes it more useful, is if we combine it with the :not selector
74. a:local-link(1) {color: yellow;} CSS4 http://webdirections.org/code14 http://webdirections.org http://webdirections.org/code14 - if webdirections is the local URL, we can style this link by passing in 0 into the local-link selectpr - if the URL is one level deep, we can.. - What makes it more useful, is if we combine it with the :not selector
75. local: http://webdirections.org http://twitter.com - more handy than adding a class or a span
76. local: http://webdirections.org http://twitter.com a:not(:local-link(0)):after { content: "\e602"; /* Unicode for the icon */ ... } CSS4 - more handy than adding a class or a span
77. [attr] :not :target !parent :matches :local-link IE7+ IE9+ IE9+
78. (Do not try this at home) -So I hope this talk has given you some ideas of how you can utilise the power of CSS selectors more to help with your development - CSS is really powerful and it can do a lot more than just styling a webpage.
79. Thank you :)