Save 37% off PRO during our Black Friday Sale! »

The Declarative Power of CSS Selectors

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.

7d86093feb64d21538561ea2c071a89e?s=128

Fiona Chan

May 04, 2014
Tweet

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 :)