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