Pseudo Classes vs Pseudo Elements

In this CSS tutorial we look at how to use Pseudo Classes and Pseudo Elements, what the differences are between them and how to spot which type you are using.

Pseudo Classes are used to refine CSS selectors based on the state or location of an element. Whereas Pseudo Elements refine the selector to items within an element.

For Pseudo Classes we look at examples using Hover, Focus, Disabled and First-Child. For Pseudo Elements we use First-Letter, First-Line and After.

To determine the type being used we'll see a single colon being used with Pseudo Classes and two colons with Pseudo Elements. That said you can get away with using a single colon with the earlier Pseudo Elements!

Links for more details:

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

Видео Pseudo Classes vs Pseudo Elements канала A shot of code