From the course: CSS Essential Training

Unlock this course with a free trial

Join today to access over 25,600 courses taught by industry experts.

Pseudo-classes and pseudo-elements

Pseudo-classes and pseudo-elements

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 talked about different ways to select one or more elements. With pseudo-class selectors, we can target an element in a specific state. Pseudo-classes are keywords that begin with a colon and are used with another selector. A state can be triggered by a user interaction like a mouse hover, which is styled using the hover pseudo-class. The state of an element can also refer to its structural position in the HTML. For example, first-child targets the first-child element of a specific type defined by the selector it's attached to. There are also pseudo-element selectors, which are used to style a specific part of an element, such as the first letter of a paragraph. They're also combined with a selector, but the keywords start with double colons. Let's look at an example on CodePen. To add a style to the hover state of a link use the hover pseudo-class. Let's uncomment the declarations in the CSS…

Contents