Pseudo classes in CSS
Web Design with HTML & CSS
🕑 This lesson will take about 10 minutes
Pseudo classes are used to specify a special state of a particular element. For example, the first letter in every paragraph could be a different size, or a link changes colour when the mouse cursor moves over it. Pseudo classes are built into CSS. You can’t just make your own pseudo classes. In this tutorial, we will look at styling first letters and first sentences of paragraphs, how to style the first and last child of a parent, and also how to add content before and after the existing content in an element.
Watch the video below to see how to use pseudo classes in your CSS, then scroll down to see the sample code for the different examples.
The HTML and CSS code below is for the first example in the video (styling the first letter and styling the first sentence in paragraphs):
Pseudo classes can be much more useful than this. For example, pseudo classes can be used to specify a different style for a link or button in different states such as normal state, when the mouse is hovering over the button/link, when it is clicked and after it has been clicked.
Next lesson: Styling links with CSS