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

ConFoo: CSS3 Selectors

Rachel Andrew
February 28, 2013

ConFoo: CSS3 Selectors

Rachel Andrew

February 28, 2013
Tweet

More Decks by Rachel Andrew

Other Decks in Technology

Transcript

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

    View full-size slide

  2. Thursday, 28 February 13

    View full-size slide

  3. What is CSS3?
    Thursday, 28 February 13

    View full-size slide

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

    View full-size slide

  5. CSS3 is Modular
    Thursday, 28 February 13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. h1 {}
    p {}
    .thing {}
    #uniquething {}
    .thing p
    Basic Selectors
    Thursday, 28 February 13

    View full-size slide

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

    View full-size slide

  12. My heading
    ...
    ...
    Adding classes
    Thursday, 28 February 13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. form input[type="text"] {
    }
    !
    form input[type="submit"] {
    }
    Attribute Selectors
    Thursday, 28 February 13

    View full-size slide

  16. Attribute Selectors
    Thursday, 28 February 13

    View full-size slide

  17. label[for="fContact"] {
    !
    float: none;
    !
    width: auto;
    }
    Attribute Selectors
    Thursday, 28 February 13

    View full-size slide

  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

    View full-size slide

  19. Structural pseudo-class
    selectors
    Thursday, 28 February 13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. :first-child
    target an element when it is the first child of a parent
    element
    Thursday, 28 February 13

    View full-size slide


  23. ...
    ...
    ...

    :first-child
    Thursday, 28 February 13

    View full-size slide

  24. :first-child
    Thursday, 28 February 13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. :first-child
    Thursday, 28 February 13

    View full-size slide

  28. :last-child
    target an element when it is the last child of a parent
    element
    Thursday, 28 February 13

    View full-size slide

  29. :last-child
    Thursday, 28 February 13

    View full-size slide

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

    View full-size slide

  31. :last-child
    Thursday, 28 February 13

    View full-size slide

  32. :nth-child
    select multiple elements according to their position in the
    document tree
    Thursday, 28 February 13

    View full-size slide

  33. :nth-child
    Thursday, 28 February 13

    View full-size slide

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

    View full-size slide

  35. :nth-child
    Thursday, 28 February 13

    View full-size slide

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

    View full-size slide

  37. :nth-child
    Thursday, 28 February 13

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  40. p:nth-of-type(odd) {
    ! ! background-color: #f0e9c5;
    }
    :nth-of-type
    Thursday, 28 February 13

    View full-size slide

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

    View full-size slide

  42. :only-child
    matches an element if it is the only child element of it’s
    parent.
    Thursday, 28 February 13

    View full-size slide

  43. li {
    ! list-style-type: disc;
    }
    !
    li:only-child {
    ! list-style-type: none;
    }
    :only-child
    Thursday, 28 February 13

    View full-size slide

  44. :only-child
    Thursday, 28 February 13

    View full-size slide

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

    View full-size slide

  46. p {
    ! padding: 0 0 1em 0;
    ! margin: 0;
    }
    !
    p:empty {
    ! padding: 0;
    }
    :empty
    Thursday, 28 February 13

    View full-size slide

  47. For input elements
    Structural pseudo-classes for use with forms.
    Thursday, 28 February 13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  55. required="required" />
    ! !
    required="required" placeholder="[email protected]" />
    HTML5 attributes
    Thursday, 28 February 13

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  63. ...
    ...
    ...
    :not
    Thursday, 28 February 13

    View full-size slide

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

    View full-size slide

  65. :not
    Thursday, 28 February 13

    View full-size slide

  66. Pseudo-elements
    Thursday, 28 February 13

    View full-size slide

  67. :first-letter
    the first character of the first line of text
    Thursday, 28 February 13

    View full-size slide

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

    View full-size slide

  69. :first-letter
    Thursday, 28 February 13

    View full-size slide

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

    View full-size slide

  71. .wrapper:first-line {
    ! font-size: 200%;
    ! font-weight: bold;
    ! color: red;
    }
    :first-line
    Thursday, 28 February 13

    View full-size slide

  72. :first-line
    Thursday, 28 February 13

    View full-size slide

  73. :before
    Render content before the element when using generated
    content
    Thursday, 28 February 13

    View full-size slide

  74. ...
    :before
    Thursday, 28 February 13

    View full-size slide

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

    View full-size slide

  76. :before
    Thursday, 28 February 13

    View full-size slide

  77. :after
    Render content after the element when using generated
    content
    Thursday, 28 February 13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  80. CSS Arrow Please
    Thursday, 28 February 13

    View full-size slide

  81. Adding a bird
    Thursday, 28 February 13

    View full-size slide

  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

    View full-size slide

  83. ::selection
    Content selected in browser by the user
    Thursday, 28 February 13

    View full-size slide

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

    View full-size slide

  85. ::selection
    Thursday, 28 February 13

    View full-size slide

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

    View full-size slide

  87. Descendant Selector
    Select all elements that are descendants of a specified
    parent
    Thursday, 28 February 13

    View full-size slide

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

    View full-size slide

  89. Child Selector
    Select all elements that are immediate children of a
    specified parent
    Thursday, 28 February 13

    View full-size slide


  90. Item 1

    Sub list item 1
    Sub list item 2


    Item 2

    Child Selector
    Thursday, 28 February 13

    View full-size slide

  91. li {
    ! color: #000;
    }
    !
    ul > li {
    ! color: red;
    }
    Child Selector
    Thursday, 28 February 13

    View full-size slide

  92. Child Selector
    Thursday, 28 February 13

    View full-size slide

  93. Adjacent Sibling
    Select elements that are the adjacent siblings of an
    element
    Thursday, 28 February 13

    View full-size slide

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

    View full-size slide

  95. Adjacent Sibling
    Thursday, 28 February 13

    View full-size slide

  96. General Sibling
    Select elements that are the siblings of an element
    Thursday, 28 February 13

    View full-size slide

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

    View full-size slide

  98. General Sibling
    Thursday, 28 February 13

    View full-size slide

  99. Browser Support
    Thursday, 28 February 13

    View full-size slide

  100. Browser Support
    Thursday, 28 February 13

    View full-size slide

  101. Your options
    Thursday, 28 February 13

    View full-size slide

  102. Do Nothing.
    or serve a simpler layout to older browsers
    Thursday, 28 February 13

    View full-size slide

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

    View full-size slide

  104. div#wrapper p:first-child,
    div#wrapper p.first {
    ! ! font-size: 1.5em;
    }
    jQuery: first-child
    <br/>script><br/><script><br/>$(document).ready(function(){<br/>! $("div#wrapper p:first-child").addClass("first");<br/>});<br/>
    Thursday, 28 February 13

    View full-size slide

  105. ul#navigation li:last-child, ul#navigation li.last {
    ! ! border-bottom: none;
    }
    jQuery: last-child
    <br/>script><br/><script><br/>$(document).ready(function(){<br/>! $("ul#navigation li:last-child").addClass("last");<br/>});<br/>
    Thursday, 28 February 13

    View full-size slide

  106. tr:nth-child(odd) td, td.odd {
    ! background-color: #f0e9c5;
    }
    jQuery: nth-child
    <br/>script><br/><script><br/>$(document).ready(function(){<br/>! $("tr:nth-child(odd) td").addClass("odd");<br/>});<br/>
    Thursday, 28 February 13

    View full-size slide

  107. CSS “PolyFills”
    plugging the holes in support
    Thursday, 28 February 13

    View full-size slide

  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

    View full-size slide

  109. selectivizr
    http://selectivizr.com/
    Thursday, 28 February 13

    View full-size slide

  110. Check your stats.
    Thursday, 28 February 13

    View full-size slide

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

    View full-size slide

  112. IE8
    Thursday, 28 February 13

    View full-size slide

  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

    View full-size slide

  114. CSS3 Workflow
    How I approach my projects.
    Thursday, 28 February 13

    View full-size slide

  115. CSS3 Workflow
    Develop without any polyfill or JavaScript fixes in place.
    Thursday, 28 February 13

    View full-size slide

  116. CSS3 Workflow
    Validate.
    Thursday, 28 February 13

    View full-size slide

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

    View full-size slide

  118. CSS3 Workflow
    Decide if you need to use a polyfill and which kind
    Thursday, 28 February 13

    View full-size slide

  119. CSS3 Workflow
    Test again.
    Thursday, 28 February 13

    View full-size slide

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

    View full-size slide