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.

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