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

CSS Selectors: The Next Generation

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.

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. Intro to Selectors Selector Performance Attribute Selectors Pseudo Selectors Pseudo

    Elements PolyFills The Future Saturday, October 8, 2011
  3. #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
  4. #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
  5. 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
  6. #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
  7. Intro to Selectors Selector Performance Attribute Selectors Pseudo Selectors Pseudo

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

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

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

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

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

    020 Points #2 .container a[rel="external"] 021 Points Saturday, October 8, 2011
  13. #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
  14. Intro to Selectors Selector Performance Attribute Selectors Pseudo Selectors Pseudo

    Elements PolyFills The Future Saturday, October 8, 2011
  15. #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
  16. #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
  17. #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
  18. #CSS div[class*="foo"] { color: red; } <div class="foobar"> Apply to

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

    <a href="mailto:[email protected]">Contact</a> Child Selectors “Begins” with selector CSS3 Saturday, October 8, 2011
  20. #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
  21. #CSS [class$="right"] { _display: inline; } *[class$="right"] { _display: inline;

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

    Elements PolyFills The Future Saturday, October 8, 2011
  23. #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
  24. #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
  25. #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
  26. :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
  27. :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
  28. #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
  29. #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
  30. #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
  31. #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
  32. #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
  33. #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
  34. Intro to Selectors Selector Performance Attribute Selectors Pseudo Selectors Pseudo

    Elements PolyFills The Future Saturday, October 8, 2011
  35. 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
  36. #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
  37. #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
  38. Intro to Selectors Selector Performance Attribute Selectors Pseudo Selectors Pseudo

    Elements PolyFills The Future Saturday, October 8, 2011
  39. #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
  40. Intro to Selectors Selector Performance Attribute Selectors Pseudo Selectors Pseudo

    Elements PolyFills The Future Saturday, October 8, 2011
  41. #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
  42. #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