Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Fiona Chan

May 04, 2014
Tweet

More Decks by Fiona Chan

Other Decks in Programming

Transcript

  1. What can CSS do? A. Style a webpage B. Reduce

    your HTML C. Reduce your JavaScript
  2. What can CSS do? A. Style a webpage B. Reduce

    your HTML C. Reduce your JavaScript D. Testing
  3. What can CSS do? A. Style a webpage B. Reduce

    your HTML C. Reduce your JavaScript D. Testing E. All of the above
  4. Yeah sure... A lot of people still think CSS is

    just used as something to make things look pretty
  5. 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
  6. <input type="search" placeholder="Enter keywords"> HTML - instead of using a

    class, we can use the type attribute to style the selector
  7. <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
  8. Substring matching attribute • Also do substring matching • check

    the value of the specified attribute for a string match
  9. <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
  10. .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
  11. <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
  12. 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
  13. :not() •opp of what other selectors do • basically saying..

    if an element does not match an argument then apply styles
  14. • Class Selector • ID Selector • Type Selector •

    Universal Selector • Attribute Selector • Pseudo Class Selector Simple selectors
  15. <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
  16. .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
  17. <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
  18. <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
  19. <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
  20. :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
  21. • 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
  22. <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
  23. <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
  24. <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
  25. .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
  26. .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
  27. - 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
  28. selector Another good thing about these selectors is that.. you

    can use them in combination with querySelector and querySelectorAll.
  29. querySelector( ) selector selector Another good thing about these selectors

    is that.. you can use them in combination with querySelector and querySelectorAll.
  30. querySelector( ) selector selector querySelectorAll( ) selector Another good thing

    about these selectors is that.. you can use them in combination with querySelector and querySelectorAll.
  31. $('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
  32. 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
  33. CSS Level 4 What’s coming in the (probably very far)

    future - lastly -> CSS4 - current in working draft
  34. <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
  35. <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
  36. <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
  37. <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
  38. 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
  39. 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
  40. :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
  41. 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
  42. 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
  43. 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
  44. 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
  45. (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.