From the course: CSS Essential Training

Unlock the full course today

Join today to access over 23,200 courses taught by industry experts.

Pseudo-classes and pseudo-elements

Pseudo-classes and pseudo-elements - CSS Tutorial

From the course: CSS Essential Training

Start my 1-month free trial Buy for my team

Pseudo-classes and pseudo-elements

“

- [Instructor] So far, we've gone over different ways to select specific elements, but with pseudo-class and pseudo-element selectors we can select a specific state or a specific part of an element. Pseudo-classes target elements in a specific state. For example, the first child element or when the user interacts with it such as hovering over a link. They're added to a selector with a colon and a keyword. Pseudo-elements are used to style a specific part of an element, such as the first letter or the first line of a paragraph. They're also combined with a selector but are added with double colons followed by the keyword. Let's look at an example in CodePen. A common style for online articles is to mimic the typography often seen in magazines by styling the first paragraph or first sentence differently from the rest. Let's start by adding the first class to the first paragraph. Inside the opening tag I'll add the…

Contents