Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Selectors Advanced Selectors Pseudo-Elements - ::first-line and ::first-letter

John Fisher
John Fisher
7,974 Points
Posted by John Fisher
John Fisher
7,974 Points

What's the difference between a Pseudo Class and a Pseudo Element?

Having trouble grasping the exact difference between Pseudo Class and a Pseudo Element. Can someone explain it in simple terms? thanks.

2 Answers

John Breslin
John Breslin
16,963 Points

Pseudo classes are for selecting elements that exist but you can't select with the DOM. There's no way to tell what div being hovered in the markup, it depends on the action of the user. The div exists, but there's no way to select it with a normal class. Pseudo classes can be chained and used like a regular classes.

A pseudo element selects elements that don't exist, creating a new virtual element. For instance, there's no tags for the first-line of an element. So it's like ::first-line is creating virtual tags to make it select-able. You can only use one pseudo element per selector, unlike Pseudo classes.

Hope this helps.

John Fisher
John Fisher
7,974 Points
John Fisher
John Fisher
7,974 Points

I think I understand that...

Thanks for your help.

John Breslin
John Breslin
16,963 Points

No problem.