How to Modify an Element with CSS if we do NOT have a Class or Identifier with Pseudo-Classes

On many occasions you want to modify an element of your website with CSS but when you are going to do it you realize that the element does not have any class or identifier.

Don't worry, all is not lost.

Thanks to the PseudoClasses we can do much more than you imagine and in this tutorial we are going to see how to do it.

Table of Contents

Everything we are going to see in this tutorial it works for any page you make with HTML and CSS.

And specifically, of course it is valid for WordPress, in fact in our examples we will do it in WordPress.

📺️ Video Tutorial:

Subscribe to my channel:

:first-of-type Modify First Element Only

This pseudo-class allows us to modify only the first element of its type among a group of sibling elements.

Now we are going to see concrete examples but here you have a help very good about this pseudoclass.

The first thing we are going to modify is the first element of a menu:

Capturing a header, pointing to the first element

Normally what I do when I want to modify something is to enter the element inspector of my browser (right button –> Inspect) and check if the element to modify has a class or an identifier:

screenshot of the element inspector, pointing to the identifier of the first element

The element I want to modify has a specific identifier so I really don't need to use pseudo classes.

But imagine that you have seen it and that I don't know that it does have an identifier 🙈

I'm going to modify that element as if that identifier didn't exist.

To make use of the pseudo-classes I have to add the pseudo-class preceded by a colon:

#top-menu li:first-of-type {
    margin-right: 140px;
}

css capture to modify with first-of-type the margin of the first element

And the result is:

screenshot of the header pointing to the right margin of the first element

As we can see in the screenshot above there is only the right margin applied to the first element.

:last-of-type Modify Last Element Only

In the same way as in the previous example we can modify only the last element.

This time we will use :last-of-type in the following way:

#top-menu li:last-of-type {
    margin-right: 140px;
}

css capture to modify with first-of-type the margin of the last element

And the result would be:

screenshot of the header pointing to the right margin of the last element

:nth-of-type Modify the Element or Elements that we want

This pseudo-class is very powerful because we can reference any specific element we want or create patterns for multiple elements to be selected.

Let's imagine that I need to modify the second element of my menu, for this we would use nth-of-type in the following way:

#top-menu li:nth-of-type(2) {
    margin-right: 140px;
}

css capture to modify with nth-of-type the margin of the second element

screenshot of the header pointing to the right margin of the second element

Create patterns with :nth-of-type on Even Elements

If instead of referring to a specific element we want to refer to an element every n elements, we would do it like this:

#top-menu li:nth-of-type(2n) {
    margin-right: 140px;
}

And the Result would be to apply margin to the second and fourth elements:

screenshot of the header pointing to the right margin of the second and fourth elements

Create patterns with :nth-of-type on Odd Elements

In the same way we can refer to the odd elements in the following way:

#top-menu li:nth-of-type(2n+1) {
    margin-right: 140px;
}

And the result would be:

screenshot of the header pointing to the right margin of the first and third elements

Add CSS Changes to WordPress

We've been making CSS changes to the element inspector. And this is great to test it but as soon as we refresh the page the changes will disappear since these changes are not saved within the web, but in our own browser.

To add the changes to WordPress there are a lot of ways, from modifying the CSS file of our template to using the WordPress interface itself.

We are going to use the WordPress interface itself, for this we go to the Customize menu -> Add additional CSS:

We click and we arrive at the screen where we have to add the CSS:

WordPress menu screenshot to add additional CSS

Bonus Track: Add a Pseudo-Class to a Child Element

As we have seen, these Pseudo-Classes allow us to easily modify sibling elements, that is, elements that are at the same level.

But let's imagine that we want to change the color of the odd elements of our menu.

The color is not defined in the list element (li) but in the link element (a) that is inside the list element:

If we look at the element inspector:

capture elements inspector with main web menu

If we look closely, we see that we could not create the pattern in the following way:

#top-menu li a:nth-of-type(2n+1) {
    color: red;
}

Since each link is in a different li, they would all be the first element and they would all change color:

menu screenshot with red color all menu items

What we would have to do is apply the pattern with the pseudo class to the li element in the following way:

#top-menu li:nth-of-type(2n+1) a {
    color: red;
}

Screenshot of the Element inspector pseudo-classed rule

Resulting in what we really wanted:

screenshot of menu with red color for odd items

As we have seen, it is not the end of the world if we do not have an identifier or a class.

Thanks to pseudoclasses we can access almost any element of our HTML.

I hope you liked it 😉