CSS Selectors: The Next Generation

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 [email protected] 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:[email protected]">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 [email protected] TEXT “JAKEFOLIO” TO 50500

    Saturday, October 8, 2011