More Advanced CSS

Now that we have covered everything that you will probably use with every webpage, it is time to go over some advanced CSS that you will need to use in some more specific use cases.

Pseudo class selectors

Every HTML element can be in different states. The default state is when an element is untouched; you already know how to style for this, as that is the default styling.

button {
  background-color: white;
}

There are times when a user interacts with an element. For example, clicking a button opens another page. As front end developers, we need to give the user feedback on that particular action. When they place the mouse on top of the button, it lights up (we call this a hover state). We need to write instructions for that to happen:

button:hover {
  background-color: blue;
}

Like the hover state, there are others as well: click, focus, visited, and more. For most of these element states, we have special selectors that allow you to change the styling. Read the following article to learn about them. Once you have done that, try them out for yourself!

• Pseudo class selectors

Pseudo-elements

Next to pseudo-class selectors, there is also something called pseudo-elements. This is a way that CSS can insert 'HTML elements' before or after what you are selecting, which allows you to do some very powerful things without having to write any JavaScript (which we will learn about next week)! To do this, you can write the following code:

.required::after {
  content: "*";
}

This is an ::after element, which means that the html element will be placed directly after the HTML element. Conversely, you can use the ::before element to place it directly before the element you targeted with your CSS. In this case, any HTML element that has the CSS class required assigned to it will get an extra HTML element after it with the star. Have a look at the following video that goes into this and explains the use case that this CSS code solves:

• CSS Pseudo Elements in 8 minutes

It may be a little unclear now what the real difference is between these two. The following video goes over that to get it clear in your mind:

• Pseudo-Classes vs Pseudo-Elements in CSS

---

Help us improve the content 🤩

You can leave comments here.