Slide 1
Slide 1 text
CSS Pseudo
:hover, :active, & beyond
Mike Kivikoski, @mkivikoski
Slide 2
Slide 2 text
Warning
These examples are for demo and may
not be the best use case for your
application due to maintainability,
performance and specificity.
Slide 3
Slide 3 text
:classes vs ::elements
Slide 4
Slide 4 text
:classes vs ::elements
0010 0001
Slide 5
Slide 5 text
Let’s Begin
Slide 6
Slide 6 text
:link
Styles applied on links that a user has not visited.
a:link{
property: value;
}
Slide 7
Slide 7 text
:visited
Styles applied on links that a user has visited.
a:visited{
property: value;
}
Slide 8
Slide 8 text
:visited
For privacy reasons, :visited only accepts
color,
background-color,
border-color,
outline-color,
and the color parts of the fill and stroke properties
Slide 9
Slide 9 text
:hover
Styles applied when user mouses over an element.
selector:hover{
property: value;
}
Slide 11
Slide 11 text
:focus
Styles applied when an element has received focus via
keyboard or mouse.
selector:focus{
property: value;
}
Slide 14
Slide 14 text
:active
Styles applied when user activates an element.
selector:active{
property: value;
}
Slide 15
Slide 15 text
:active
button:active {
background: #CE6FD3;
}
Slide 16
Slide 16 text
Content
Slide 17
Slide 17 text
:lang(language)
Styles applied with match of elements based on the
document language.
:lang(language){
property: value;
}
selector:lang(language){
property: value;
}
Slide 18
Slide 18 text
: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>
Slide 19
Slide 19 text
:lang(language)
http://codepen.io/mikekivikoski/pen/KzXPJG
Slide 20
Slide 20 text
::after
Matches a virtual last child of the selected element.
selector::after{
property: value;
}
Slide 21
Slide 21 text
::after
div::after {
content: "You’re great!";
}
Hello there!
http://codepen.io/mikekivikoski/pen/dMVyPN
Slide 22
Slide 22 text
::after
div::after {
content: attr(data-complement);
}
Hello there!
http://codepen.io/mikekivikoski/pen/VaMwvb
Slide 23
Slide 23 text
::after
a.external::after,
a[target="_blank"]::after {
content: "\2192"; //arrow
}
http://codepen.io/mikekivikoski/pen/jqaRLO
Slide 24
Slide 24 text
::before
Matches a virtual first child of the selected element.
selector::before{
property: value;
}
Slide 25
Slide 25 text
::before
li::before {
content: "\1F355"; //pizza!
}
- One
- Two
- Three
Slide 26
Slide 26 text
a.singlediv.com
element:pseudo {
property: value;
}
Slide 27
Slide 27 text
::first-letter
Styles are applied to the first letter of
the specified selector.
selector::first-letter{
property: value;
}
Slide 28
Slide 28 text
::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/mPBJgwSlide 29
Slide 29 text
::first-letter
p::first-letter{
font-size: 2em;
}
http://codepen.io/mikekivikoski/pen/mPBJgw
Slide 30
Slide 30 text
::first-line
Styles are applied to only the first line of an element.
selector::first-line{
property: value;
}
Slide 31
Slide 31 text
::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/XdemrrSlide 32
Slide 32 text
::first-line
p::first-line{
font-variant: small-caps;
}
http://codepen.io/mikekivikoski/pen/Xdemrr
Slide 33
Slide 33 text
::first-line
http://codepen.io/mikekivikoski/pen/Xdemrr
Slide 34
Slide 34 text
::selection
Styles are applied to elements that have been highlighted
with a mouse.
selector::selection{
property: value;
}
Slide 35
Slide 35 text
::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/eZGvKGSlide 36
Slide 36 text
::selection
p::selection{
color: #73E3FC;
}
http://codepen.io/mikekivikoski/pen/eZGvKG
Slide 37
Slide 37 text
http://caniuse.com
::selection
Slide 38
Slide 38 text
Negation
Slide 39
Slide 39 text
:not(s)
Is a negation pseudo class accepting a simple selector as
an argument.
selector:not(s){
property: value;
}
Slide 40
Slide 40 text
:not(s)
li:not(:last-child){
color: #E3BB33;
}
First LI
Active LI
Third LI
Last LI
http://codepen.io/mikekivikoski/pen/YqrQzN
Slide 41
Slide 41 text
:not(s)
li:not(:last-child){
color: #E3BB33;
}
http://codepen.io/mikekivikoski/pen/YqrQzN
Slide 42
Slide 42 text
:not and ::after
a:not( [href*='yourdomain.com'] )
:not( [href^='#'] )
:not( [href^='/'] )
::after {
content: "\2192";
}
To another site!
Slide 43
Slide 43 text
Forms
Slide 44
Slide 44 text
:checked
Styles applied to radio, checkbox or option element that
is checked to an on state.
selector:checked{
property: value;
}
Slide 45
Slide 45 text
:checked
input:checked + label{
color: #E3BB33;
}
:checkbox demo label
http://codepen.io/mikekivikoski/pen/YqrXvW
Slide 46
Slide 46 text
:disabled
Styles applied to a form input that is disabled, and unable
to accept focus or content input.
selector:disabled{
property: value;
}
Slide 47
Slide 47 text
:disabled
input:disabled{
background: #E3BB33;
}
http://codepen.io/mikekivikoski/pen/WwXBpo
Slide 48
Slide 48 text
:disabled
input:disabled{
background: #E3BB33;
}
http://codepen.io/mikekivikoski/pen/WwXBpo
Slide 49
Slide 49 text
:read-only
Styles applied to an element that is not writeable
by a user.
selector:read-only{
property: value;
}
Slide 50
Slide 50 text
:read-only
:read-only{
background: #E3BB33;
}
http://codepen.io/mikekivikoski/details/Rajddj/
Slide 51
Slide 51 text
:read-only
:read-only{
background: #E3BB33;
}
http://codepen.io/mikekivikoski/details/Rajddj/
Slide 52
Slide 52 text
:read-write
Styles applied when an element is writeable by a user.
:read-write,
selector:read-write{
property: value;
}
Slide 53
Slide 53 text
:read-write
:read-write{
background: #E3BB33;
}
You can edit me!
http://codepen.io/mikekivikoski/pen/JXOzgb
Slide 54
Slide 54 text
:read-write
https://developer.mozilla.org/en-US/docs/Web/CSS/:read-write
Slide 55
Slide 55 text
:valid
Styles applied to form elements with a value that
validates according to the element's settings.
selector:valid{
property: value;
}
Slide 56
Slide 56 text
:valid
input:valid{
background: #E3BB33;
}
http://codepen.io/mikekivikoski/pen/reGzaj
Slide 57
Slide 57 text
http://caniuse.com
:valid
Slide 58
Slide 58 text
:invalid
Styles applied to form elements with a value that doesn’t
validate according to the element's settings.
selector:invalid{
property: value;
}
Slide 59
Slide 59 text
:invalid
input:invalid{
background: red;
}
http://codepen.io/mikekivikoski/pen/GZMvZz
Slide 60
Slide 60 text
http://caniuse.com
:invalid
Slide 61
Slide 61 text
:invalid and :valid
input:valid:not(:focus){
background: green;
}
input:invalid:not(:focus){
background: red;
}
http://codepen.io/mikekivikoski/pen/zqEdBz
Slide 62
Slide 62 text
:required
Styles applied to form elements that have
a required attribute.
selector:required{
property: value;
}
Slide 63
Slide 63 text
:required
input:required{
border: 10px solid #E3BB33;
}
http://codepen.io/mikekivikoski/pen/NNavgq
Slide 64
Slide 64 text
http://caniuse.com
:required
Slide 65
Slide 65 text
:optional
Styles applied to form elements that don’t have a
required attribute.
selector:optional{
property: value;
}
Slide 66
Slide 66 text
:optional
input:optional{
}
http://codepen.io/mikekivikoski/pen/BKmbvV
Slide 67
Slide 67 text
:indeterminate
Styles applied to a checkbox with a javascript based
indeterminate state or an empty progress bar.
selector:indeterminate{
property: value;
}
Slide 68
Slide 68 text
:indeterminate
http://codepen.io/mikekivikoski/pen/repNmb
input:indeterminate + label{
background: #E3BB33;
}
Slide 69
Slide 69 text
:in-range
Styles applied to input elements when their value is
inside the range specified as being acceptable.
selector:in-range{
property: value;
}
Slide 70
Slide 70 text
:in-range
input:in-range{
border: 5px solid #E3BB33;
}
http://codepen.io/mikekivikoski/pen/WwXRYP
Slide 71
Slide 71 text
:in-range
http://caniuse.com
Slide 72
Slide 72 text
: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;
}
Slide 73
Slide 73 text
:out-of-range
http://caniuse.com
Slide 74
Slide 74 text
::placeholder
Styles applied to the placeholder content within an input
element.
selector::placeholder{
property: value;
}
Slide 75
Slide 75 text
::placeholder
::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder
{ color: #E3BB33;}
Slide 76
Slide 76 text
::placeholder
http://caniuse.com
Slide 77
Slide 77 text
:placeholder-shown
Styles applied to the actual input with placeholder text.
selector:placeholder-shown{
property: value;
}
Slide 78
Slide 78 text
:placeholder-shown
input:placeholder-shown{
border: 5px solid #E3BB33;
}
http://codepen.io/mikekivikoski/pen/ZWaLNG
Slide 79
Slide 79 text
css-tricks.com/form-
validation-ux-html-css
http://codepen.io/mikekivikoski/pen/zqEdBz
Slide 80
Slide 80 text
:placeholder-shown
http://caniuse.com
Slide 81
Slide 81 text
Layout
Slide 82
Slide 82 text
:first-child
Styles applied when the element is the first child element
of its parent.
selector:first-child{
property: value;
}
Slide 83
Slide 83 text
:first-child
p:first-child {
color: #E3BB33;
}
http://codepen.io/mikekivikoski/pen/zqEYLo
Welcome to :first-child's demo. This is a leading paragraph.
This ends our introduction and begins our hero's story.
Slide 84
Slide 84 text
:first-child
p:first-child {
color: #E3BB33;
}
http://codepen.io/mikekivikoski/pen/zqEYLo
Slide 85
Slide 85 text
:last-child
Styles applied when the element is the last child element
of its parent.
selector:last-child{
property: value;
}
Slide 86
Slide 86 text
:last-child
p:last-child {
font-size: 0.8em;
font-style: italic;
}
http://codepen.io/mikekivikoski/pen/BKwaXe
Welcome to :last-child's demo.
This is some legal or footnote copy.
Slide 87
Slide 87 text
:last-child
p:last-child {
font-size: 0.8em;
font-style: italic;
}
http://codepen.io/mikekivikoski/pen/BKwaXe/
Slide 88
Slide 88 text
:only-child
Styles applied to any element that is the only child
of its parent
selector:only-child{
property: value;
}
Slide 89
Slide 89 text
:only-child
div{ … width: 50%;}
div:only-child{
background: #73E3FC;
width: 100%;
}
http://codepen.io/mikekivikoski/pen/wGrBNW
Story 1
Story 2
Story 1
Slide 90
Slide 90 text
:only-child
http://codepen.io/mikekivikoski/pen/wGrBNW
div{ … width: 50%;}
div:only-child{
background: #73E3FC;
width: 100%;
}
Slide 91
Slide 91 text
:first-of-type
Styles applied to the first child, of a particular type,
within its parent.
selector:first-of-type{
property: value;
}
Slide 92
Slide 92 text
:first-of-type
p:first-of-type {
color: #E3BB33;
}
http://codepen.io/mikekivikoski/pen/LNzENm
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.
Slide 93
Slide 93 text
:first-of-type
p:first-of-type {
color: #E3BB33;
font-size: 1.5em;
}
http://codepen.io/mikekivikoski/pen/LNzENm
Slide 94
Slide 94 text
:last-of-type
Styles applied to the last child, of a particular type,
within its parent.
selector:last-of-type{
property: value;
}
Slide 95
Slide 95 text
:last-of-type
p:last-of-type {
font-size: 0.8em;
font-style: italic;
}
http://codepen.io/mikekivikoski/pen/GZMgzg/
Slide 96
Slide 96 text
:last-of-type
p:last-of-type {
font-size: 0.8em;
font-style: italic;
}
http://codepen.io/mikekivikoski/pen/GZMgzg/
Slide 97
Slide 97 text
:only-of-type
Styles applied to the only child, of a particular type,
within its parent.
selector:only-of-type{
property: value;
}
Slide 98
Slide 98 text
: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/VaMLzvSlide 99
Slide 99 text
:only-of-type
http://codepen.io/mikekivikoski/pen/VaMLzv
div{ … width: 50%;}
div:only-of-type{
background: #73E3FC;
width: 100%;
}
Slide 100
Slide 100 text
:only-of-type
div{ … width: 100%;}
div:not(:only-of-type){
width: 50%;
}
Story 1
Story 2
Story 1
Caption
Slide 101
Slide 101 text
:nth-child(x)
Styles applied to selector(s) based on their source order.
selector:nth-child(x){
property: value;
}
Slide 102
Slide 102 text
:nth-child(3)
li:nth-child(3) {
background: #73E3FC;
}
http://codepen.io/mikekivikoski/pen/VarxYr
- One
- Two
- Three
- Four
- Five
Slide 103
Slide 103 text
:nth-child(odd)
li:nth-child(odd) {
background: #73E3FC;
}
http://codepen.io/mikekivikoski/pen/VarxYr
- One
- Two
- Three
- Four
- Five
Slide 104
Slide 104 text
:nth-child(even)
li:nth-child(even) {
background: #73E3FC;
}
http://codepen.io/mikekivikoski/pen/ONOozG?editors=1100
- One
- Two
- Three
- Four
- Five
Slide 105
Slide 105 text
:nth-child(Xn)
n value starts at 0
increments by 1
http://codepen.io/mikekivikoski/pen/yOPxqJ
n = 0
n = 1
n = 2
etc…
Slide 106
Slide 106 text
:nth-child(3n)
(3n) = 3 * 0 = 0
(3n) = 3 * 1 = 3
(3n) = 3 * 2 = 6
etc…
http://codepen.io/mikekivikoski/pen/yOPxqJ
Slide 107
Slide 107 text
:nth-child(3n)
li:nth-child(3n) {
background: #73E3FC;
}
http://codepen.io/mikekivikoski/pen/yOPxqJ
- One
- Two
- Three
- Four
- Five
- Six
- Seven
Slide 108
Slide 108 text
:nth-child(3n+2)
li:nth-child(3n+2) {
background: #73E3FC;
}
http://codepen.io/mikekivikoski/pen/XdzPoa
- One
- Two
- Three
- Four
- Five
- Six
- Seven
Slide 109
Slide 109 text
: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
Slide 110
Slide 110 text
:nth-child(5n-3)
li:nth-child(5n-3) {
background: #73E3FC;
}
http://codepen.io/mikekivikoski/pen/NNwLoq
- One
- Two
- Three
- Four
- Five
- Six
- Seven
Slide 111
Slide 111 text
:nth-child(n+5)
li:nth-child(n+5) {
background: #73E3FC;
}
http://codepen.io/mikekivikoski/pen/WwXgmQ
- One
- Two
- Three
- Four
- Five
- Six
- Seven
Slide 112
Slide 112 text
:nth-child(-n+4)
li:nth-child(-n+4) {
background: #73E3FC;
}
http://codepen.io/mikekivikoski/pen/VarGgE
- One
- Two
- Three
- Four
- Five
- Six
- Seven
Slide 113
Slide 113 text
: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
Slide 114
Slide 114 text
range with even
li:nth-child(n+3):nth-child(even):nth-
child(-n+6) {
background: #73E3FC;
}
http://codepen.io/mikekivikoski/pen/vGWzPb
Slide 115
Slide 115 text
: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;
}
Slide 116
Slide 116 text
:nth-last-child(3)
li:nth—last-child(3){
background: #73E3FC;
}
http://codepen.io/mikekivikoski/pen/KzyGKN
- One
- Two
- Three
- Four
- Five
- Six
- Seven
Slide 117
Slide 117 text
Quantity Query
li:nth—last-child(7):first-child{
background: #73E3FC;
}
http://codepen.io/mikekivikoski/pen/mPqzdZ/
- One TwoThree
- FourFiveSix Seven
Slide 118
Slide 118 text
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
Slide 119
Slide 119 text
Quantity Query
li:nth—last-child(n+5){
background: #73E3FC;
}
Styles applied when there are minimum 5 elements.
http://codepen.io/mkivikoski/pen/pbKXoW
Slide 120
Slide 120 text
:nth-of-type(n)
Styles applied to selector(s) based on their source order
and element type.
selector:nth-of—type(n){
property: value;
}
Slide 121
Slide 121 text
: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;
}
Slide 122
Slide 122 text
:target
Styles applied to the active element that is targeted with a
fragment identifier in the URL.
selector:target{
property: value;
}
Slide 124
Slide 124 text
:target
Slide 125
Slide 125 text
:root
Styles applied to the highest level parent element.
:root{
property: value;
}
Slide 126
Slide 126 text
:empty
Styles are applied to elements that have no children or
whitespace.
selector:empty{
property: value;
}
Slide 127
Slide 127 text
:empty
div:empty{
background: #E3BB33;
}
codepen.io/mikekivikoski/pen/xVXdBx
Hello world
Slide 128
Slide 128 text
:empty
div:empty{
background: #E3BB33;
}
http://codepen.io/mikekivikoski/pen/xVXdBx
Slide 129
Slide 129 text
In the future
Slide 130
Slide 130 text
:scope
Styles applied within parent element of scoped HTML.
:scope{
property: value;
}
Slide 131
Slide 131 text
:scope
:scope { background-color: lime; }
Inside scope.
Outside scope.
Slide 132
Slide 132 text
:scope
https://developer.mozilla.org/en-US/docs/Web/CSS/:scope
Slide 133
Slide 133 text
: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/
Slide 134
Slide 134 text
: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/
Slide 135
Slide 135 text
:not(s1, s2)
a:not(
[href*='yourdomain.com'],
[href^='#'],
[href^='/']
)::after {
content: "\2192";
}
To another site!
Slide 136
Slide 136 text
https://twitter.com/g16n/status/
718093920341725184
Slide 137
Slide 137 text
: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/
Slide 138
Slide 138 text
: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/
Slide 139
Slide 139 text
: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/
Slide 140
Slide 140 text
: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/
Slide 141
Slide 141 text
:local-link
a:not(:local-link) {
content: "\2192";
}
http://css4-selectors.com/selector/css4/local-link-pseudo-class/
Slide 142
Slide 142 text
:focus-within
:focus-within{
property: value;
}
Style elements that receive focus and their
parent element.
Slide 143
Slide 143 text
:focus-within
:focus-within{
border: 10px solid #E3BB33;
}
http://codepen.io/mikekivikoski/pen/jApmjy
Slide 144
Slide 144 text
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
Slide 145
Slide 145 text
Thanks!
Resources
developer.mozilla.org, w3schools, css4-selectors, css-tricks, caniuse,
quantity-queries-for-css, nthmaster.com, Pseudo and pseudon’t
Mike Kivikoski, @mkivikoski