What are Pseudo-classes?
Pseudo-classes are used to target specific states of an element. By adding it to your selector, you can style elements only if they're in the state you want them to be. This lesson will go through the most commonly used ones.
Links
You've seen uses of pseudo-classes throughout your times on the web. A new link on a Google search is blue, but when you have clicked on it before, it is purple.
This can be accomplished by targetting visited and unvisited links, like so:
a:visited {
color: purple;
}
a:link {
color: blue;
}
Hover
You can apply styles to an element depending on whether or not it is currently being hovered over. Let's say you wanted to change the background color of paragraph tags if they're being hovered over.
<!DOCTYPE html>
<html>
<head>
<title>Hover</title>
<style>
p:hover {
background-color: lightgray;
}
</style>
</head>
<body>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
</body>
</html>
Focus
An element is in focus when it is selected or clicked on and/or ready for any kind of input, like a textbox or dropdown.
<!DOCTYPE html>
<html>
<head>
<title>Focus</title>
<style>
input {
margin-bottom: 1rem;
}
input:focus {
background-color: lightgreen;
}
</style>
</head>
<body>
<div><input type="number" /></div>
<div><input type="number" /></div>
<div><input type="number" /></div>
</body>
</html>
Active
The active state is enabled when the user activates an element, like when a link is currently being clicked on.
<!DOCTYPE html>
<html>
<head>
<title>Active</title>
<style>
div {
margin: 1rem 0;
}
a {
padding: 0.5rem;
}
a:active {
background-color: lightblue;
}
</style>
</head>
<body>
<div><a href="https://sabe.io">Link #1</a></div>
<div><a href="https://sabe.io">Link #2</a></div>
<div><a href="https://sabe.io">Link #3</a></div>
</body>
</html>
What are Pseudo-elements?
Pseudo-elements are similar to pseudo-classes but instead of classes you can style right away, they are instead elements that you can target.
First Child, Nth Child, and Last Child
You can target the first and last children of a tag using the first-child and last-child pseudo-classes. Target any specific child number using the nth-child pseudo-class.
<!DOCTYPE html>
<html>
<head>
<title>First Child, Nth Child, and Last Child</title>
<style>
p:first-child {
background-color: lightgreen;
}
p:nth-child(2) {
background-color: pink;
}
p:last-child {
background-color: lightblue;
}
</style>
</head>
<body>
<p>I am the first and oldest child.</p>
<p>I am the middle child. Nobody loves me. :(</p>
<p>I am the last and youngest child.</p>
</body>
</html>
First of Type, Nth of Type, and Last of Type
You can use type targeting to filter out other tags. For example, if these paragraphs tags were in between other div tags, you can target the p tags instead. You can target the first and last of type using first-of-type and last-of-type. To target any particular type, use nth-of-type.
<!DOCTYPE html>
<html>
<head>
<title>First of Type, Nth of Type, and Last of Type</title>
<style>
p:first-of-type {
background-color: lightgreen;
}
p:nth-of-type(2) {
background-color: pink;
}
p:last-of-type {
background-color: lightblue;
}
</style>
</head>
<body>
<p>I am the first and oldest child.</p>
<div>Random div</div>
<p>I am the middle child. Nobody loves me. :(</p>
<div>Random div</div>
<p>I am the last and youngest child.</p>
</body>
</html>
Before and After
Using the before and after pseudo-elements, you can add content before or after an element. You do this via the content property, which takes a string as a value.
<!DOCTYPE html>
<html>
<head>
<title>Before and After</title>
<style>
p:before {
content: 'Hello ';
}
p:after {
content: ' World!';
}
</style>
</head>
<body>
<p>(don't mind me!)</p>
</body>
</html>
First Letter and Line
You can style the first letter and first line of an element with the first-letter and first-line pseudo-elements.
<!DOCTYPE html>
<html>
<head>
<title>First Letter and Line</title>
<style>
p:first-letter {
font-size: 5rem;
}
p:first-line {
color: red
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
The first letter has been made huge and the entire first line has been made red!
