$30 off During Our Annual Pro Sale. View Details »

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

    View Slide

  2. Jake Smith
    Jake Smith
    jakefolio
    http://jakefolio.com
    [email protected]
    Saturday, October 8, 2011

    View Slide

  3. http://bitly.com/mZbVNL
    Links For The Talk
    Saturday, October 8, 2011

    View Slide

  4. Intro to Selectors
    Selector Performance
    Attribute Selectors
    Pseudo Selectors
    Pseudo Elements
    PolyFills
    The Future
    Saturday, October 8, 2011

    View Slide

  5. #CSS
    .menu li a { color: blue; }

    Drop Down

    Sub #1
    Sub #2



    Descendant Selector
    Select all the descendants of the specified element
    Saturday, October 8, 2011

    View Slide

  6. Descendant Selector
    .menu
    li
    li
    a
    Descendants
    Ancestor
    Saturday, October 8, 2011

    View Slide

  7. #CSS
    ul li { color: green; }
    ul > li { color: red; }

    Top Level
    Top Level

    Sub Level
    Sub Level



    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

    View Slide

  8. Selector Context
    ul
    li
    li
    ol
    Children
    Parent
    li
    Saturday, October 8, 2011

    View Slide

  9. Adjacent Sibling
    #CSS
    .module { margin: 0; }
    .module + .module { margin-left: 25px; }

    Module


    Module #2


    Module #3

    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

    View Slide

  10. Adjacent Sibling Selector
    div
    .module
    .module
    .module + +
    Saturday, October 8, 2011

    View Slide

  11. #CSS
    h2 ~ p {
    color: red;
    }
    Primary Headline
    General Paragraph - Not Selected
    Secondary Headline
    Will be Selected
    Will be Selected
    Extra Content
    Will be Selected
    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

    View Slide

  12. General Sibling
    div
    p
    h1
    p
    h2
    Saturday, October 8, 2011

    View Slide

  13. Intro to Selectors
    Selector Performance
    Attribute Selectors
    Pseudo Selectors
    Pseudo Elements
    PolyFills
    The Future
    Saturday, October 8, 2011

    View Slide

  14. CSS Specificity
    It’s a numbers game.
    100
    #header .my-class
    [alt]
    div
    10 1
    Points Per Selector
    :after
    Saturday, October 8, 2011

    View Slide

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

    View Slide

  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

    View Slide

  17. CSS FACE OFF
    Let’s make it more challenging!
    ?
    WINNER
    #1
    .container .external
    #2
    .container a[rel="external"]
    Saturday, October 8, 2011

    View Slide

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

    View Slide

  19. Selectors are read from
    right to left
    Saturday, October 8, 2011

    View Slide

  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

    View Slide

  21. Intro to Selectors
    Selector Performance
    Attribute Selectors
    Pseudo Selectors
    Pseudo Elements
    PolyFills
    The Future
    Saturday, October 8, 2011

    View Slide

  22. #CSS
    img[alt] {
    border: 1px green solid;
    }


    Attribute Selector
    Check if attribute exists.
    Saturday, October 8, 2011

    View Slide

  23. #CSS
    div[class|="widget"] {
    ...
    }



    Widget id of 1


    Child Selectors
    “Slug” selector
    * All “widgets” will be selected
    Saturday, October 8, 2011

    View Slide

  24. #CSS
    div[class|="widget"] {
    ...
    }



    Widget id of 1


    Child Selectors
    “Slug” selector
    * All “widgets” will be selected
    Saturday, October 8, 2011

    View Slide

  25. #CSS
    div[class*="foo"] {
    color: red;
    }

    Apply to this div

    Attribute Selector
    “Contains” selector
    CSS3
    Saturday, October 8, 2011

    View Slide

  26. #CSS
    a[href^="mailto:"] {
    background: url(/images/icn-email.gif);
    }
    Portfolio
    FAQ
    Contact
    Child Selectors
    “Begins” with selector
    CSS3
    Saturday, October 8, 2011

    View Slide

  27. #CSS
    a[href$=".pdf"] { background-image: url(pdf.png); }
    Download White Paper
    Child Selectors
    “Ends” with selector
    CSS3
    Saturday, October 8, 2011

    View Slide

  28. #CSS
    [class$="right"] {
    _display: inline;
    }
    *[class$="right"] {
    _display: inline;
    }
    Attribute Selectors
    Anti-pattern
    * Universal selector will be used.
    Saturday, October 8, 2011

    View Slide

  29. Intro to Selectors
    Selector Performance
    Attribute Selectors
    Pseudo Selectors
    Pseudo Elements
    PolyFills
    The Future
    Saturday, October 8, 2011

    View Slide

  30. #CSS
    div p:first-child {
    color: #333;
    font-size: 14px;
    }

    Important Intro
    Regular Content

    :first-child
    :first-child, :last-child and :only-child
    Saturday, October 8, 2011

    View Slide

  31. #CSS
    .menu li {
    border-bottom: 1px solid #ccc;
    }
    .menu li:last-child {
    border: 0;
    }

    First Menu element
    Menu element
    Last Menu element

    :last-child
    :first-child, :last-child and :only-child
    CSS3
    Saturday, October 8, 2011

    View Slide

  32. #CSS
    tr:nth-child(odd) {
    background: #ccc;
    }


    First Row


    Second Row


    :nth-child/nth-of-type
    :nth-* accepts 3 types of parameters: odd, even and equation
    (3n/3)
    CSS3
    Saturday, October 8, 2011

    View Slide

  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

    View Slide

  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

    View Slide

  35. #CSS
    div:nth-child(3n) { background: #ccc; }



    3n


    3n

    :nth-child/nth-of-type CSS3
    Saturday, October 8, 2011

    View Slide

  36. #CSS
    .widget:nth-last-child(3n) { background: #ccc; }



    3n


    3n



    :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

    View Slide

  37. #CSS
    .widget:nth-child(3n) { background: #ccc; }


    Side Note
    Side Note


    Side Note

    Side Note
    3n


    :nth-child/nth-of-type
    Let’s mix it up!
    CSS3
    Saturday, October 8, 2011

    View Slide

  38. #CSS
    div:nth-of-type(3n) { background: #ccc; }


    Side Note
    Side Note

    3n
    Side Note

    Side Note

    3n

    :nth-child/nth-of-type
    Now with :nth-of-type
    CSS3
    Saturday, October 8, 2011

    View Slide

  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;
    }

    Full Name:
    Opt-in:


    Pseudo Selectors
    :not() - negation selector
    CSS3
    Saturday, October 8, 2011

    View Slide

  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

    View Slide

  41. Intro to Selectors
    Selector Performance
    Attribute Selectors
    Pseudo Selectors
    Pseudo Elements
    PolyFills
    The Future
    Saturday, October 8, 2011

    View Slide

  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

    View Slide

  43. Pseudo Elements
    Saturday, October 8, 2011

    View Slide

  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

    View Slide

  45. Saturday, October 8, 2011

    View Slide

  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

    View Slide

  47. Intro to Selectors
    Selector Performance
    Attribute Selectors
    Pseudo Selectors
    Pseudo Elements
    PolyFills
    The Future
    Saturday, October 8, 2011

    View Slide

  48. Saturday, October 8, 2011

    View Slide

  49. #HTML

    Polyfill
    Using IE9.js
    Saturday, October 8, 2011

    View Slide

  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

    View Slide

  51. Intro to Selectors
    Selector Performance
    Attribute Selectors
    Pseudo Selectors
    Pseudo Elements
    PolyFills
    The Future
    Saturday, October 8, 2011

    View Slide

  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

    View Slide

  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. Home
    2. 2011
    3. March
    4. March
    5. March
    http://www.w3.org/TR/2011/WD-selectors4-20110929/
    CSS4
    Saturday, October 8, 2011

    View Slide

  54. Currently Supported
    http://www.standardista.com/css3/css3-selector-browser-support/
    Saturday, October 8, 2011

    View Slide

  55. Questions? Concerns?
    Complaints?
    Saturday, October 8, 2011

    View Slide

  56. Thanks for Listening!
    jakefolio
    http://jakefolio.com
    [email protected]
    TEXT “JAKEFOLIO” TO 50500
    Saturday, October 8, 2011

    View Slide