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

9d8b4a29d7defdd6a9aafc349de92972?s=128

Mike Kivikoski

April 06, 2016
Tweet

Transcript

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

  2. Warning These examples are for demo and may not be

    the best use case for your application due to maintainability, performance and specificity.
  3. :classes vs ::elements

  4. :classes vs ::elements 0010 0001

  5. Let’s Begin

  6. :link Styles applied on links that a user has not

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

    a:visited{ property: value; }
  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
  9. :hover Styles applied when user mouses over an element. selector:hover{

    property: value; }
  10. :hover a:hover { background: #E3BB33; } <a href="#hello">hello</a>

  11. :focus Styles applied when an element has received focus via

    keyboard or mouse. selector:focus{ property: value; }
  12. :focus a:focus { color: #73E3FC; } <a href="#hello">hello< <a href="#folks">folks!

    <a href="#how">How</a> <a href="#goes">goes?</
  13. :focus & :hover a:focus, a:hover { color: #73E3FC; } <a

    href="#hello">hello< <a href="#folks">folks! <a href="#how">How</a> <a href="#goes">goes?</
  14. :active Styles applied when user activates an element. selector:active{ property:

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

  16. Content

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

    
 document language. :lang(language){ property: value; } selector:lang(language){ property: value; }
  18. :lang(language) :lang(en) { color: #E3BB33; } :lang(es) { background: #E3BB33;

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

  20. ::after Matches a virtual last child of the selected element.

    selector::after{ property: value; }
  21. ::after div::after { content: "You’re great!"; } <div> Hello there!

    </div> http://codepen.io/mikekivikoski/pen/dMVyPN
  22. ::after div::after { content: attr(data-complement); } <div data-complement="You’re great!"> Hello

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

  24. ::before Matches a virtual first child of the selected element.

    selector::before{ property: value; }
  25. ::before li::before { content: "\1F355"; //pizza! } <ul> <li>One</li> <li>Two</li>

    <li>Three</li> </ul> http://codepen.io/mikekivikoski/pen/EKwxyP
  26. a.singlediv.com element:pseudo { property: value; }

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


    the specified selector. selector::first-letter{ property: value; }
  28. ::first-letter p::first-letter{ font-size: 2em; } <p>Bacon ipsum dolor amet shankle

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

  30. ::first-line Styles are applied to only the first line of

    an element. selector::first-line{ property: value; }
  31. ::first-line p::first-line{ font-variant: small-caps; } <p>Bacon ipsum dolor amet shankle

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

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

  34. ::selection Styles are applied to elements that have been highlighted

    with a mouse. selector::selection{ property: value; }
  35. ::selection p::selection{ color: #73E3FC; } <p>Bacon ipsum dolor amet shankle

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

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

  38. Negation

  39. :not(s) Is a negation pseudo class accepting a simple selector

    as an argument. selector:not(s){ property: value; }
  40. :not(s) li:not(:last-child){ color: #E3BB33; } <li>First LI</li> <li>Active LI</li> <li>Third

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

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

    [href^='/'] )
 ::after { content: "\2192"; } <a href="http://anothersite.com"> To another site! </a>
  43. Forms

  44. :checked Styles applied to radio, checkbox or option element that

    is checked to an on state. selector:checked{ property: value; }
  45. :checked input:checked + label{ color: #E3BB33; } <input type="checkbox"> <label>:checkbox

    demo label</label> http://codepen.io/mikekivikoski/pen/YqrXvW
  46. :disabled Styles applied to a form input that is disabled,

    and unable to accept focus or content input. selector:disabled{ property: value; }
  47. :disabled input:disabled{ background: #E3BB33; } <input type="text" /> <input type="text"

    disabled /> <input type="text" /> http://codepen.io/mikekivikoski/pen/WwXBpo
  48. :disabled input:disabled{ background: #E3BB33; } http://codepen.io/mikekivikoski/pen/WwXBpo

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

    
 by a user. selector:read-only{ property: value; }
  50. :read-only :read-only{ background: #E3BB33; } <input type="text" /> <input …

    value="123 Main St" readonly /> <input type="text" /> http://codepen.io/mikekivikoski/details/Rajddj/
  51. :read-only :read-only{ background: #E3BB33; } http://codepen.io/mikekivikoski/details/Rajddj/

  52. :read-write Styles applied when an element is writeable by a

    user. :read-write, selector:read-write{ property: value; }
  53. :read-write :read-write{ background: #E3BB33; } <input … value="123 Main St"

    readonly /> <input type="text" /> <div contenteditable>You can edit me!</div> http://codepen.io/mikekivikoski/pen/JXOzgb
  54. :read-write https://developer.mozilla.org/en-US/docs/Web/CSS/:read-write

  55. :valid Styles applied to form elements with a value that

    validates according to the element's settings. selector:valid{ property: value; }
  56. :valid input:valid{ background: #E3BB33; } <input type="email" /> http://codepen.io/mikekivikoski/pen/reGzaj

  57. http://caniuse.com :valid

  58. :invalid Styles applied to form elements with a value that

    doesn’t validate according to the element's settings. selector:invalid{ property: value; }
  59. :invalid input:invalid{ background: red; } <input type="email" /> http://codepen.io/mikekivikoski/pen/GZMvZz

  60. http://caniuse.com :invalid

  61. :invalid and :valid input:valid:not(:focus){ background: green; } input:invalid:not(:focus){ background: red;

    } http://codepen.io/mikekivikoski/pen/zqEdBz
  62. :required Styles applied to form elements that have 
 a

    required attribute. selector:required{ property: value; }
  63. :required input:required{ border: 10px solid #E3BB33; } <input type="email" required

    /> http://codepen.io/mikekivikoski/pen/NNavgq
  64. http://caniuse.com :required

  65. :optional Styles applied to form elements that don’t have a

    required attribute. selector:optional{ property: value; }
  66. :optional input:optional{ } <input type="email" required/> <input type="text" /> http://codepen.io/mikekivikoski/pen/BKmbvV

  67. :indeterminate Styles applied to a checkbox with a javascript based

    indeterminate state or an empty progress bar. selector:indeterminate{ property: value; }
  68. :indeterminate http://codepen.io/mikekivikoski/pen/repNmb input:indeterminate + label{ background: #E3BB33; }

  69. :in-range Styles applied to input elements when their value is

    inside the range specified as being acceptable. selector:in-range{ property: value; }
  70. :in-range input:in-range{ border: 5px solid #E3BB33; } <input type="number" min="5"

    max="10"> http://codepen.io/mikekivikoski/pen/WwXRYP
  71. :in-range http://caniuse.com

  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; }
  73. :out-of-range http://caniuse.com

  74. ::placeholder Styles applied to the placeholder content within an input

    element. selector::placeholder{ property: value; }
  75. ::placeholder ::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder { color: #E3BB33;} <input type="text" placeholder="throw

    your hands in the air" />
  76. ::placeholder http://caniuse.com

  77. :placeholder-shown Styles applied to the actual input with placeholder text.

    selector:placeholder-shown{ property: value; }
  78. :placeholder-shown input:placeholder-shown{ border: 5px solid #E3BB33; } <input type="text" placeholder="throw

    your hands in the air" /> http://codepen.io/mikekivikoski/pen/ZWaLNG
  79. css-tricks.com/form- validation-ux-html-css http://codepen.io/mikekivikoski/pen/zqEdBz

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

  81. Layout

  82. :first-child Styles applied when the element is the first child

    element of its parent. selector:first-child{ property: value; }
  83. :first-child p:first-child { color: #E3BB33; } <div> <p>Welcome to :first-child's

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

  85. :last-child Styles applied when the element is the last child

    element of its parent. selector:last-child{ property: value; }
  86. :last-child p:last-child { font-size: 0.8em; font-style: italic; } <div> <p>Welcome

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

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

    child 
 of its parent selector:only-child{ property: value; }
  89. :only-child div{ … width: 50%;} div:only-child{ background: #73E3FC; width: 100%;

    } <section> <div> <h2>Story 1</h2> </div> <div> <h2>Story 2</h2> </div> </section> <section> <div> <h2>Story 1</h2> </div> </section> http://codepen.io/mikekivikoski/pen/wGrBNW
  90. :only-child http://codepen.io/mikekivikoski/pen/wGrBNW div{ … width: 50%;} div:only-child{ background: #73E3FC; width:

    100%; }
  91. :first-of-type Styles applied to the first child, of a particular

    type, within its parent. selector:first-of-type{ property: value; }
  92. :first-of-type p:first-of-type { color: #E3BB33; } <div> <h1>Headline for First

    of Type</h1> <p>Welcome to :first-child's demo. This is a leading paragraph.</p> <p>This ends our introduction and begins our hero's story.</p> </div> http://codepen.io/mikekivikoski/pen/LNzENm
  93. :first-of-type p:first-of-type { color: #E3BB33; font-size: 1.5em; } http://codepen.io/mikekivikoski/pen/LNzENm

  94. :last-of-type Styles applied to the last child, of a particular

    type, within its parent. selector:last-of-type{ property: value; }
  95. :last-of-type p:last-of-type { font-size: 0.8em; font-style: italic; } <div> <p>Welcome

    to :last-child's demo.</p> <p>This is some legal or footnote copy.</p> <a href="#cta-link">CTA link</a> </div> http://codepen.io/mikekivikoski/pen/GZMgzg/
  96. :last-of-type p:last-of-type { font-size: 0.8em; font-style: italic; } http://codepen.io/mikekivikoski/pen/GZMgzg/

  97. :only-of-type Styles applied to the only child, of a particular

    type, within its parent. selector:only-of-type{ property: value; }
  98. :only-of-type div{ … width: 50%;} div:only-of-type{ background: #73E3FC; width: 100%;

    } <section> <div> <h2>Story 1</h2> </div> <div> <h2>Story 2</h2> </div> </section> <section> <div> <h2>Story 1</h2> </div> <p>Caption</p> </section> http://codepen.io/mikekivikoski/pen/VaMLzv
  99. :only-of-type http://codepen.io/mikekivikoski/pen/VaMLzv div{ … width: 50%;} div:only-of-type{ background: #73E3FC; width:

    100%; }
  100. :only-of-type div{ … width: 100%;} div:not(:only-of-type){ width: 50%; } <section>

    <div> <h2>Story 1</h2> </div> <div> <h2>Story 2</h2> </div> </section> <section> <div> <h2>Story 1</h2> </div> <p>Caption</p> </section>
  101. :nth-child(x) Styles applied to selector(s) based on their source order.

    selector:nth-child(x){ property: value; }
  102. :nth-child(3) li:nth-child(3) { background: #73E3FC; } http://codepen.io/mikekivikoski/pen/VarxYr <ul> <li>One</li> <li>Two</li>

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

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

    <li>Three</li> <li>Four</li> <li>Five</li> </ul>
  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…
  106. :nth-child(3n) (3n) = 3 * 0 = 0 (3n) =

    3 * 1 = 3 (3n) = 3 * 2 = 6 etc… http://codepen.io/mikekivikoski/pen/yOPxqJ
  107. :nth-child(3n) li:nth-child(3n) { background: #73E3FC; } http://codepen.io/mikekivikoski/pen/yOPxqJ <ul> <li>One</li> <li>Two</li>

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

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

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

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

    <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> <li>Seven</li> </ul>
  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

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

  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; }
  116. :nth-last-child(3) li:nth—last-child(3){ background: #73E3FC; } http://codepen.io/mikekivikoski/pen/KzyGKN <ul> <li>One</li> <li>Two</li> <li>Three</li>

    <li>Four</li> <li>Five</li> <li>Six</li> <li>Seven</li> </ul>
  117. Quantity Query li:nth—last-child(7):first-child{ background: #73E3FC; } http://codepen.io/mikekivikoski/pen/mPqzdZ/ <ul> <li>One</li <li>Two</li

    <li>Three</ <li>Four</l <li>Five</l <li>Six</li <li>Seven</ </ul>
  118. Quantity Query li:nth—last-child(7):first-child, li:nth—last-child(7):first-child ~ li{ background: #73E3FC; } <ul>

    <li>On <li>Tw <li>Th <li>Fo <li>Fi <li>Si <li>Se </ul>
  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
  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; }
  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; }
  122. :target Styles applied to the active element that is targeted

    with a fragment identifier in the URL. selector:target{ property: value; }
  123. :target div{ display: none; } div:target{ display: block; } <a

    href="#services">Services</a> <div id="services"></div>
  124. :target

  125. :root Styles applied to the highest level parent element. :root{

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

    or whitespace. selector:empty{ property: value; }
  127. :empty div:empty{ background: #E3BB33; } <div> Hello world </div> <div></div>

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

  129. In the future

  130. :scope Styles applied within parent element of scoped HTML. :scope{

    property: value; }
  131. :scope <section> <style scoped> :scope { background-color: lime; } </style>

    <p>Inside scope.</p> </section> <section> <p>Outside scope.</p> </section>
  132. :scope https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

  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/
  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/
  135. :not(s1, s2) a:not( [href*='yourdomain.com'], [href^='#'], [href^='/'] )::after { content: "\2192";

    } <a href="http://anothersite.com"> To another site! </a>
  136. https://twitter.com/g16n/status/ 718093920341725184

  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/
  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/
  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/
  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/
  141. :local-link a:not(:local-link) { content: "\2192"; } http://css4-selectors.com/selector/css4/local-link-pseudo-class/

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

    and their 
 parent element.
  143. :focus-within :focus-within{ border: 10px solid #E3BB33; } http://codepen.io/mikekivikoski/pen/jApmjy <div> <input

    type=“text"/> </div>
  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
  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