CSS pseudo-classes
Made with ♡ by
What is a pseudoclass?
- a magic word added to a selector that defines state of an element
- they detect if something changed
* in the content of an element
* mouse position
* history of navigator
.link:visited {
color: #bada55;
}
.link:hover {
transform: translateY(-5px);
}How do we use a pseudoclass?
.name-of-selector:name-of-pseudoclass {
/* what happens in pseudoclass, stays in pseudoclass */
border-color: #bada55;
}
.name-of-selector::before {
content: ":D";
}:pseudoclass vs ::pseudoelement
Why do we need a pseudoclass?
- to avoid jQuery spaghetti
- they keep away IE users
.link:visited {
color: #bada55;
}
.link:hover {
transform: translateY(-5px);
}Pure CSS vs JS
pros
-
stays in the same language => better code optimisation -
less dependencies -
more fun :D
cons
-
browser support -
mobile support -
not its original purpose
PURE CSS
Let's dive in!
:empty
-
applies styles when element is empty
-
element is empty when it does not have any children
-
HTML comments are not considered child elements
-
empty space is considered not empty
:placeholder-shown
-
applies styles to an input when placeholder is shown -
kind of detects if input is empty
Material design input field
vs.
:placeholder-shown && :not(:placeholder-shown)
:disabled
-
applies styles when element is disabled
-
usually applied to form elements
:enabled
-
applies styles when element is enabled
:valid
-
applies styles when type of an input element is valid
-
empty input is considered valid
:invalid
-
applies styles when type of an input element is invalid
-
when used with :required, field will be invalid if it is empty
Pure css input validation
:valid, :invalid, :placeholder-shown
:target
-
styles the element that is a target of a link
:checked
-
toggles checked state for the input type checkbox and radio buttons
:checked trick
Pure CSS multistep form with validation
Examples from every slide can be found here
👇
How to code pure CSS modal?
👩💻
.question:not(:empty) {
display: block;
}