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

CSS Pseudo

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

Mike Kivikoski

April 06, 2016
Tweet

More Decks by Mike Kivikoski

Other Decks in Technology

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