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

CSS Selectors: The Next Generation

E4df4a30f000a225df7114e4940944e7?s=47 jakefolio
October 08, 2011

CSS Selectors: The Next Generation

Ever felt like you couldn't target the element you wanted? Do you find yourself relying jQuery for presentation needs? No more! CSS3 further expands on the already present selectors that are built into CSS. In this session Jake Smith will introduce you to CSS selectors and share usable examples. Jake will also cover current browser adoption, and the necessary strategies to cover the lapse in coverage.

E4df4a30f000a225df7114e4940944e7?s=128

jakefolio

October 08, 2011
Tweet

More Decks by jakefolio

Other Decks in Programming

Transcript

  1. CSS Selectors The Next Generation CSS Selectors The Next Generation

    Jake Smith October 8, 2011 Saturday, October 8, 2011
  2. Jake Smith Jake Smith jakefolio http://jakefolio.com me@jakefolio.com Saturday, October 8,

    2011
  3. http://bitly.com/mZbVNL Links For The Talk Saturday, October 8, 2011

  4. Intro to Selectors Selector Performance Attribute Selectors Pseudo Selectors Pseudo

    Elements PolyFills The Future Saturday, October 8, 2011
  5. #CSS .menu li a { color: blue; } <ul class="menu">

    <li><a href="#">Drop Down</a> <ul> <li><a href="#">Sub #1</a></li> <li><a href="#">Sub #2</a></li> </ul> </li> </ul> Descendant Selector Select all the descendants of the specified element Saturday, October 8, 2011
  6. Descendant Selector .menu li li a Descendants Ancestor Saturday, October

    8, 2011
  7. #CSS ul li { color: green; } ul > li

    { color: red; } <ul> <li>Top Level</li> <li>Top Level <ol> <li>Sub Level</li> <li>Sub Level</li> </ol> </li> </ul> Child Combinator Selector This selector matches all elements that are the immediate children of a specified element. * Only the “sub level” text will be red. Saturday, October 8, 2011
  8. Selector Context ul li li ol Children Parent li Saturday,

    October 8, 2011
  9. Adjacent Sibling #CSS .module { margin: 0; } .module +

    .module { margin-left: 25px; } <div class="module"> <h2>Module</h2> </div> <div class="module"> <h2>Module #2</h2> </div> <div class="module"> <h2>Module #3</h2> </div> The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element. * Module #2 and #3 will have margin applied. Saturday, October 8, 2011
  10. Adjacent Sibling Selector div .module .module .module + + Saturday,

    October 8, 2011
  11. #CSS h2 ~ p { color: red; } <h1>Primary Headline</h1>

    <p>General Paragraph - Not Selected</p> <h2>Secondary Headline</h2> <p>Will be Selected</p> <p>Will be Selected</p> <div>Extra Content</div> <p>Will be Selected</p> General Sibling The selector matches elements that are siblings of a given element. * Every element after the h2 will be selected CSS3 Saturday, October 8, 2011
  12. General Sibling div p h1 p h2 Saturday, October 8,

    2011
  13. Intro to Selectors Selector Performance Attribute Selectors Pseudo Selectors Pseudo

    Elements PolyFills The Future Saturday, October 8, 2011
  14. CSS Specificity It’s a numbers game. 100 #header .my-class [alt]

    div 10 1 Points Per Selector :after Saturday, October 8, 2011
  15. CSS FACE OFF Who Wins?? ? WINNER #1 #slider #2

    .two-col .container .primary .content ul Saturday, October 8, 2011
  16. CSS FACE OFF Who Wins?? 1 WINNER #1 #slider 100

    Points #2 .two-col .container .primary .content ul 41 Points Saturday, October 8, 2011
  17. CSS FACE OFF Let’s make it more challenging! ? WINNER

    #1 .container .external #2 .container a[rel="external"] Saturday, October 8, 2011
  18. CSS FACE OFF Who Wins?? 2 WINNER #1 .container .external

    020 Points #2 .container a[rel="external"] 021 Points Saturday, October 8, 2011
  19. Selectors are read from right to left Saturday, October 8,

    2011
  20. #CSS body.two-col { ... } body.two-col .container { ... }

    body.two-col .container .primary { ... } Selector Flow Do NOT write your css like you’re following your HTML structure! Saturday, October 8, 2011
  21. Intro to Selectors Selector Performance Attribute Selectors Pseudo Selectors Pseudo

    Elements PolyFills The Future Saturday, October 8, 2011
  22. #CSS img[alt] { border: 1px green solid; } <img src="images/random.jpg"

    alt="Look At Me"> <img src="images/bad.jpg"> Attribute Selector Check if attribute exists. Saturday, October 8, 2011
  23. #CSS div[class|="widget"] { ... } <div class="page"> <div class="homepage-widget-24"></div> <div

    class="homepage-widget-1" data-id="1"> Widget id of 1 </div> </div> Child Selectors “Slug” selector * All “widgets” will be selected Saturday, October 8, 2011
  24. #CSS div[class|="widget"] { ... } <div class="page"> <div class="homepage-widget-24"></div> <div

    class="homepage-widget-1" data-id="1"> Widget id of 1 </div> </div> Child Selectors “Slug” selector * All “widgets” will be selected Saturday, October 8, 2011
  25. #CSS div[class*="foo"] { color: red; } <div class="foobar"> Apply to

    this div </div> Attribute Selector “Contains” selector CSS3 Saturday, October 8, 2011
  26. #CSS a[href^="mailto:"] { background: url(/images/icn-email.gif); } <a href="/portfolio">Portfolio</a> <a href="/faq">FAQ</a>

    <a href="mailto:me@jakefolio.com">Contact</a> Child Selectors “Begins” with selector CSS3 Saturday, October 8, 2011
  27. #CSS a[href$=".pdf"] { background-image: url(pdf.png); } <a href="somefile.pdf">Download White Paper</a>

    Child Selectors “Ends” with selector CSS3 Saturday, October 8, 2011
  28. #CSS [class$="right"] { _display: inline; } *[class$="right"] { _display: inline;

    } Attribute Selectors Anti-pattern * Universal selector will be used. Saturday, October 8, 2011
  29. Intro to Selectors Selector Performance Attribute Selectors Pseudo Selectors Pseudo

    Elements PolyFills The Future Saturday, October 8, 2011
  30. #CSS div p:first-child { color: #333; font-size: 14px; } <div>

    <p>Important Intro</p> <p>Regular Content</p> </div> :first-child :first-child, :last-child and :only-child Saturday, October 8, 2011
  31. #CSS .menu li { border-bottom: 1px solid #ccc; } .menu

    li:last-child { border: 0; } <ul class="menu"> <li>First Menu element</li> <li>Menu element</li> <li>Last Menu element</li> </ul> :last-child :first-child, :last-child and :only-child CSS3 Saturday, October 8, 2011
  32. #CSS tr:nth-child(odd) { background: #ccc; } <table> <tr> <td>First Row</td>

    </tr> <tr> <td>Second Row</td> </tr> </table> :nth-child/nth-of-type :nth-* accepts 3 types of parameters: odd, even and equation (3n/3) CSS3 Saturday, October 8, 2011
  33. :nth-child/nth-of-type :nth-* equation explained 3n (3x0) = 0 (no select)

    (3x1) = 3 (3x2) = 6 3n+1 (3x0) + 1 = 1 (3x1) + 1 = 4 (3x2) + 1 = 7 n+5 0 + 5 = 5 1 + 5 = 6 2 + 5 = 7 3n-1 (3x0) - 1= 0 (3x1) - 1= 2 (3x2) - 1= 5 Saturday, October 8, 2011
  34. :nth-child/nth-of-type :nth-* equation examples odd 3 3n 3n+1 3n-1 n+3

    1 X X 2 X 3 X X X X 4 X X 5 X X X 6 X X 7 X X X 8 X X Saturday, October 8, 2011
  35. #CSS div:nth-child(3n) { background: #ccc; } <div class="container"> <div class="widget"></div>

    <div class="widget"></div> <div class="widget">3n</div> <div class="widget"></div> <div class="widget"></div> <div class="widget">3n</div> </div> :nth-child/nth-of-type CSS3 Saturday, October 8, 2011
  36. #CSS .widget:nth-last-child(3n) { background: #ccc; } <div class="container"> <div class="widget"></div>

    <div class="widget"></div> <div class="widget">3n</div> <div class="widget"></div> <div class="widget"></div> <div class="widget">3n</div> <div class="widget"></div> <div class="widget"></div> </div> :nth-child/nth-of-type :nth-last-child and :nth-last-of-type both start from the last element and move up. CSS3 Saturday, October 8, 2011
  37. #CSS .widget:nth-child(3n) { background: #ccc; } <div class="container"> <div class="widget"></div>

    <p>Side Note</p> <p>Side Note</p> <div class="widget"></div> <div class="widget"></div> <p>Side Note</p> <div class="widget"></div> <p>Side Note</p> <div class="widget">3n</div> <div class="widget"></div> </div> :nth-child/nth-of-type Let’s mix it up! CSS3 Saturday, October 8, 2011
  38. #CSS div:nth-of-type(3n) { background: #ccc; } <div class="container"> <div class="widget"></div>

    <p>Side Note</p> <p>Side Note</p> <div class="widget"></div> <div class="widget">3n</div> <p>Side Note</p> <div class="widget"></div> <p>Side Note</p> <div class="widget"></div> <div class="widget">3n</div> </div> :nth-child/nth-of-type Now with :nth-of-type CSS3 Saturday, October 8, 2011
  39. #CSS input:not([type="radio"]):not([type="checkbox"]):not ([type="submit"]):not([type="button"]):not([type="image"]) { border: 1px solid #ccc; border-radius: 5px;

    } <form action="/" method="post"> <p><label>Full Name:</label><input type="text" name="name" size="30"></p> <p><label>Opt-in:</label><input type="checkbox" name="optin" value="yes"></p> <p><input type="submit" name="frmSubmit"></p> </form> Pseudo Selectors :not() - negation selector CSS3 Saturday, October 8, 2011
  40. #CSS input:checked + label { border: 1px dashed #ccc; }

    input[type="text"]:disabled { background: rgba(10, 10, 10, 0.7); } input:required { font-weight: bold; } input:optional { color: green; } input:valid { box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); } input:invalid { box-shadow: 0 0 5px red; } Pseudo Selectors Form based selectors CSS3 Saturday, October 8, 2011
  41. Intro to Selectors Selector Performance Attribute Selectors Pseudo Selectors Pseudo

    Elements PolyFills The Future Saturday, October 8, 2011
  42. Pseudo Elements A pseudo-element is identified by using two colons

    (::). Available pseudo-elements: ::first-line, ::first-letter, ::before and ::after For compatability purposes the the single colon (:) notation has been accepted. All new CSS3 only pseudo-elements, ::selection, are required to use double colon (::). Saturday, October 8, 2011
  43. Pseudo Elements Saturday, October 8, 2011

  44. #CSS .top { ... } .top:before { content: ""; display:

    block; position: absolute; bottom: -10px; left: 0; } .top:after { content: ""; display: block; position: absolute; bottom: -10px; right: 0; } Pseudo Elements :before and :after This is how CSS ribbons are created. Saturday, October 8, 2011
  45. Saturday, October 8, 2011

  46. #CSS ::-webkit-validation-bubble { ... } ::-webkit-validation-bubble-top-outer-arrow { ... } ::-webkit-validation-bubble-top-inner-arrow

    { ... } ::-webkit-validation-bubble-message { ... } Pseudo Elements Style form validation messages (webkit) CSS3 Saturday, October 8, 2011
  47. Intro to Selectors Selector Performance Attribute Selectors Pseudo Selectors Pseudo

    Elements PolyFills The Future Saturday, October 8, 2011
  48. Saturday, October 8, 2011

  49. #HTML <!--[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> Polyfill Using

    IE9.js Saturday, October 8, 2011
  50. #CSS .menu li:last-child { border: 0; } .menu li.last {

    border: 0; } #Javascript (jQuery) $('.menu li:last-child').addClass('last'); Polyfill Using jQuery to add classes * IE6-8 will fail if declarations are combined. Saturday, October 8, 2011
  51. Intro to Selectors Selector Performance Attribute Selectors Pseudo Selectors Pseudo

    Elements PolyFills The Future Saturday, October 8, 2011
  52. #CSS .primary-nav $li a { ... } Subject Selector Apply

    style to the subject instead of the “key” selector http://www.w3.org/TR/2011/WD-selectors4-20110929/ CSS4 Saturday, October 8, 2011
  53. #CSS 1. a:local-link(0) { ... } 2. a:local-link(1) { ...

    } 3. a:local-link(2) { ... } 4. a:local-link(3) { ... } :local-link The local link is determined based on the site URI. The parameter accepted in local-link tells the selector how many “url segments” to require. #HTML 1. <a href="http://www.example.com">Home</a> 2. <a href="http://www.example.com/2011">2011</a> 3. <a href="https://www.example.com/2011/03">March</a> 4. <a href="http://www.example.com/2011/03/">March</a> 5. <a href="http://example.com/2011/03">March</a> http://www.w3.org/TR/2011/WD-selectors4-20110929/ CSS4 Saturday, October 8, 2011
  54. Currently Supported http://www.standardista.com/css3/css3-selector-browser-support/ Saturday, October 8, 2011

  55. Questions? Concerns? Complaints? Saturday, October 8, 2011

  56. Thanks for Listening! jakefolio http://jakefolio.com me@jakefolio.com TEXT “JAKEFOLIO” TO 50500

    Saturday, October 8, 2011