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

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

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

3. :classes vs ::elements

4. Let’s Begin

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

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

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

8. :hover
a:hover {
color: #73E3FC;
}
<a href="#hello">hello</a>

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

10. :focus
a:focus {
color: #73E3FC;
}
<a href="#hello">hello<
<a href="#folks">folks!
<a href="#how">How</a>
<a href="#goes">goes?</

11. :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?</

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

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

14. Content

15. :lang(language)
Styles applied with match of elements based on the
document language.
:lang(language){
property: value;
}
selector:lang(language){
property: value;
}

16. :lang(language)
:lang(en) {
color: #73E3FC;
}
:lang(es) {
color: #E3BB33;
font-size: 2em;
}
http://codepen.io/mikekivikoski/pen/KzXPJG

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

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

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

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

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

22. ::before
li::before {
content: “1F355”; //pizza!
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
http://codepen.io/mikekivikoski/pen/EKwxyP

23. ::first-letter
Styles are applied to the first letter of
the specified selector.
selector::first-letter{
property: value;
}

24. ::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

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

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

27. ::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

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

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

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

31. ::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

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

33. http://caniuse.com
::selection

34. Negation

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

36. :not(s)
li:not(.active){
color: #73E3FC;
}
li:not(:last-child){
border-bottom: 1px solid;
}
<li>First LI</li>
<li class="active">Active LI</li>
<li>Third LI</li>
<li>Last LI</li> http://codepen.io/mikekivikoski/pen/YqrQzN

37. :not(s)
li:not(.active){
color: #73E3FC;
}
li:not(:last-child){
border-bottom: 1px solid;
}
http://codepen.io/mikekivikoski/pen/YqrQzN

38. :not and ::after
a:not( [href*='yourdomain.com'] )
:not( [href^='#'] )
:not( [href^='/'] )
::after {
content: "2192";
}
<a href=“http://anothersite.com">
To another site!
</a>

39. Forms

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

41. :checked
input:checked + label{
color: #73E3FC;
}
<input type="checkbox">
<label>:checkbox demo label</label>
http://codepen.io/mikekivikoski/pen/YqrXvW

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

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

44. :read-only
Styles applied to an element that is not writeable
by a user.
selector:read-only{
property: value;
}

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

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

47. :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

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

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

50. :valid
input:valid{
background: green;
}
<input type="email" />
http://codepen.io/mikekivikoski/pen/reGzaj

51. http://caniuse.com
:valid

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

53. :invalid
input:invalid{
background: red;
}
<input type="email" />
http://codepen.io/mikekivikoski/pen/GZMvZz

54. http://caniuse.com
:invalid

55. :invalid and :valid
input:valid:not(:focus){
background: green;
}
input:invalid:not(:focus){
background: red;
}
<input type="email" />
http://codepen.io/mikekivikoski/pen/zqEdBz

56. :required
Styles applied to form elements that have
a required attribute.
selector:required{
property: value;
}

57. :required
input:required{
border-left: 10px solid #E3BB33;
}
<input type=“email" required />
http://codepen.io/mikekivikoski/pen/NNavgq

58. http://caniuse.com
:required

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

60. :optional
input:optional{
border: 10px solid #ccc;
}
<input type=“email” required/>
<input type=“text” />
http://codepen.io/mikekivikoski/pen/BKmbvV

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

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

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

64. :in-range
p:in-range{
border: 5px solid green;
}
<input type="number" min="5" max="10">
http://codepen.io/mikekivikoski/pen/WwXRYP

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

66. :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;
}

67. :out-of-range
p:out-of—range{
border: 5px solid red;
}
<input type="number" min="5" max="10">
http://codepen.io/mikekivikoski/pen/WwXRYP

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

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

70. ::placeholder
::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder
{ color: #f0f;}
<input type="text" placeholder="throw your
hands in the air" />

71. ::placeholder
http://caniuse.com

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

73. :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

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

75. Layout

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

77. :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

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

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

80. :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

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

82. :only-child
Styles applied to any element that is the only child
of its parent
selector:only-child{
property: value;
}

83. :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

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

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

86. :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

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

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

89. :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</a>
</div>
http://codepen.io/mikekivikoski/pen/GZMgzg/

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

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

92. :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

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

94. :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>

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

96. :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>

97. :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>

98. :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>

99. :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>

100. :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>

101. :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>

102. :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>

103. :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>

104. :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

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

106. :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;
}

107. :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>

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

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

110. Quantity Query
li:nth—last-child(n+5){
background: #73E3FC;
}
Styles applied when there are minimum 5 elements.

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

112. :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;
}

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

114. :target
div{ display: none; }
div:target{
display: block;
}
<a href=“#services”>Services</a>
<div id=“services”></div>

115. :target

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

117. :scope
<section>
<style scoped>
:scope { background-color: lime; }
</style>
<p>Inside scope.</p>
</section>
<section>
<p>Outside scope.</p>
</section>

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

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

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

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

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

123. In the future

124. :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/

125. :has(s1)
header:has(h1) {
background-color: #E3BB33;
}
http://css4-selectors.com/selector/css4/relational-pseudo-class/

126. :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/

127. :not(s1, s2)
a:not(
[href*=‘yourdomain.com’],
[href^='#'],
[href^=‘/']
)::after {
content: "2192";
}
<a href=“http://anothersite.com">
To another site!
</a>

128. :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/

129. :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/

130. :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/

131. :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/

132. :focus-within
TODO
:local-link,
:local-link(n){
property: value;
}
http://css4-selectors.com/selector/css4/local-link-pseudo-class/

133. :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/

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

135. Thanks!
@mkivikoski

136. Resources
developer.mozilla.org, w3schools, css4-selectors, css-tricks, caniuse,
quantity-queries-for-css, nthmaster.com, Pseudo and pseudon’t

137. Pseudo Puzzle
bit.ly/pseudo-puzzle
Fork it and share with me on twitter, @mkivikoski