3 CSS pseudo classes you may not be aware of

3 CSS pseudo classes you may not be aware of

CSS pseudo classes are used to define particular states of an element. This could be the state of element when a user is hovering over it with their mouse (think :hover). Or it could be to indicate an anchor tag which has been visited before (:visited).

Pseudo classes are very useful within modern web development and I’m sure most of you reading this article use them each day in your web development process. However, you might not know all of them…

Now, we’re not going to list them out all here because, well, that would take ages! Oh and also because there are plenty of places for you to look at that already.

In this post is we list 3 pseudo classes which you may not be familiar with and how they can be used in your web development.

1. The :not() pseudo class (also known as the negation pseudo-class)

Firstly, let’s look at a code snippet of this in action.

The CSS shown above sets the background colour of any element on the page which is not a <div> element to red. The :not() pseudo class can be useful to target multiple elements which need the same styles without having to write CSS targeting all of the various tags (especially when you don’t know what HTML tags might exist).

Imagine you have a div which could contain many different HTML elements and you want all of these to be red. However, you want to make sure that any paragraph tags within this div to remain untouched. Well, you can use the not pseudo class to achieve this by using the following CSS.

2. The :in-range CSS pseudo class

The :in-range CSS pseudo class can be utilised as a great way to provide a user with feedback when filling out a form which has minimum and maximum range on it’s inputs.

For example, let’s say you have a form which asks a user to provide a number between 1 and 10. Your input element might look something like this.

Now, let’s provide some feedback to the user as they type their number so they know they’re on the right track.

This CSS will use the :in-range CSS pseudo class to add a green border to the input element when the number is in the 1-10 range specified. This is not a replacement for correct form validation, however it’s great that we can use CSS to give feedback to our users that they are filling out a form correctly before they even think about submitting it.

3. The :focus-within CSS pseudo class

The :focus-within pseudo class can be used to target elements which are have recived focus in the browser or contain elements which have recieved focus. A good use for :focus-within is with forms, particulaly forms which contain multiple sections of different inputs.

For example, imagine you have a large form which contains multiple sections of inputs.

When working through this form it’s possible that your user might forget which section they’re typing in. Luckily, :focus-within can help keep them on track. Let’s say, by highlighting the entire section they are in depending on which input element they have in focus.

The CSS above will highlight the entire div with the background colour orange if the user is focussed on an input within that particular section. It’s a nice visual cue for the user to keep things friendly and intuitive.

Make sure, you check out thethe links below for more in-depth information on CSS pseudo classes and their uses.


Don’t forget to follow us on Twitter and join our community using the form below:

Leave a Reply

Your email address will not be published. Required fields are marked *