This course may contain valuable CSS information for reference, but does no longer reflect our course quality standards.
Transcript from the "Introduction to Pseudo-Elements" Lesson
[00:00:02]
>> Estelle Weyl: So the next section is pseudo-elements. And you can find it on the GitHub page and slide 79, which is where we're starting. So there are several pseudo-elements. And since CSS 2.1 they've had two colons in front of them to differentiate between pseudo-elements and pseudo-classes. If you actually put one colon they work fine, but the correct syntax is two.
[00:00:26] So we have first-line, first-letter, selection before and after. And interestingly, selection is not in the specification, not even yet in CSS selectors level four. Pseudo-classes select elements that actually exist. There is something before the element, there is an opening and closing tag, or a faux tag. Pseudo-elements create these faux, or fake, if you've ever heard of faux pearls, it means they're not really pearls.
[00:00:55] But it sounds French so it sounds fancy. So it's a faux element that creates a fake before and after, and then whatever content is in there you can style. So in this section, the first-letter pseudo-element. It's as if there was a first element tag, and then an end first element tag right around that first letter.
[00:01:17] So in this case, I have targeted with the selector, the first letter of the paragraph that is the first of its type. And the reason I have chosen to do a paragraph first of its type, is because if I didn't, the drop caps would look absolutely horrendous, and it would be impossible to read.
[00:01:36] So this is an example of combining a pseudo-element with a pseudo-class, or structural selector, to just hit one thing that you really wanna hit. So you can always use combinations like this. So in this case, it's as if that letter Y itself was in its own element, and we were able to style it.
[00:01:59] But because it is a letter, you kind of have to position it to give it. It's like an inline span, you can't do everything to it. But in this case, by positioning it, we have. We've given it three times the size, and floated it. And the reason that we floated it, because if we didn't float it, it would just, it looks better.
[00:02:27] It floats it and you put the text around it, so that's first-letter. It's just a way to style the first letter which is usually used for drop caps. Next we have selection, and here I am selecting this and it is red. Everywhere else that I selected something, it wasn't red, it was blue, which was the default, but here I change the selection.
[00:02:51] And here it says, in this slide, anything that I select make the background red and the color white.