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

ConFoo: CSS3 Selectors

C96ed27286a51ae9d0951066c1d75579?s=47 Rachel Andrew
February 28, 2013

ConFoo: CSS3 Selectors

C96ed27286a51ae9d0951066c1d75579?s=128

Rachel Andrew

February 28, 2013
Tweet

Transcript

  1. CSS3 Selectors Rachel Andrew: ConFoo 2013 Thursday, 28 February 13

  2. Thursday, 28 February 13

  3. What is CSS3? Thursday, 28 February 13

  4. CSS3 is the next version of CSS Thursday, 28 February

    13
  5. CSS3 is Modular Thursday, 28 February 13

  6. Some CSS3 modules are more complete than others Thursday, 28

    February 13
  7. W3C Maturity Levels Working Draft Candidate Recommendation Proposed Recommendation W3C

    Recommendation Thursday, 28 February 13
  8. CSS3 is supported by browsers Some browsers and some (parts

    of) modules. Thursday, 28 February 13
  9. Selectors module W3C Recommendation http://www.w3.org/TR/css3-selectors/ Thursday, 28 February 13

  10. h1 {} p {} .thing {} #uniquething {} .thing p

    Basic Selectors Thursday, 28 February 13
  11. The problem with CSS2 selectors Thursday, 28 February 13

  12. <h1>My heading</h1> <p class=”first”> ... </p> <p> ... </p> Adding

    classes Thursday, 28 February 13
  13. CSS3 Selectors “Common sense” new selectors target elements more precisely

    without adding classes Thursday, 28 February 13
  14. Attribute Selectors Select elements based on attributes Thursday, 28 February

    13
  15. form input[type="text"] { } ! form input[type="submit"] { } Attribute

    Selectors Thursday, 28 February 13
  16. Attribute Selectors Thursday, 28 February 13

  17. label[for="fContact"] { ! float: none; ! width: auto; } Attribute

    Selectors Thursday, 28 February 13
  18. a[href ^="mailto:"] { padding-right: 20px; ! background-image:url(email.png); ! background-repeat: no-repeat;

    ! background-position: right center; } Attribute Selectors Thursday, 28 February 13
  19. Structural pseudo-class selectors Thursday, 28 February 13

  20. a:link {} a:visited {} Pseudo-Class Selectors Thursday, 28 February 13

  21. a:hover {} a:active {} Dynamic Pseudo-Class Thursday, 28 February 13

  22. :first-child target an element when it is the first child

    of a parent element Thursday, 28 February 13
  23. <div class=”wrapper”> <p> ... </p> <p> ... </p> <p> ...

    </p> </div> :first-child Thursday, 28 February 13
  24. :first-child Thursday, 28 February 13

  25. .wrapper p { ! ! font-size: 1.5em; } :first-child Thursday,

    28 February 13
  26. .wrapper p:first-child { ! ! font-size: 1.5em; } :first-child Thursday,

    28 February 13
  27. :first-child Thursday, 28 February 13

  28. :last-child target an element when it is the last child

    of a parent element Thursday, 28 February 13
  29. :last-child Thursday, 28 February 13

  30. .navigation li:last-child { ! ! border-bottom: none; } :last-child Thursday,

    28 February 13
  31. :last-child Thursday, 28 February 13

  32. :nth-child select multiple elements according to their position in the

    document tree Thursday, 28 February 13
  33. :nth-child Thursday, 28 February 13

  34. tr:nth-child(odd) td { ! ! background-color: #f0e9c5; } :nth-child Thursday,

    28 February 13
  35. :nth-child Thursday, 28 February 13

  36. tr:nth-child(3) td { ! ! background-color: #f0e9c5; } :nth-child Thursday,

    28 February 13
  37. :nth-child Thursday, 28 February 13

  38. tr:nth-child(2n+1) td { ! ! background-color: #f0e9c5; } :nth-child http://css-tricks.com/how-nth-child-works/

    Thursday, 28 February 13
  39. :nth-of-type select multiple elements according to their position in the

    document tree BUT only those elements that are the same as the type the rule is applied to. Thursday, 28 February 13
  40. p:nth-of-type(odd) { ! ! background-color: #f0e9c5; } :nth-of-type Thursday, 28

    February 13
  41. :nth-of-type Thursday, 28 February 13

  42. :only-child matches an element if it is the only child

    element of it’s parent. Thursday, 28 February 13
  43. li { ! list-style-type: disc; } ! li:only-child { !

    list-style-type: none; } :only-child Thursday, 28 February 13
  44. :only-child Thursday, 28 February 13

  45. :empty matches an element if it is empty Thursday, 28

    February 13
  46. p { ! padding: 0 0 1em 0; ! margin:

    0; } ! p:empty { ! padding: 0; } :empty Thursday, 28 February 13
  47. For input elements Structural pseudo-classes for use with forms. Thursday,

    28 February 13
  48. :checked the checked state of a checkbox or radio button

    Thursday, 28 February 13
  49. .agreeterms:checked { border:2px solid blue; } :checked Thursday, 28 February

    13
  50. enabled and disabled detecting input element states Thursday, 28 February

    13
  51. input:enabled { color: #000; } :enabled Thursday, 28 February 13

  52. input:disabled { color: #999; } :disabled Thursday, 28 February 13

  53. The CSS3 Basic User Interface Module http://www.w3.org/TR/css3-ui/ (Working Draft) Thursday,

    28 February 13
  54. :default :valid :invalid :in-range :out-of-range :required :optional :read-only :read-write Thursday,

    28 February 13
  55. <input type="text" name="fName" id="fName" required="required" /> ! ! <input type="email"

    name="fEmail" id="fEmail" required="required" placeholder="name@example.com" /> HTML5 attributes Thursday, 28 February 13
  56. input:focus:required:invalid { background-image: url(error.png); background-position: 98% center; background-repeat: no-repeat; }

    Adding an icon to required fields Thursday, 28 February 13
  57. Adding an icon to required fields Thursday, 28 February 13

  58. input:required:valid { background-image: url(accept.png); background-position: 98% center; background-repeat: no-repeat; }

    Adding an icon to valid fields Thursday, 28 February 13
  59. Adding an icon to valid fields Thursday, 28 February 13

  60. input[type="email"]:focus:required:invalid { ! background-image: url(email_error.png); } Show a different icon

    for the field type Thursday, 28 February 13
  61. Show a different icon for the field type Thursday, 28

    February 13
  62. the Negation pseudo- class :not(selector) Thursday, 28 February 13

  63. <p> ... </p> <p class=”box”> ... </p> <p> ... </p>

    :not Thursday, 28 February 13
  64. p:not(.box) { ! ! padding: 1em; ! ! border:2px solid

    #000; ! } :not Thursday, 28 February 13
  65. :not Thursday, 28 February 13

  66. Pseudo-elements Thursday, 28 February 13

  67. :first-letter the first character of the first line of text

    Thursday, 28 February 13
  68. .wrapper:first-letter { ! font-size: 200%; ! font-weight: bold; ! color:

    red; } :first-letter Thursday, 28 February 13
  69. :first-letter Thursday, 28 February 13

  70. :first-line the first formatted line of text Thursday, 28 February

    13
  71. .wrapper:first-line { ! font-size: 200%; ! font-weight: bold; ! color:

    red; } :first-line Thursday, 28 February 13
  72. :first-line Thursday, 28 February 13

  73. :before Render content before the element when using generated content

    Thursday, 28 February 13
  74. <div class=”content”> ... </div> :before Thursday, 28 February 13

  75. .content:before { content: "Start here:"; } :before Thursday, 28 February

    13
  76. :before Thursday, 28 February 13

  77. :after Render content after the element when using generated content

    Thursday, 28 February 13
  78. .content:after { content: "End here:"; } :after Thursday, 28 February

    13
  79. Generated content can be very useful... Thursday, 28 February 13

  80. CSS Arrow Please Thursday, 28 February 13

  81. Adding a bird Thursday, 28 February 13

  82. .clearfix:after { visibility: hidden; display: block; font-size: 0; content: "

    "; clear: both; height: 0; } .clearfix { display: inline-block; } /* start commented backslash hack \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* close commented backslash hack */ Clear Fix Thursday, 28 February 13
  83. ::selection Content selected in browser by the user Thursday, 28

    February 13
  84. .wrapper p::selection {! background-color: red; } ::selection Thursday, 28 February

    13
  85. ::selection Thursday, 28 February 13

  86. Combinators Combining selectors to target elements Thursday, 28 February 13

  87. Descendant Selector Select all elements that are descendants of a

    specified parent Thursday, 28 February 13
  88. .wrapper p { ! font-size: 1.5em; } Descendant Selector Thursday,

    28 February 13
  89. Child Selector Select all elements that are immediate children of

    a specified parent Thursday, 28 February 13
  90. <ul> <li>Item 1 <ol> <li>Sub list item 1</li> <li>Sub list

    item 2</li> </ol> </li> <li>Item 2</li> </ul> Child Selector Thursday, 28 February 13
  91. li { ! color: #000; } ! ul > li

    { ! color: red; } Child Selector Thursday, 28 February 13
  92. Child Selector Thursday, 28 February 13

  93. Adjacent Sibling Select elements that are the adjacent siblings of

    an element Thursday, 28 February 13
  94. .wrapper h1 + p { ! font-size: 1.5em; } Adjacent

    Sibling Thursday, 28 February 13
  95. Adjacent Sibling Thursday, 28 February 13

  96. General Sibling Select elements that are the siblings of an

    element Thursday, 28 February 13
  97. .wrapper h2~p { ! color: red; } General Sibling Thursday,

    28 February 13
  98. General Sibling Thursday, 28 February 13

  99. Browser Support Thursday, 28 February 13

  100. Browser Support Thursday, 28 February 13

  101. Your options Thursday, 28 February 13

  102. Do Nothing. or serve a simpler layout to older browsers

    Thursday, 28 February 13
  103. JavaScript Plug the holes in browser support using JavaScript. Thursday,

    28 February 13
  104. div#wrapper p:first-child, div#wrapper p.first { ! ! font-size: 1.5em; }

    jQuery: first-child <script src="http://code.jquery.com/jquery-latest.js"></ script> <script> $(document).ready(function(){ ! $("div#wrapper p:first-child").addClass("first"); }); </script> Thursday, 28 February 13
  105. ul#navigation li:last-child, ul#navigation li.last { ! ! border-bottom: none; }

    jQuery: last-child <script src="http://code.jquery.com/jquery-latest.js"></ script> <script> $(document).ready(function(){ ! $("ul#navigation li:last-child").addClass("last"); }); </script> Thursday, 28 February 13
  106. tr:nth-child(odd) td, td.odd { ! background-color: #f0e9c5; } jQuery: nth-child

    <script src="http://code.jquery.com/jquery-latest.js"></ script> <script> $(document).ready(function(){ ! $("tr:nth-child(odd) td").addClass("odd"); }); </script> Thursday, 28 February 13
  107. CSS “PolyFills” plugging the holes in support Thursday, 28 February

    13
  108. What is a polyfill? A polyfill, or polyfiller, is a

    piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. http://remysharp.com/2010/10/08/what-is-a-polyfill/ Thursday, 28 February 13
  109. selectivizr http://selectivizr.com/ Thursday, 28 February 13

  110. Check your stats. Thursday, 28 February 13

  111. greenbelt.org.uk Thursday, 28 February 13

  112. IE8 Thursday, 28 February 13

  113. var patch_css = function() { ! ! // supporting css

    stuff ! ! ! ! $('input[type=submit]').addClass('submit'); ! ! $('h1+h2').addClass('stacked'); ! ! $('h1+p').addClass('stacked'); ! ! ! }; patch_css Thursday, 28 February 13
  114. CSS3 Workflow How I approach my projects. Thursday, 28 February

    13
  115. CSS3 Workflow Develop without any polyfill or JavaScript fixes in

    place. Thursday, 28 February 13
  116. CSS3 Workflow Validate. Thursday, 28 February 13

  117. CSS3 Workflow Test & Fix in older browsers Thursday, 28

    February 13
  118. CSS3 Workflow Decide if you need to use a polyfill

    and which kind Thursday, 28 February 13
  119. CSS3 Workflow Test again. Thursday, 28 February 13

  120. Thank You! @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com Thursday, 28 February 13