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 Foundations Advanced Selectors Pseudo-Elements: ::first-line and ::first-letter

What do you mean by virtual elements?

What do you mean when you say 'virtual elements' that are not defined in the markup and do not appear in the source code?

Dave Lawlor
Dave Lawlor
2,732 Points

Hi wl

One way to look at the meaning of a "virtual element"........

One definition for the word virtual is: "temporarily simulated or extended by computer software".

The term virtual is widely used when describing the use of "virtual machines" in computer networks - software is used to create a desktop environment in a virtual way, the user is unaware that the environment they see and use on their screen is completely software generated.

Here the pseudo elements, first line and first letter, are being used to produce and allow the modification of new, "virtual" elements for which there are no "actual" tags that relate to those parts of the html code.

Hope that helps.

3 Answers

The easiest way I explain it to myself:

"Virtual" basically means "not actually existing". So a virtual element doesn't really exist or isn't actually present which is true because:

::first-letter or ::first-line isn't a element like "p" or "div", you can't find a "first-letter"-tag in the html document. But you can select it just like as it would be an element hence a virtual element.

Or in short: first-letter is a selector that acts like it would target an element but the said element isn't defined in the html-code.

Hello!

I believe that the best way to get your head around pseudo classes is to use them a bit (I am still struggling myself :)).

But you will see as you use them that you do not need to point to anything in the html.

Cheers!

Thank you for the answer, yes, this CSS gets pretty confusing, so many terms and things to learn.