curriculum/challenges/english/blocks/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672aa74f761c065c9828a95e.md
Pseudo-classes are special CSS keywords that allow you to select an element based on its specific state or position. The element's state or position could include:
To use a pseudo-class, you add it to the selector by using a colon (:) followed by the name of the pseudo-class:
selector:pseudo-class {
/* CSS properties */
}
Let's see how you can use a pseudo-class to represent each of the states and positions we already mentioned.
The :active pseudo-class lets you select the active state of an element, like clicking on a button:
:::interactive_editor
<link rel="stylesheet" href="styles.css" />
<button>Example Button</button>
button:active {
background: greenyellow;
}
:::
The :hover pseudo-class defines the hover state of an element. An example would be hovering over a button or link:
:::interactive_editor
<link rel="stylesheet" href="styles.css" />
<a href="#">Hover over me!</a>
a:hover {
text-decoration: none;
color: white;
background: crimson;
}
:::
The :first-child pseudo-class selects an element that is the first child of its parent element. Here's an example of targeting the first paragraph element in a div container:
:::interactive_editor
<link rel="stylesheet" href="styles.css" />
<div class="container">
<p>first child</p>
<p>second child</p>
<p>third child</p>
<p>last child</p>
</div>
.container p:first-child {
background: lightcoral;
padding: 0.4rem;
}
:::
The first paragraph element in that div will receive the lightcoral background color and padding of 0.4rem on all four sides.
The :last-child pseudo-class targets the last element that is the child of its parent. Here is an example of targeting the last paragraph element in the container div element:
:::interactive_editor
<link rel="stylesheet" href="styles.css" />
<div class="container">
<p>first child</p>
<p>second child</p>
<p>third child</p>
<p>last child</p>
</div>
.container p:last-child {
background: lightcoral;
padding: 0.4rem;
}
:::
The :visited pseudo-class lets you style a link the user has already visited:
:::interactive_editor
<link rel="stylesheet" href="styles.css" />
<a href="https://www.example.com" target="_blank">Visit Example.com</a>
a:visited {
color: purple;
}
:::
The :disabled pseudo-class lets you style an interactive element in disabled mode:
:::interactive_editor
<link rel="stylesheet" href="styles.css" />
<button disabled>Disabled Button</button>
button:disabled {
background-color: lightgray;
}
:::
As you can see, pseudo-classes let you style elements based on user interactions, like hovering or visiting a link. This makes your website feel more interactive.
Apart from the pseudo-classes already mentioned, there are others like:
:focus:first-of-type:last-of-type:nth-of-type:modal:enabled:checked:required, and more.What does the :hover pseudo-class do in CSS?
It selects an element when it's clicked.
Think about a user interaction with the mouse.
It selects an element when it's being hovered over by a mouse.
It selects the first child element of a parent.
Think about a user interaction with the mouse.
It selects a link after it's been visited.
Think about a user interaction with the mouse.
2
What are pseudo-classes?
They are special CSS keywords that let you select an element based on its state or position.
They are used to create new HTML elements.
Think about how CSS can style elements based on their interaction or position.
They change the content of an element.
Think about how CSS can style elements based on their interaction or position.
They are replacements for classes in HTML.
Think about how CSS can style elements based on their interaction or position.
1
What does the :disabled pseudo-class do in CSS?
It styles an element when it's disabled.
It styles an element when it's being hovered over.
Think about when a button or input field is not interactive.
It styles the first child of a parent element.
Think about when a button or input field is not interactive.
It styles a link after it's been visited.
Think about when a button or input field is not interactive.
1