Pseudo-classes and pseudo-elements are used to refine style rules in CSS and target elements under certain conditions. In other words, they allow you to style parts of an element rather than an entire element.
Pseudo-classes are used to select and style a specific state of an element. For example, styling the link when it's being hovered. Here are a few examples:
:hover pseudo-class is used to apply styles to an element when a user hovers over it.
:active pseudo-class is used to apply styles to an element that is being activated or clicked on.
:focus pseudo-class is used to apply styles to an element that has focus. For example, a form field that a user is currently filling out.
:nth-child() pseudo-class is used to select an element based on its position in a parent element.
Pseudo-elements are used to style a specific part of an element. For example, adding a triangle to the top of a speech bubble. Here are a few examples:
::after pseudo-elements are used to insert content before and after an element.
::first-line pseudo-elements are used to style the first letter or first line of an element.
::selection pseudo-element is used to apply styles to the portion of an element that is selected by the user.
Pseudo-classes and pseudo-elements are a powerful tool in CSS, allowing you to take your styling to the next level.
Add a ruleset to the end of style.css that selects the
<a> elements on the page. Leave the declaration block empty for now.
Next, add a
:hover pseudo-class to the
a selector you just created.
Lastly, set the text color to pink by adding the following CSS declaration inside the declaration block:
Now when you hover the mouse over the links, the font color changes to pink!
Sign up to start coding
Already have an account?