Skill Level Intermediate
- [Instructor] This week we're going to talk about the difference between pseudo classes versus pseudo elements, and this is a question that you may get on some interviews. It really tests the knowledge that you have of CSS, and it's a bit tricky because it's about a very subtle difference. Although you've probably used both pseudo classes and elements, you probably haven't thought much about how they differ, so let's go ahead and dig in. Now a pseudo class is a way of selecting an existing HTML element.
Now that's really important because that's the main different between pseudo class and pseudo element. It selects that element based on either a state or a property of the element. So we'll take a look at some examples in just a second. Now pseudo classes are related to an existing element using a single colon character. Some common pseudo classes are hover; which lets you modify an element when you hover over it, or focus; where you can do something when an input field is activated.
Now there's a couple here, first-child and nth-child, which is a way you can choose an element that's inside another element based on the position of that item in the parent element. Now the main difference between a pseudo class and a pseudo element is that pseudo elements don't actually select an element, but they create sort of a virtual element that didn't exist before. So you can target that virtual element and then style it appropriately.
CSS3 rolled out the use of two colons to identify pseudo elements so that they would look different from pseudo classes. But, because older browsers do not support double colons it's okay most of the time to use a single colon instead. But you may see them in the wild with two colons. And you can see some of the common pseudo elements here. They are a lot more scarce that the pseudo classes. One good way to figure these out is to compare the difference between something like what we looked at before called a first-child and this pseudo element called first-letter.
First-child is a pseudo class because it selects an actual element, whereas first-letter selects something that isn't an element; the first letter of say a paragraph. It doesn't have any tag around it, so you're not selecting an actual element, but you're sort of creating a virtual element around the first letter inside say a paragraph, and then you're doing something with that appropriately. So let's take a look at this simple example right here.
We've got this footer section and I'm using Bootstrap so you can see that when I roll over I get the default sort of background color. This is a hover state when you rollover one of these icons here, you can see a hover state. We don't really have any styles for that yet, but I'm going to modify the color of that state by using a pseudo class selector. So I'm going to say footer and then I'm going to select the anchor only when somebody hovers over that item, and then I'm going to change the color here to this color right here, which is a yellow just so that you can see that it's a little bit different than before.
So, the pseudo class selector allows you to select an existing element in this case the anchor tags which are right here, but only when they are in a certain state, in this case, we're saying whenever somebody puts their mouse on top of it. Now, we can also use another interesting selector. So I'm going to say footer a and then I'm going to say not, and then in here I'm going to say I want to target an element called special.
So, one of these anchor tags, the one for GitHub has this extra class of special. So what I'm doing with this one is I'm selecting all the anchor tags that do not have the class of special. So that's pretty interesting, and then we'll give this a color. And so, what we're doing here is making every one of the anchor tags sort of like a blue color, except for this one with the class of special.
So another interesting pseudo element. Again, notice that I'm actually selecting elements here, so I'm actually selecting these anchor tags, and that's the difference between a pseudo class and a pseudo element, so let's take a look at what a pseudo element would look like. So, what we'll do is in the footer we will choose the paragraph, so there's only one paragraph and it has this copyright data in here. So, footer and then the paragraph and then we'll say first-letter, and we'll do a different color here.
So now notice that the color of this copyright symbol, so even though technically this ampersand is the first character but it considers this entire copyright symbol as the first letter of the paragraph, and so it's making that a different color and if I want to I can do something like change the font size and we'll make that 150%. Cool, so now it's just a little bit bigger and so what we're doing here is selecting something that isn't actually an element.
So this first letter is not in it's own span, or it's not in an emphasis tag, it's not something that actually has an element wrapped around it, but with a pseudo element we're able to choose something and perhaps another one that is really common is the before and after pseudo element, and that allows us to put some text or some content before or after an existing element. Now here's some pages where you can get more information about working with pseudo classes and elements, as well as some related courses.
If you really love CSS I highly recommend Chris Converse's CSS Shorts Weekly, you get a little snippet of a CSS trick every week and he's a fantastic teacher. If you have some ideas for this weekly series, maybe you want to share with me some questions you've been asked or have asked in interviews. Connect with me in LinkedIn or just about any other social media network like Twitter or GitHub @planetoftheweb.
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.