What is even “Pseudo-Selectors”?

You know that cool thing that happens when you hover your mouse over a button? Like this:

Your first question might be, “why does it have to be called ‘pseudo-selector’”? Such a big word for no reason! If we break down the word into its two components — “pseudo” and “selector” — then it’s not so bad. Let’s give it a try.

The prefix, “pseudo”, means that whatever it is referencing is not the real thing, fake, or artificial. “Selector” is a term that represents what element you want to “select” on an HTML page. In our case, as shown above, the button element. What would this look like in code? Let’s take a look at a simple example:

If you look in the CSS portion, you’ll see that there is a class selector for the button (.random-button), which points to the button tag in HTML. There is also a pseudo-selector (.random-button:hover) underneath that only applies the attributes of that selector if the user’s mouse is “hovering” over the button. Try hovering your mouse over the button on the bottom of the above example. Cool, right?

To be more specific, a pseudo-class is a way to describe a “special state” of a selected element. The hover pseudo-class would describe the special state of a user hovering their mouse of the element. Similar to :hover, there is actually a plethora of different pseudo-classes that you can apply to a selector. A few examples are: :active, :focus, and :visited. You can check out all of the other ones by clicking this link: here!