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

CSS Selectors 101-199

CSS Selectors 101-199

Lots of info on CSS Selectors. Given at the Gainesville Frontend Awesome Meetup, and the San Francisco Drupal Users Group.

Michael Herchel

May 28, 2020
Tweet

More Decks by Michael Herchel

Other Decks in Technology

Transcript

  1. L U L L A B O T + F R O N T E N D A W E S O M E
    L U L L A B O T + F R O N T E N D A W E S O M E
    {
    1
    M I K E H E R C H E L
    }
    CSS Selectors 101++
    @ M I K E H E R C H E L

    View Slide

  2. L U L L A B O T + F R O N T E N D A W E S O M E
    2

    View Slide

  3. L U L L A B O T + F R O N T E N D A W E S O M E
    3

    View Slide

  4. L U L L A B O T + F R O N T E N D A W E S O M E
    4

    View Slide

  5. L U L L A B O T + F R O N T E N D A W E S O M E
    What We'll Cover
    ⭑ Memes
    ⭑ What are we trying to solve?
    ⭑ Basic level selectors
    ⭑ Combining selectors
    ⭑ Chaining
    ⭑ Pseudo-elements
    ⭑ Pseudo-classes
    ⭑ Some cool (and weird) recipes
    5

    View Slide

  6. L U L L A B O T + F R O N T E N D A W E S O M E
    ”CSS is easy. It's just a few thousand key value
    pairs that have quirks in each browser that
    you have to memorize.
    — Dave Rupert
    6

    View Slide

  7. L U L L A B O T + F R O N T E N D A W E S O M E
    L U L L A B O T + C L I E N T
    7
    100 fucking
    slides

    View Slide

  8. L U L L A B O T + F R O N T E N D A W E S O M E
    8
    (had to add this one in)

    View Slide

  9. L U L L A B O T + F R O N T E N D A W E S O M E
    9
    L U L L A B O T + F R O N T E N D A W E S O M E
    Memes

    View Slide

  10. L U L L A B O T + F R O N T E N D A W E S O M E
    10

    View Slide

  11. L U L L A B O T + F R O N T E N D A W E S O M E
    11

    View Slide

  12. L U L L A B O T + F R O N T E N D A W E S O M E
    12

    View Slide

  13. L U L L A B O T + F R O N T E N D A W E S O M E
    13

    View Slide

  14. L U L L A B O T + F R O N T E N D A W E S O M E
    14

    View Slide

  15. L U L L A B O T + F R O N T E N D A W E S O M E
    15

    View Slide

  16. L U L L A B O T + F R O N T E N D A W E S O M E
    16
    Tada!
    Mike Herchel
    Senior Front-end Developer at Lullabot
    @mikeherchel

    View Slide

  17. L U L L A B O T + F R O N T E N D A W E S O M E
    17
    L U L L A B O T + F R O N T E N D A W E S O M E
    Define the
    problem

    View Slide

  18. L U L L A B O T + F R O N T E N D A W E S O M E
    18




    type="button"
    aria-controls="primary-nav-our-science"
    aria-expanded="false">Our Science


    Lab Research Programs

    Chemical & Biological Sciences
    Materials Sciences & Engineering
    Simulation, Modeling & Decision Science
    Critical Materials Institute

    View Slide

  19. L U L L A B O T + F R O N T E N D A W E S O M E
    19
    .text-align-center {
    text-align: center;
    }
    .user-login-form input[type="submit"] {
    background-color: #01639a;
    color: #fff;
    height: 54px;
    padding-left: 27px;
    padding-right: 27px;
    }
    .user-login-form input[type="submit"]:hover,
    .user-login-form input[type="submit"]:focus {
    background-color: #024062;
    }
    .user-login-form input[type="submit"]:active {
    background-color: #002337;
    }

    View Slide

  20. L U L L A B O T + F R O N T E N D A W E S O M E
    20

    View Slide

  21. L U L L A B O T + F R O N T E N D A W E S O M E
    21

    View Slide

  22. L U L L A B O T + F R O N T E N D A W E S O M E
    22




    type="button"
    aria-controls="primary-nav-our-science"
    aria-expanded="false">Our Science


    Lab Research Programs

    Chemical & Biological Sciences
    Materials Sciences & Engineering
    Simulation, Modeling & Decision Science
    Critical Materials Institute

    View Slide

  23. L U L L A B O T + F R O N T E N D A W E S O M E
    .text-align-center {
    text-align: center;
    }
    .user-login-form input[type="submit"] {
    background-color: #01639a;
    color: #fff;
    height: 54px;
    padding-left: 27px;
    padding-right: 27px;
    }
    .user-login-form input[type="submit"]:hover,
    .user-login-form input[type="submit"]:focus {
    background-color: #024062;
    }
    .user-login-form input[type="submit"]:active {
    background-color: #002337;
    }
    CSS selectors

    View Slide

  24. L U L L A B O T + F R O N T E N D A W E S O M E
    .text-align-center {
    text-align: center;
    }
    .user-login-form input[type="submit"] {
    background-color: #01639a;
    color: #fff;
    height: 54px;
    padding-left: 27px;
    padding-right: 27px;
    }
    .user-login-form input[type="submit"]:hover,
    .user-login-form input[type="submit"]:focus {
    background-color: #024062;
    }
    .user-login-form input[type="submit"]:active {
    background-color: #002337;
    }
    CSS declarations

    View Slide

  25. L U L L A B O T + F R O N T E N D A W E S O M E
    .text-align-center {
    text-align: center;
    }
    .user-login-form input[type="submit"] {
    background-color: #01639a;
    color: #fff;
    height: 54px;
    padding-left: 27px;
    padding-right: 27px;
    }
    .user-login-form input[type="submit"]:hover,
    .user-login-form input[type="submit"]:focus {
    background-color: #024062;
    }
    .user-login-form input[type="submit"]:active {
    background-color: #002337;
    }
    CSS selectors

    View Slide

  26. L U L L A B O T + F R O N T E N D A W E S O M E
    if (!Drupal.unobtainium.settings.subMenuProcessed && subNav !== null) {
    const button = subNav.querySelector('.subnav__button');
    const subNavInner = subNav.querySelector('.subnav__inner');
    const activeClass = 'js-active';
    function isSubNavOpen() {
    return subNavInner.classList.contains(activeClass);
    }
    26
    CSS selectors in JavaScript

    View Slide

  27. L U L L A B O T + F R O N T E N D A W E S O M E
    Definitions
    ⭑ HTML / Markup
    ⭑ Element / DOM node
    ⭑ CSS / Stylesheet
    ⭑ Attribute
    ⭑ Class
    ⭑ ID
    27

    View Slide

  28. L U L L A B O T + F R O N T E N D A W E S O M E
    An element (aka node)
    28
    class="mega-menu__button"
    type="button"
    aria-controls="primary-nav-our-science"
    aria-expanded="false">Our Science
    ID
    Class
    Attribute value
    Attribute

    View Slide

  29. L U L L A B O T + F R O N T E N D A W E S O M E
    29
    L U L L A B O T + F R O N T E N D A W E S O M E
    Basic Selectors

    View Slide

  30. L U L L A B O T + F R O N T E N D A W E S O M E
    Element selector
    30
    li {
    break-inside: avoid;
    }
    Note lack of preceding period or hash. This selects all elements.

    View Slide

  31. L U L L A B O T + F R O N T E N D A W E S O M E
    31




    type="button"
    aria-controls="primary-nav-our-science"
    aria-expanded="false">Our Science


    Lab Research Programs

    Chemical & Biological Sciences
    Materials Sciences & Engineering
    Simulation, Modeling & Decision Science
    Critical Materials Institute

    View Slide

  32. L U L L A B O T + F R O N T E N D A W E S O M E
    Class selector
    32
    .mega-submenu {
    font-weight: 700;
    letter-spacing: .05em;
    column-count: 2;
    }
    Period (.) designates the selector as an class. Note the period is not present in the
    HTML. This selects all elements that have a class of “mega-submenu”.

    View Slide

  33. L U L L A B O T + F R O N T E N D A W E S O M E
    33




    type="button"
    aria-controls="primary-nav-our-science"
    aria-expanded="false">Our Science


    Lab Research Programs

    Chemical & Biological Sciences
    Materials Sciences & Engineering
    Simulation, Modeling & Decision Science
    Critical Materials Institute

    View Slide

  34. L U L L A B O T + F R O N T E N D A W E S O M E
    ID selector
    34
    #primary-nav-our-science {
    display: flex;
    align-items: center;
    }
    Hash (#) designates the selector as an ID. Note the hash is not present in the HTML.
    This selects all elements with an ID of “primary-nav-our-science”. Note that IDs should
    be unique.

    View Slide

  35. L U L L A B O T + F R O N T E N D A W E S O M E
    35




    type="button"
    aria-controls="primary-nav-our-science"
    aria-expanded="false">Our Science


    Lab Research Programs

    Chemical & Biological Sciences
    Materials Sciences & Engineering
    Simulation, Modeling & Decision Science
    Critical Materials Institute

    View Slide

  36. L U L L A B O T + F R O N T E N D A W E S O M E
    Attribute selector
    36
    [aria-expanded] {
    color: #434251;
    }
    Square brackets selects elements that have the matching attribute. This selects all
    elements that have an “aria-expanded” attribute.

    View Slide

  37. L U L L A B O T + F R O N T E N D A W E S O M E
    37




    type="button"
    aria-controls="primary-nav-our-science"
    aria-expanded="false">Our Science


    Lab Research Programs

    Chemical & Biological Sciences
    Materials Sciences & Engineering
    Simulation, Modeling & Decision Science
    Critical Materials Institute

    View Slide

  38. L U L L A B O T + F R O N T E N D A W E S O M E
    Attribute selector with value
    38
    [aria-expanded="true"] {
    color: #434251;
    }
    Matches both the attribute and its value. This selects all elements that have an
    “aria-expanded” attribute set to “true”.

    View Slide

  39. L U L L A B O T + F R O N T E N D A W E S O M E
    39




    type="button"
    aria-controls="primary-nav-our-science"
    aria-expanded="false">Our Science


    Lab Research Programs

    Chemical & Biological Sciences
    Materials Sciences & Engineering
    Simulation, Modeling & Decision Science
    Critical Materials Institute

    View Slide

  40. L U L L A B O T + F R O N T E N D A W E S O M E
    Attribute selector that starts with value
    40
    [href^="https"] {
    color: #434251;
    }
    Carrot (^) will match when value of attribute starts with the the value that’s in quotes.
    This selects all elements that have an “href” attribute, whose value begins with “https”.

    View Slide

  41. L U L L A B O T + F R O N T E N D A W E S O M E
    Attribute selector that ends with value
    41
    [href$="pdf"] {
    color: #434251;
    }
    Dollar ($) will match when value of attribute ends with the the value that’s in quotes.
    This selects all elements that have an “href” attribute, whose value ends with “pdf”.

    View Slide

  42. L U L L A B O T + F R O N T E N D A W E S O M E
    Attribute selector that contains value
    42
    [href*="this-text"] {
    color: #434251;
    }
    Asterisk (*) will match when value of attribute contains with the the value that’s in
    quotes.

    View Slide

  43. L U L L A B O T + F R O N T E N D A W E S O M E
    Can you use attribute selectors in
    place of class or ID selectors?
    43
    [class="mega-submenu"] {
    font-weight: 700;
    letter-spacing: .05em;
    column-count: 2;
    }

    View Slide

  44. L U L L A B O T + F R O N T E N D A W E S O M E
    Universal selector
    44
    * {
    box-sizing: border-box;
    }
    Selects all elements… ever.

    View Slide

  45. L U L L A B O T + F R O N T E N D A W E S O M E
    45
    L U L L A B O T + F R O N T E N D A W E S O M E
    Combining Selectors

    View Slide

  46. L U L L A B O T + F R O N T E N D A W E S O M E
    Descendent selector
    46
    #primary-nav-our-science .mega-submenu a {
    position: relative;
    }
    Space in between selectors will select all instances of the last selector that has the
    corresponding parent selectors. This selector selects all elements that have a
    parent who has a class of “mega-submenu”... who are nested under any element that
    has an ID of “primary-nav-our-science”.

    View Slide

  47. L U L L A B O T + F R O N T E N D A W E S O M E
    47




    type="button"
    aria-controls="primary-nav-our-science"
    aria-expanded="false">Our Science


    Lab Research Programs

    Chemical & Biological Sciences
    Materials Sciences & Engineering
    Simulation, Modeling & Decision Science
    Critical Materials Institute

    View Slide

  48. L U L L A B O T + F R O N T E N D A W E S O M E
    Direct child selector
    48
    .flex > li {
    position: relative;
    }
    Greater-than symbol in between selectors will select all instances of the last selector
    that is a direct child of the selector preceding the greater-than symbol.

    View Slide

  49. L U L L A B O T + F R O N T E N D A W E S O M E
    49




    type="button"
    aria-controls="primary-nav-our-science"
    aria-expanded="false">Our Science


    Lab Research Programs

    Chemical & Biological Sciences
    Materials Sciences & Engineering
    Simulation, Modeling & Decision Science
    Critical Materials Institute

    View Slide

  50. L U L L A B O T + F R O N T E N D A W E S O M E
    General sibling selector
    50
    .my-class ~ li {
    position: relative;
    }
    The tilde (~) will select all elements that are siblings and appear subsequent to the
    previous selector (before the tilde). This will select any elements that are siblings
    and subsequent to an element that has a class of “my-class”.

    View Slide

  51. L U L L A B O T + F R O N T E N D A W E S O M E
    51




    type="button"
    aria-controls="primary-nav-our-science"
    aria-expanded="false">Our Science


    Lab Research Programs

    Chemical & Biological Sciences
    Materials Sciences & Engineering
    Simulation, Modeling & Decision Science
    Critical Materials Institute

    View Slide

  52. L U L L A B O T + F R O N T E N D A W E S O M E
    Adjacent sibling selector
    52
    .my-class + li {
    position: relative;
    }
    The plus (+) will select the very next element that is a sibling. This will select a
    element if it is directly subsequent to an element that has a class of “my-class”.

    View Slide

  53. L U L L A B O T + F R O N T E N D A W E S O M E
    53




    type="button"
    aria-controls="primary-nav-our-science"
    aria-expanded="false">Our Science


    Lab Research Programs

    Chemical & Biological Sciences
    Materials Sciences & Engineering
    Simulation, Modeling & Decision Science
    Critical Materials Institute

    View Slide

  54. L U L L A B O T + F R O N T E N D A W E S O M E
    54
    L U L L A B O T + F R O N T E N D A W E S O M E
    Chaining Selectors

    View Slide

  55. L U L L A B O T + F R O N T E N D A W E S O M E
    Chain selectors by omitting spaces
    55
    ul.flex {
    position: relative;
    }
    Note the lack of space preceding the period. This selects all elements with a class
    of “flex”.

    View Slide

  56. L U L L A B O T + F R O N T E N D A W E S O M E
    56




    type="button"
    aria-controls="primary-nav-our-science"
    aria-expanded="false">Our Science


    Lab Research Programs

    Chemical & Biological Sciences
    Materials Sciences & Engineering
    Simulation, Modeling & Decision Science
    Critical Materials Institute

    View Slide

  57. L U L L A B O T + F R O N T E N D A W E S O M E
    Chaining selectors
    57
    button.btn--primary[type="submit"] {
    position: relative;
    }
    This selects all button elements that have a CSS class of “btn--primary” and a “type”
    attribute that is set to “submit”.

    View Slide

  58. L U L L A B O T + F R O N T E N D A W E S O M E
    Chaining selectors
    58
    button.form-item.btn--primary[type="submit"] {
    position: relative;
    }
    This selects all button elements that have
    ● CSS class of “form-item”
    ● CSS class of “btn--primary”
    ● “type” attribute that is set to “submit”.

    View Slide

  59. L U L L A B O T + F R O N T E N D A W E S O M E
    Chaining selectors
    59
    button.form-item.btn--primary[type="submit"][aria-expanded="false"] {
    position: relative;
    }
    This selects all button elements that have
    ● CSS class of “form-item”
    ● CSS class of “btn--primary”
    ● “type” attribute that is set to “submit”
    ● “aria-expanded” attribute that is set to “false”

    View Slide

  60. L U L L A B O T + F R O N T E N D A W E S O M E
    Combining selectors
    60
    section.bg-gray-10 .card--publication,
    section.bg-blue-20 .card--publication,
    section.bg-gradient-blue .card--publication {
    background-color: #fff;
    }
    Combine selectors with a comma (,).

    View Slide

  61. L U L L A B O T + F R O N T E N D A W E S O M E
    61
    L U L L A B O T + F R O N T E N D A W E S O M E
    Pseudo-elements

    View Slide

  62. L U L L A B O T + F R O N T E N D A W E S O M E
    62

    View Slide

  63. L U L L A B O T + F R O N T E N D A W E S O M E
    63

    View Slide

  64. L U L L A B O T + F R O N T E N D A W E S O M E
    64
    ::before and ::after
    pseudo-elements enable you to
    insert DOM nodes at the
    beginning and ending of
    elements*.
    * Most elements

    View Slide

  65. L U L L A B O T + F R O N T E N D A W E S O M E
    65
    :before == ::before
    :after == ::after
    Stylistic

    View Slide

  66. L U L L A B O T + F R O N T E N D A W E S O M E
    Creating :before and :after elements
    66
    button:after {
    content: "→";
    }
    The content property must be used to instantiate the element. Note that any text
    placed in this is not visible to screen readers.

    View Slide

  67. L U L L A B O T + F R O N T E N D A W E S O M E
    Common use cases for :before and
    :after
    ⭑ Insert decorative text
    ⭑ Insert an image (by giving the it a size and background image)
    ⭑ Give it a shape and style it
    67

    View Slide

  68. L U L L A B O T + F R O N T E N D A W E S O M E
    Example use case
    68
    ● The “Play” icon is a :before pseudo-element styled to be a triangle.
    ● The “Pause” icon is the same transparent :before pseudo-element with
    border-left and border-right set.
    https://lullabot.com/podcasts

    View Slide

  69. L U L L A B O T + F R O N T E N D A W E S O M E
    Other useful pseudo-elements
    ⭑ :first-letter
    ⭑ :first-line
    ⭑ :placeholder
    ⭑ :selection
    More at https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
    69

    View Slide

  70. L U L L A B O T + F R O N T E N D A W E S O M E
    70
    L U L L A B O T + F R O N T E N D A W E S O M E
    “State”
    Pseudo-classes

    View Slide

  71. L U L L A B O T + F R O N T E N D A W E S O M E
    Hover state
    71
    :hover {
    background-color: red;
    }
    This selects all elements when in a hover state. Every element will turn red on hover.

    View Slide

  72. L U L L A B O T + F R O N T E N D A W E S O M E
    Hover state
    72
    .my-button:hover {
    background-color: red;
    }
    This selects the element that has a “my-button” class when the element is hovered over.

    View Slide

  73. L U L L A B O T + F R O N T E N D A W E S O M E
    Focus state
    73
    .my-button:focus {
    background-color: red;
    }
    This selects the element that has a “my-button” class, when the element has focus.

    View Slide

  74. L U L L A B O T + F R O N T E N D A W E S O M E
    Focus-within state
    74
    .my-menu:focus-within {
    display: block;
    }
    This selects the element that has a “my-menu” class, when any element inside of this
    element has focus.

    View Slide

  75. L U L L A B O T + F R O N T E N D A W E S O M E
    Checked state
    75
    input[type="checkbox"]:checked {
    border: solid 2px red;
    }
    This selects any input element that has a type attribute that is set to “checkbox”, and is
    checked.

    View Slide

  76. L U L L A B O T + F R O N T E N D A W E S O M E
    Other useful state selectors
    ⭑ :active
    ⭑ :disabled
    ⭑ :visited
    More at https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
    76

    View Slide

  77. L U L L A B O T + F R O N T E N D A W E S O M E
    77
    L U L L A B O T + F R O N T E N D A W E S O M E
    “Selector”
    Pseudo-classes

    View Slide

  78. L U L L A B O T + F R O N T E N D A W E S O M E
    :not()
    78
    .cards--border-blue:not(.is-active) {
    border-color: #eeb41e;
    }
    Selects the opposite of what is in the parenthesis. This selector is looking elements that
    have the “cards--border-blue” class but do not have the “is-active” class.

    View Slide

  79. L U L L A B O T + F R O N T E N D A W E S O M E
    :not()
    79
    .cards--border-blue:not(:focus) {
    border-color: #eeb41e;
    }
    This selector is looking elements that have the “cards--border-blue” class are not in
    focus.

    View Slide

  80. L U L L A B O T + F R O N T E N D A W E S O M E
    :first-child and :last-child
    80
    .mega-submenu li:last-child a {
    border-color: #eeb41e;
    }
    Selects the first or last sibling element. This particular selector will select an tag that
    appears under a that is also the last element under its parent, which is under a
    “menu-submenu” class.

    View Slide

  81. L U L L A B O T + F R O N T E N D A W E S O M E
    81




    type="button"
    aria-controls="primary-nav-our-science"
    aria-expanded="false">Our Science


    Lab Research Programs

    Chemical & Biological Sciences
    Materials Sciences & Engineering
    Simulation, Modeling & Decision Science
    Critical Materials Institute

    View Slide

  82. L U L L A B O T + F R O N T E N D A W E S O M E
    :first-child and :last-child
    82
    .mega-submenu li:not(:last-child) {
    margin-bottom: 27px;
    }
    Selects the first or last element under an element. This particular ruleset will select all of
    the tags that are under the “menu-submenu” class — except for the last one, and
    add a bottom margin to it.

    View Slide

  83. L U L L A B O T + F R O N T E N D A W E S O M E
    :nth-child(even) and :nth-child(odd)
    83
    tbody tr:nth-child(even) {
    background: #eee;
    }
    Selects the even or odd numbered elements. This particular selector creates a “zebra
    stripe” pattern and which makes alternate table rows have a light background color.

    View Slide

  84. L U L L A B O T + F R O N T E N D A W E S O M E
    :nth-child(x)
    84
    .mega-submenu li:nth-child(2) {
    border-color: #eeb41e;
    }
    Selects the specific nth element. This particular selector will select the 2nd tag
    under its parent, if it is under an element with a “menu-submenu” class.

    View Slide

  85. L U L L A B O T + F R O N T E N D A W E S O M E
    :nth-child(xn)
    85
    .mega-submenu li:nth-child(4n) {
    border-color: #eeb41e;
    }
    Selects every xth element. This particular selector will select every 4th tag under its
    parent, if it is under an element with a “menu-submenu” class.

    View Slide

  86. L U L L A B O T + F R O N T E N D A W E S O M E
    :nth-child(xn + y)
    86
    .mega-submenu li:nth-child(4n + 1) {
    border-color: #eeb41e;
    }
    Selects every xth element, but moving up y position(s). This particular selector will
    select every 4th tag under its parent starting moving one position up.

    View Slide

  87. L U L L A B O T + F R O N T E N D A W E S O M E
    87
    https://codepen.io/mherchel/pen/NWPLvoq

    View Slide

  88. L U L L A B O T + F R O N T E N D A W E S O M E
    :only-child
    88
    .mega-submenu li:only-child {
    border-color: #eeb41e;
    }
    Selects the element under .mega-submenu if it is the only child of its parent.

    View Slide

  89. L U L L A B O T + F R O N T E N D A W E S O M E
    :nth-last-child()
    89
    .mega-submenu li:nth-last-child(4n + 1) {
    border-color: #eeb41e;
    }
    Selects every xth element from the end, but moving up y position(s). This particular
    selector will select every 4th tag under its parent starting from the end moving one
    position up.

    View Slide

  90. L U L L A B O T + F R O N T E N D A W E S O M E
    :nth-of-type()
    90
    .mega-submenu li:nth-of-type(4n + 1) {
    border-color: #eeb41e;
    }
    Selects every xth element of the specified type, but moving up y position(s). This
    particular selector will select every 4th tag under its parent starting moving one
    position up.

    View Slide

  91. L U L L A B O T + F R O N T E N D A W E S O M E
    :only-of-type
    91
    .mega-submenu li:only-of-type {
    border-color: #eeb41e;
    }
    Selects the element of the same type under .mega-submenu if it is the only child of the
    same type under its parent.

    View Slide

  92. L U L L A B O T + F R O N T E N D A W E S O M E
    :last-of-type()
    92
    .mega-submenu li:last-of-type(2) {
    border-color: #eeb41e;
    }
    Matches elements of a given type, based on their position among a group of siblings,
    counting from the end.

    View Slide

  93. L U L L A B O T + F R O N T E N D A W E S O M E
    :empty
    93
    .mega-submenu li:empty {
    border-color: #eeb41e;
    }
    Matches elements that do not have any text, white space, or HTML comments.

    View Slide

  94. L U L L A B O T + F R O N T E N D A W E S O M E
    94
    L U L L A B O T + F R O N T E N D A W E S O M E
    Cool recipes

    View Slide

  95. L U L L A B O T + F R O N T E N D A W E S O M E
    Add icon to end of links that are
    email address
    95
    a[href^="mailto"]:after {
    content: "✉"; /* Unicode envelope. */
    margin-left: 3px;
    }

    View Slide

  96. L U L L A B O T + F R O N T E N D A W E S O M E
    Add icon to end of links that are
    PDFs
    96
    a[href$="pdf"]:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background: url('/images/pdf-icon.svg') no-repeat center;
    margin-left: 3px;
    }

    View Slide

  97. L U L L A B O T + F R O N T E N D A W E S O M E
    Quantity selector
    97
    .my-parent > *:first-child:nth-last-child(4),
    .my-parent > *:first-child:nth-last-child(4) ~ * {
    /* This only selects elements if there's exactly 4 siblings. */
    }

    View Slide

  98. L U L L A B O T + F R O N T E N D A W E S O M E
    Multiple selector
    98
    .my-parent > *:first-child:nth-last-child(4n),
    .my-parent > *:first-child:nth-last-child(4n) ~ * {
    /* Selects elements if there's a multiple of 4 siblings. */
    }

    View Slide

  99. L U L L A B O T + F R O N T E N D A W E S O M E
    Only show element when checkbox
    is checked
    99
    .my-menu-container {
    display: none;
    }
    .my-checkbox:checked ~ .my-menu-container {
    display: block;
    }

    View Slide

  100. L U L L A B O T + F R O N T E N D A W E S O M E
    100
    Tada!
    Mike Herchel
    Senior Front-end Developer at Lullabot
    @mikeherchel

    View Slide