Let's look at this funny word called pseudo classes.
What is this?
At its crux, it's just a state that can be targeted with CSS.
And let's start at the basics.
What is the definition of "pseudo"?
Well, if we Google it, there we go.
It's something that's not genuine,
false, a sham, spurious, almost approaching or trying to be.
That's what "pseudo" means.
So we can say that a pseudo class is basically a phantom state or a specific characteristic of an element
that can be targeted with CSS. But don't get confused with pseudo elements.
Pseudo elements are different to pseudo classes.
A pseudo element is a phantom element that does not exist in the DOM. And we can target both
let me be clear, when it comes to forms. We've seen examples of this. And when I say that a pseudo class
is basically a phantom state, we know that forms mostly deal with states, right?
Something's either required or it's not.
It's either valid or it's not.
It's invalid or it's not.
These are states. But as I mentioned, sometimes we use pseudo elements with forms, especially when
it comes to styling.
Remember that ::before pseudo element? The ::after pseudo element?
etc
etc.
Okay, so how does pseudo classes work?
Well, it's very simple.
Pseudo class selectors are CSS selectors with a colon preceding them.
Right?
So we type the selector, we type the colon, we then target the particular pseudo class we're after.
Then we can style it with normal CSS, where we've got property:value pairs.
You have been very, very used to this.
For example, let's target a button and let's then target the pseudo class of :hover.
Of course we can change its background to black when the user hovers over it, for example.
But that hover pseudo class, there are tons of them.
Link, visited, active, target
valid,
etc
etc.
We have seen tons of these already in the course.
It's just nice to refresh our memory now and again.
Let me just hop over to the console and let's do a fun little example of using a pseudo class to display
a hidden paragraph.
You know the drill by now.
We've got a blank file here.
Let's just create an HTML document. Within here,
let's have a head and style section, because we're going to be targeting CSS pseudo classes.
But first, let's create our actual content.
Let's create a div and in here we can say, hover over me and see what you find.
And then we can have a paragraph:
"Nice!
You've just used a pseudo class on a
div
element".
If we refresh the browser, we can see that we've got all the text displayed, but we don't want to
show this paragraph until the user hovers over the div with their mouse.
So how do we do this, my dear students?
Well, firstly, let's style this paragraph element.
I want a background.
Of ... let's just do yellow.
And let's give it a padding of 20 pixels.
And the final step is, I want to hide this.
So let's set its default display to none.
So now it's gone.
I want to target a CSS pseudo class. And we don't have to use pseudo classes with forms.
That's why the skills you're learning in this course are going to really help you in your dev career.
Super exciting.
But anyway, we want to use the CSS pseudo class and what's cool is that we can use these with other
CSS combinators. For example, we might want to use the tilde combinator in CSS to target a sibling.
Let me show you what I mean.
So let's grab the div.
We know that we want to target its hover state and specifically we want to target the sibling paragraph.
And the sibling in a CSS combinator is denoted by tilde (~) , this little funny curly thing.
And we want to target the paragraph.
This is how easy it is to target a state,
here, a hover state.
And all we want to do, when that happens, because remember now we're targeting that paragraph,
we want to set its display property, not to none, to block, which is its default.
So let's take the mouse and hover over the div and there we go.
How awesome is this?
(sound effect: mission completed)
Just a really, really quick and fun example to show you how easy it is to work with pseudo classes.
But I know, I know this course is all about forms.
So in the next lecture, let's continue talking about pseudo classes but with a flavor of forms.
See you in the next lecture.