Using Pseudo-Classes and Pseudo-Elements

Using Pseudo-Classes and Pseudo-Elements
udemy2 placeholder image

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.

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.

A Google search for Barack Obama.
A Google search for Barack Obama.

This can be accomplished by targetting visited and unvisited links, like so:

	
	a:visited {
		color: purple;
	}
	a:link {
	    color: blue;
	}
	
udemy placeholder image

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>
	
An example of hover.
An example of hover.

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>
	
An example of focus.
An example of focus.

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>
	
An example of active.
An example of active.
bluehost placeholder image

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 and Last Child

You can target the first and last children of a tag using the first-child and last-child pseudo-classes.

	
	<!DOCTYPE html>
	<html>
		<head>
			<title>First and Last Child</title>
			<style>
				p:first-child {
					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>
	
An example of first and last child.
An example of first and last child.

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>
	
An example of before and after.
An example of before and after.
namecheap placeholder image

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>
	
An example of first letter and first line.
An example of first letter and first line.

The first letter has been made huge and the entire first line has been made red!