CSS Pseudo

Learn practical uses for over 25 pseudo-classes and pseudo-elements with Mike Kivikoski. Starting with the basics, you’ll quickly advance to use cases that apply to positioning, text, content, and get a glimpse at some (hopeful) future selectors. All levels of CSS experience are welcome and encouraged to attend - there is something for everyone!

Codepen collection of examples bit.ly/pseudo-pen

Transcript

1. CSS Pseudo
   :hover, :active, & beyond
   Mike Kivikoski, @mkivikoski
   

   View Slide

2. Warning
   These examples are for demo and may
   not be the best use case for your
   application due to maintainability,
   performance and specificity.
   

   View Slide

3. :classes vs ::elements
   

   View Slide

4. :classes vs ::elements
   0010 0001
   

   View Slide

5. Let’s Begin
   

   View Slide

6. :link
   Styles applied on links that a user has not visited.
   a:link{
   property: value;
   }
   

   View Slide

7. :visited
   Styles applied on links that a user has visited.
   a:visited{
   property: value;
   }
   

   View Slide

8. :visited
   For privacy reasons, :visited only accepts
   color,
   background-color,
   border-color,
   outline-color,
   and the color parts of the fill and stroke properties
   

   View Slide

9. :hover
   Styles applied when user mouses over an element.
   selector:hover{
   property: value;
   }
   

   View Slide

10. :hover
    a:hover {
    background: #E3BB33;
    }
    hello
    

    View Slide

11. :focus
    Styles applied when an element has received focus via
    keyboard or mouse.
    selector:focus{
    property: value;
    }
    

    View Slide

12. :focus
    a:focus {
    color: #73E3FC;
    }
    hello<
    folks!
    How
    goes?
    

    View Slide

13. :focus & :hover
    a:focus,
    a:hover {
    color: #73E3FC;
    }
    hello<
    folks!
    How
    goes?
    

    View Slide

14. :active
    Styles applied when user activates an element.
    selector:active{
    property: value;
    }
    

    View Slide

15. :active
    button:active {
    background: #CE6FD3;
    }
    

    View Slide

16. Content
    

    View Slide

17. :lang(language)
    Styles applied with match of elements based on the 

    document language.
    :lang(language){
    property: value;
    }
    selector:lang(language){
    property: value;
    }
    

    View Slide

18. :lang(language)
    :lang(en) {
    color: #E3BB33;
    }
    :lang(es) {
    background: #E3BB33;
    margin: 1em 2em;
    padding: 1em;
    }
    http://codepen.io/mikekivikoski/pen/KzXPJG
    
    Content with lang=
    define
    
    Parece que ya está
    "ES " definido
    more english mumbo
    div>
    

    View Slide

19. :lang(language)
    http://codepen.io/mikekivikoski/pen/KzXPJG
    

    View Slide

20. ::after
    Matches a virtual last child of the selected element.
    selector::after{
    property: value;
    }
    

    View Slide

21. ::after
    div::after {
    content: "You’re great!";
    }
    
    Hello there!
    
    http://codepen.io/mikekivikoski/pen/dMVyPN
    

    View Slide

22. ::after
    div::after {
    content: attr(data-complement);
    }
    
    Hello there!
    
    http://codepen.io/mikekivikoski/pen/VaMwvb
    

    View Slide

23. ::after
    a.external::after,
    a[target="_blank"]::after {
    content: "\2192"; //arrow
    }
    http://codepen.io/mikekivikoski/pen/jqaRLO
    

    View Slide

24. ::before
    Matches a virtual first child of the selected element.
    selector::before{
    property: value;
    }
    

    View Slide

25. ::before
    li::before {
    content: "\1F355"; //pizza!
    }
    
    One
    Two
    Three
    
    http://codepen.io/mikekivikoski/pen/EKwxyP
    

    View Slide

26. a.singlediv.com
    element:pseudo {
    property: value;
    }
    

    View Slide

27. ::first-letter
    Styles are applied to the first letter of 

    the specified selector.
    selector::first-letter{
    property: value;
    }
    

    View Slide

28. ::first-letter
    p::first-letter{
    font-size: 2em;
    }
    Bacon ipsum dolor amet shankle cupim jowl,
    pancetta landjaeger beef short ribs spare rib
    boudin doner filet mignon ball tip corned bee
    pork belly.
    http://codepen.io/mikekivikoski/pen/mPBJgw
    

    View Slide

29. ::first-letter
    p::first-letter{
    font-size: 2em;
    }
    http://codepen.io/mikekivikoski/pen/mPBJgw
    

    View Slide

30. ::first-line
    Styles are applied to only the first line of an element.
    selector::first-line{
    property: value;
    }
    

    View Slide

31. ::first-line
    p::first-line{
    font-variant: small-caps;
    }
    Bacon ipsum dolor amet shankle cupim
    jowl, pancetta landjaeger beef short
    ribs spare ribs boudin doner filet
    mignon ball tip corned beef pork
    belly.
    http://codepen.io/mikekivikoski/pen/Xdemrr
    

    View Slide

32. ::first-line
    p::first-line{
    font-variant: small-caps;
    }
    http://codepen.io/mikekivikoski/pen/Xdemrr
    

    View Slide

33. ::first-line
    http://codepen.io/mikekivikoski/pen/Xdemrr
    

    View Slide

34. ::selection
    Styles are applied to elements that have been highlighted
    with a mouse.
    selector::selection{
    property: value;
    }
    

    View Slide

35. ::selection
    p::selection{
    color: #73E3FC;
    }
    Bacon ipsum dolor amet shankle cupim
    jowl, pancetta landjaeger beef short
    ribs spare ribs boudin doner filet
    mignon ball tip corned beef pork
    belly.
    http://codepen.io/mikekivikoski/pen/eZGvKG
    

    View Slide

36. ::selection
    p::selection{
    color: #73E3FC;
    }
    http://codepen.io/mikekivikoski/pen/eZGvKG
    

    View Slide

37. http://caniuse.com
    ::selection
    

    View Slide

38. Negation
    

    View Slide

39. :not(s)
    Is a negation pseudo class accepting a simple selector as
    an argument.
    selector:not(s){
    property: value;
    }
    

    View Slide

40. :not(s)
    li:not(:last-child){
    color: #E3BB33;
    }
    First LI
    Active LI
    Third LI
    Last LI
    http://codepen.io/mikekivikoski/pen/YqrQzN
    

    View Slide

41. :not(s)
    li:not(:last-child){
    color: #E3BB33;
    }
    http://codepen.io/mikekivikoski/pen/YqrQzN
    

    View Slide

42. :not and ::after
    a:not( [href*='yourdomain.com'] )

    :not( [href^='#'] )

    :not( [href^='/'] )

    ::after {
    content: "\2192";
    }
    
    To another site!
    
    

    View Slide

43. Forms
    

    View Slide

44. :checked
    Styles applied to radio, checkbox or option element that
    is checked to an on state.
    selector:checked{
    property: value;
    }
    

    View Slide

45. :checked
    input:checked + label{
    color: #E3BB33;
    }
    
    :checkbox demo label
    http://codepen.io/mikekivikoski/pen/YqrXvW
    

    View Slide

46. :disabled
    Styles applied to a form input that is disabled, and unable
    to accept focus or content input.
    selector:disabled{
    property: value;
    }
    

    View Slide

47. :disabled
    input:disabled{
    background: #E3BB33;
    }
    
    
    
    http://codepen.io/mikekivikoski/pen/WwXBpo
    

    View Slide

48. :disabled
    input:disabled{
    background: #E3BB33;
    }
    http://codepen.io/mikekivikoski/pen/WwXBpo
    

    View Slide

49. :read-only
    Styles applied to an element that is not writeable 

    by a user.
    selector:read-only{
    property: value;
    }
    

    View Slide

50. :read-only
    :read-only{
    background: #E3BB33;
    }
    
    
    
    http://codepen.io/mikekivikoski/details/Rajddj/
    

    View Slide

51. :read-only
    :read-only{
    background: #E3BB33;
    }
    http://codepen.io/mikekivikoski/details/Rajddj/
    

    View Slide

52. :read-write
    Styles applied when an element is writeable by a user.
    :read-write,
    selector:read-write{
    property: value;
    }
    

    View Slide

53. :read-write
    :read-write{
    background: #E3BB33;
    }
    
    
    You can edit me!
    http://codepen.io/mikekivikoski/pen/JXOzgb
    

    View Slide

54. :read-write
    https://developer.mozilla.org/en-US/docs/Web/CSS/:read-write
    

    View Slide

55. :valid
    Styles applied to form elements with a value that
    validates according to the element's settings.
    selector:valid{
    property: value;
    }
    

    View Slide

56. :valid
    input:valid{
    background: #E3BB33;
    }
    
    http://codepen.io/mikekivikoski/pen/reGzaj
    

    View Slide

57. http://caniuse.com
    :valid
    

    View Slide

58. :invalid
    Styles applied to form elements with a value that doesn’t
    validate according to the element's settings.
    selector:invalid{
    property: value;
    }
    

    View Slide

59. :invalid
    input:invalid{
    background: red;
    }
    
    http://codepen.io/mikekivikoski/pen/GZMvZz
    

    View Slide

60. http://caniuse.com
    :invalid
    

    View Slide

61. :invalid and :valid
    input:valid:not(:focus){
    background: green;
    }
    input:invalid:not(:focus){
    background: red;
    }
    http://codepen.io/mikekivikoski/pen/zqEdBz
    

    View Slide

62. :required
    Styles applied to form elements that have 

    a required attribute.
    selector:required{
    property: value;
    }
    

    View Slide

63. :required
    input:required{
    border: 10px solid #E3BB33;
    }
    
    http://codepen.io/mikekivikoski/pen/NNavgq
    

    View Slide

64. http://caniuse.com
    :required
    

    View Slide

65. :optional
    Styles applied to form elements that don’t have a
    required attribute.
    selector:optional{
    property: value;
    }
    

    View Slide

66. :optional
    input:optional{
    }
    
    
    http://codepen.io/mikekivikoski/pen/BKmbvV
    

    View Slide

67. :indeterminate
    Styles applied to a checkbox with a javascript based
    indeterminate state or an empty progress bar.
    selector:indeterminate{
    property: value;
    }
    

    View Slide

68. :indeterminate
    http://codepen.io/mikekivikoski/pen/repNmb
    input:indeterminate + label{
    background: #E3BB33;
    }
    

    View Slide

69. :in-range
    Styles applied to input elements when their value is
    inside the range specified as being acceptable.
    selector:in-range{
    property: value;
    }
    

    View Slide

70. :in-range
    input:in-range{
    border: 5px solid #E3BB33;
    }
    
    http://codepen.io/mikekivikoski/pen/WwXRYP
    

    View Slide

71. :in-range
    http://caniuse.com
    

    View Slide

72. :out-of-range
    Styles applied to input elements when their value is
    outside the range specified as being acceptable.
    selector:out-of—range{
    property: value;
    }
    

    View Slide

73. :out-of-range
    http://caniuse.com
    

    View Slide

74. ::placeholder
    Styles applied to the placeholder content within an input
    element.
    selector::placeholder{
    property: value;
    }
    

    View Slide

75. ::placeholder
    ::-webkit-input-placeholder,
    ::-moz-placeholder,
    :-ms-input-placeholder
    { color: #E3BB33;}
    
    

    View Slide

76. ::placeholder
    http://caniuse.com
    

    View Slide

77. :placeholder-shown
    Styles applied to the actual input with placeholder text.
    selector:placeholder-shown{
    property: value;
    }
    

    View Slide

78. :placeholder-shown
    input:placeholder-shown{
    border: 5px solid #E3BB33;
    }
    
    http://codepen.io/mikekivikoski/pen/ZWaLNG
    

    View Slide

79. css-tricks.com/form-
    validation-ux-html-css
    http://codepen.io/mikekivikoski/pen/zqEdBz
    

    View Slide

80. :placeholder-shown
    http://caniuse.com
    

    View Slide

81. Layout
    

    View Slide

82. :first-child
    Styles applied when the element is the first child element
    of its parent.
    selector:first-child{
    property: value;
    }
    

    View Slide

83. :first-child
    p:first-child {
    color: #E3BB33;
    }
    
    Welcome to :first-child's demo. This
    is a leading paragraph.
    This ends our introduction and begins
    our hero's story.
    
    http://codepen.io/mikekivikoski/pen/zqEYLo
    

    View Slide

84. :first-child
    p:first-child {
    color: #E3BB33;
    }
    http://codepen.io/mikekivikoski/pen/zqEYLo
    

    View Slide

85. :last-child
    Styles applied when the element is the last child element
    of its parent.
    selector:last-child{
    property: value;
    }
    

    View Slide

86. :last-child
    p:last-child {
    font-size: 0.8em;
    font-style: italic;
    }
    
    Welcome to :last-child's demo.
    This is some legal or footnote
    copy.
    
    http://codepen.io/mikekivikoski/pen/BKwaXe
    

    View Slide

87. :last-child
    p:last-child {
    font-size: 0.8em;
    font-style: italic;
    }
    http://codepen.io/mikekivikoski/pen/BKwaXe/
    

    View Slide

88. :only-child
    Styles applied to any element that is the only child 

    of its parent
    selector:only-child{
    property: value;
    }
    

    View Slide

89. :only-child
    div{ … width: 50%;}
    div:only-child{
    background: #73E3FC;
    width: 100%;
    }
    
    
    Story 1
    
    
    Story 2
    
    
    
    
    Story 1
    
    
    http://codepen.io/mikekivikoski/pen/wGrBNW
    

    View Slide

90. :only-child
    http://codepen.io/mikekivikoski/pen/wGrBNW
    div{ … width: 50%;}
    div:only-child{
    background: #73E3FC;
    width: 100%;
    }
    

    View Slide

91. :first-of-type
    Styles applied to the first child, of a particular type,
    within its parent.
    selector:first-of-type{
    property: value;
    }
    

    View Slide

92. :first-of-type
    p:first-of-type {
    color: #E3BB33;
    }
    
    Headline for First of Type
    Welcome to :first-child's demo. This
    is a leading paragraph.
    This ends our introduction and begins
    our hero's story.
    
    http://codepen.io/mikekivikoski/pen/LNzENm
    

    View Slide

93. :first-of-type
    p:first-of-type {
    color: #E3BB33;
    font-size: 1.5em;
    }
    http://codepen.io/mikekivikoski/pen/LNzENm
    

    View Slide

94. :last-of-type
    Styles applied to the last child, of a particular type,
    within its parent.
    selector:last-of-type{
    property: value;
    }
    

    View Slide

95. :last-of-type
    p:last-of-type {
    font-size: 0.8em;
    font-style: italic;
    }
    
    Welcome to :last-child's demo.
    This is some legal or footnote
    copy.
    CTA link
    
    http://codepen.io/mikekivikoski/pen/GZMgzg/
    

    View Slide

96. :last-of-type
    p:last-of-type {
    font-size: 0.8em;
    font-style: italic;
    }
    http://codepen.io/mikekivikoski/pen/GZMgzg/
    

    View Slide

97. :only-of-type
    Styles applied to the only child, of a particular type,
    within its parent.
    selector:only-of-type{
    property: value;
    }
    

    View Slide

98. :only-of-type
    div{ … width: 50%;}
    div:only-of-type{
    background: #73E3FC;
    width: 100%;
    }
    
    
    Story 1
    
    
    Story 2
    
    
    
    
    Story 1
    
    Caption
    
    http://codepen.io/mikekivikoski/pen/VaMLzv
    

    View Slide

99. :only-of-type
    http://codepen.io/mikekivikoski/pen/VaMLzv
    div{ … width: 50%;}
    div:only-of-type{
    background: #73E3FC;
    width: 100%;
    }
    

    View Slide

100. :only-of-type
     div{ … width: 100%;}
     div:not(:only-of-type){
     width: 50%;
     }
     
     
     Story 1
     
     
     Story 2
     
     
     
     
     Story 1
     
     Caption
     
     

     View Slide

101. :nth-child(x)
     Styles applied to selector(s) based on their source order.
     selector:nth-child(x){
     property: value;
     }
     

     View Slide

102. :nth-child(3)
     li:nth-child(3) {
     background: #73E3FC;
     }
     http://codepen.io/mikekivikoski/pen/VarxYr
     
     One
     Two
     Three
     Four
     Five
     
     

     View Slide

103. :nth-child(odd)
     li:nth-child(odd) {
     background: #73E3FC;
     }
     http://codepen.io/mikekivikoski/pen/VarxYr
     
     One
     Two
     Three
     Four
     Five
     
     

     View Slide

104. :nth-child(even)
     li:nth-child(even) {
     background: #73E3FC;
     }
     http://codepen.io/mikekivikoski/pen/ONOozG?editors=1100
     
     One
     Two
     Three
     Four
     Five
     
     

     View Slide

105. :nth-child(Xn)
     n value starts at 0
     increments by 1
     http://codepen.io/mikekivikoski/pen/yOPxqJ
     n = 0
     n = 1
     n = 2
     etc…
     

     View Slide

106. :nth-child(3n)
     (3n) = 3 * 0 = 0
     (3n) = 3 * 1 = 3
     (3n) = 3 * 2 = 6
     etc…
     http://codepen.io/mikekivikoski/pen/yOPxqJ
     

     View Slide

107. :nth-child(3n)
     li:nth-child(3n) {
     background: #73E3FC;
     }
     http://codepen.io/mikekivikoski/pen/yOPxqJ
     
     One
     Two
     Three
     Four
     Five
     Six
     Seven
     
     

     View Slide

108. :nth-child(3n+2)
     li:nth-child(3n+2) {
     background: #73E3FC;
     }
     http://codepen.io/mikekivikoski/pen/XdzPoa
     
     One
     Two
     Three
     Four
     Five
     Six
     Seven
     
     

     View Slide

109. :nth-child(3n + 2)
     (3n + 2) = (3 * 0) + 2 = 2
     (3n + 2) = (3 * 1) + 2 = 5
     (3n + 2) = (3 * 2) + 2 = 8
     etc…
     http://codepen.io/mikekivikoski/pen/yOPxqJ
     

     View Slide

110. :nth-child(5n-3)
     li:nth-child(5n-3) {
     background: #73E3FC;
     }
     http://codepen.io/mikekivikoski/pen/NNwLoq
     
     One
     Two
     Three
     Four
     Five
     Six
     Seven
     
     

     View Slide

111. :nth-child(n+5)
     li:nth-child(n+5) {
     background: #73E3FC;
     }
     http://codepen.io/mikekivikoski/pen/WwXgmQ
     
     One
     Two
     Three
     Four
     Five
     Six
     Seven
     
     

     View Slide

112. :nth-child(-n+4)
     li:nth-child(-n+4) {
     background: #73E3FC;
     }
     http://codepen.io/mikekivikoski/pen/VarGgE
     
     One
     Two
     Three
     Four
     Five
     Six
     Seven
     
     

     View Slide

113. :nth-child(n+2):nth-child(-n+6)
     li:nth-child(n+2):nth-child(-n+6) {
     background: #73E3FC;
     }
     http://codepen.io/mikekivikoski/pen/vGWzPb
     

     View Slide

114. range with even
     li:nth-child(n+3):nth-child(even):nth-
     child(-n+6) {
     background: #73E3FC;
     }
     http://codepen.io/mikekivikoski/pen/vGWzPb
     

     View Slide

115. :nth-last-child(n)
     Styles applied to selector(s) based on their source order
     starting from the bottom of the source order.
     selector:nth-last-child(n){
     property: value;
     }
     

     View Slide

116. :nth-last-child(3)
     li:nth—last-child(3){
     background: #73E3FC;
     }
     http://codepen.io/mikekivikoski/pen/KzyGKN
     
     One
     Two
     Three
     Four
     Five
     Six
     Seven
     
     

     View Slide

117. Quantity Query
     li:nth—last-child(7):first-child{
     background: #73E3FC;
     }
     http://codepen.io/mikekivikoski/pen/mPqzdZ/
     
     OneTwoThree
     FourFiveSixSeven
     
     

     View Slide

118. Quantity Query
     li:nth—last-child(7):first-child,
     li:nth—last-child(7):first-child ~ li{
     background: #73E3FC;
     }
     
     On
     Tw
     Th
     Fo
     Fi
     Si
     Se
     
     

     View Slide

119. Quantity Query
     li:nth—last-child(n+5){
     background: #73E3FC;
     }
     Styles applied when there are minimum 5 elements.
     http://codepen.io/mkivikoski/pen/pbKXoW
     

     View Slide

120. :nth-of-type(n)
     Styles applied to selector(s) based on their source order
     and element type.
     selector:nth-of—type(n){
     property: value;
     }
     

     View Slide

121. :nth-last-of-type(n)
     Styles applied to selector(s) based on their source order
     and element type, starting with bottom of source order.
     selector:nth-last-of—type(n){
     property: value;
     }
     

     View Slide

122. :target
     Styles applied to the active element that is targeted with a
     fragment identifier in the URL.
     selector:target{
     property: value;
     }
     

     View Slide

123. :target
     div{ display: none; }
     div:target{
     display: block;
     }
     Services
     
     

     View Slide

124. :target
     

     View Slide

125. :root
     Styles applied to the highest level parent element.
     :root{
     property: value;
     }
     

     View Slide

126. :empty
     Styles are applied to elements that have no children or
     whitespace.
     selector:empty{
     property: value;
     }
     

     View Slide

127. :empty
     div:empty{
     background: #E3BB33;
     }
     
     Hello world
     
     
     
     codepen.io/mikekivikoski/pen/xVXdBx
     

     View Slide

128. :empty
     div:empty{
     background: #E3BB33;
     }
     http://codepen.io/mikekivikoski/pen/xVXdBx
     

     View Slide

129. In the future
     

     View Slide

130. :scope
     Styles applied within parent element of scoped HTML.
     :scope{
     property: value;
     }
     

     View Slide

131. :scope
     
     <br/>:scope { background-color: lime; }<br/>
     Inside scope.
     
     
     Outside scope.
     
     

     View Slide

132. :scope
     https://developer.mozilla.org/en-US/docs/Web/CSS/:scope
     

     View Slide

133. :has(s1)
     The relational pseudo-class represents elements whose
     relative scope selector match when evaluated absolute.
     selector:has(s1){
     property: value;
     }
     http://css4-selectors.com/selector/css4/relational-pseudo-class/
     

     View Slide

134. :not(s1, s2)
     Allow multiple selectors in the negation :not class.
     selector:not(s1, s2){
     property: value;
     }
     http://css4-selectors.com/selector/css4/negation-pseudo-class/
     

     View Slide

135. :not(s1, s2)
     a:not(
     [href*='yourdomain.com'],
     [href^='#'],
     [href^='/']
     )::after {
     content: "\2192";
     }
     
     To another site!
     
     

     View Slide

136. https://twitter.com/g16n/status/
     718093920341725184
     

     View Slide

137. :matches(s1, s2)
     Takes as an argument a selector list to create sets of
     selectors by instituting groups which match all 

     included selectors.
     selector:matches(s1, s2){
     property: value;
     }
     http://css4-selectors.com/selector/css4/matches-any-pseudo-class/
     

     View Slide

138. :matches(s1, s2)
     :matches(section, article, aside) h1 {
     color: red;
     }
     // is the same as
     section h1, article h1, aside h1 {
     color: red;
     }
     http://css4-selectors.com/selector/css4/matches-any-pseudo-class/
     

     View Slide

139. :local-link
     Styles website-internal links with ability to style specific
     depths of links.
     :local-link,
     :local-link(n){
     property: value;
     }
     http://css4-selectors.com/selector/css4/local-link-pseudo-class/
     

     View Slide

140. :local-link
     /* http://example.com/link(s) */
     :local-link(0) {}
     /* http://example.com/year/link(s) */
     :local-link(1) {}
     /* http://example.com/year/month/link(s) */
     :local-link(2) {}
     http://css4-selectors.com/selector/css4/local-link-pseudo-class/
     

     View Slide

141. :local-link
     a:not(:local-link) {
     content: "\2192";
     }
     http://css4-selectors.com/selector/css4/local-link-pseudo-class/
     

     View Slide

142. :focus-within
     :focus-within{
     property: value;
     }
     Style elements that receive focus and their 

     parent element.
     

     View Slide

143. :focus-within
     :focus-within{
     border: 10px solid #E3BB33;
     }
     http://codepen.io/mikekivikoski/pen/jApmjy
     
     
     
     

     View Slide

144. Some others
     :nth-match(an+b)
     :nth-last-match(an+b)
     :column(s1)
     :nth-column(an+b)
     :nth-last-column(an+b)
     :blank
     :dir(direction)
     :any-link
     :lang(*-language)
     :drop
     :drop(active)
     :drop(valid)
     :drop(invalid)
     :current
     :current(s1[, s2, …])
     :past
     :past(s1[, s2, …])
     :future
     :future(s1[, s2, …])
     :fullscreen
     :user-error
     ::spelling-error
     ::grammar-error
     ::marker
     

     View Slide

145. Thanks!
     Resources
     developer.mozilla.org, w3schools, css4-selectors, css-tricks, caniuse,
     quantity-queries-for-css, nthmaster.com, Pseudo and pseudon’t
     Mike Kivikoski, @mkivikoski
     

     View Slide