Combining a class and pseudo-class

Can you  combine class and pseudo-class to style elements? Learn how to precisely target and style elements with advanced pseudo-classes in CSS!

RECOMMENDED ARTICLES

Just as two classes can be chained together, a class and a Pseudo-class can also be chained or combined to select and style an element. For example, consider this:

The rule reads that, look for <img> element that’s the only element of its type and also has the class called *plant* and erect a 5px, solid, red border around it. Consider the html below

only-of-type targets only elements

The pseudo-class: only-of-type refers to elements only. For example, p:only-of-type means elements that are only of type <p>. This implies, that the pseudo-class doesn’t affect any attribute but element. For example, consider a modified form of the above HTML

We have two <img> elements. The first <img> element has a class called “plant”. The second <img> element has no class. 

 Because there are two <img> elements, using the : only-of-type pseudo-class to target <img> will not work because none of the two is the only type. However, the first <img> has a class called plant while the second <img> has no class. You may think adding the class attribute will add specificity in order to select the <img> type with a class. That’s,

Unfortunately, here, none of the <img> will be selected. The reason is that the : only-of-type targets only elements, and not classes or any others. 

The rule reads that, find the <img> element which is of the only type of <img> among its siblings, and has a class called plant. Of course, because the siblings compromise two <img> , this rule cannot select either of the <img> elements.

The first child pseudo-class (:first-child)

The first child of a parent element can be styled using the :first-child pseudo-class without the need to manually figure out the first child among its siblings and target it with a defined class. 

For example, when styling lists, such as <ul> or <ol>, you might want to apply special styling to the first item in the list. You could make the first item stand out by giving it a different background color or font style. 

 Consider the below markup :

If we want to style the first list item, we can do so as in :

The first heading of each section could be styled as:

The last child pseudo-class (:last-child)

The last child of a parent element can be styled using the :last-child pseudo-class. Consider the below markup :

If we want to style the last <li> item, we can do so using :

The rule reads that, look for the last child of <li> element and make the font weight bold.