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!
nanadwumor
- Combining classes and pseudo-classes styles elements based on both their type and class, such as img.plant:only-of-type.
- The :only-of-type pseudo-class targets elements that are the sole instance of their type among siblings, ignoring classes.
- The :first-child pseudo-class styles the first child of a parent element, useful for lists and headings.
- The :last-child pseudo-class styles the last child of a parent element, allowing for targeted styling of the final item in a list.
RECOMMENDED ARTICLES
Types of Elements in CSS
A CSS element may look simple, but knowing whether it is replaced or nonreplaced helps you understand how the browser displays and styles it. CSS elements are broadly divided into replaced and nonreplaced elements. Replaced elements display...
Understanding HTML Elements in CSS
Before you can style a webpage with CSS, you first need to understand the elements that CSS is designed to style. Elements are the building blocks of webpages. Examples include headings, paragraphs, images, links, and buttons. HTML elements are...
How to Select Following Siblings in CSS
What if you want to style a paragraph that is far away from a heading but still inside the same container? CSS has a neat trick for that. The [crayon-6ab31de64c18a321394419-i/] selector styles elements that come later in the same parent. Elements...
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:
|
1 2 3 |
img.plant:only-of-type { border : 5px solid red; } |
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
|
1 2 3 4 |
<a href="https://villagecoder.com"> <p>Java tutorials</p> <img class="plant" src="java.com" alt="Java tutorials"> </a> |
|
1 2 3 4 |
p:empty { display: none; } |
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
|
1 2 3 4 5 6 7 |
<a href="https://villagecoder.com"> <p>Java tutorials</p> <img class="plant" src="java.com" alt="Java tutorials"> <img src="java.com" alt="Java tutorials"> </a> |
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,
|
1 2 3 |
img.plant:only-of-type { border : 5px solid red; } |
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 :
|
1 2 3 4 5 |
<ul> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul> |
If we want to style the first list item, we can do so as in :
|
1 2 3 |
li:first-child { font-weight: bold; } |
|
1 2 3 |
li:first-child { font-weight: bold; } |
|
1 2 3 4 |
<p> This picture <span> is nice <em>and beautiful</em> <img src="obama4.jpg" alt="President Obama"> </span> </p> |
The first heading of each section could be styled as:
|
1 2 3 |
section h2:first-child { color: #FF0000; /* Red color for the first heading in each section* } |
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 :
|
1 2 3 4 5 |
<ul> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul> |
If we want to style the last <li> item, we can do so using :
|
1 2 3 |
li:first-child { font-weight: bold; } |
The rule reads that, look for the last child of <li> element and make the font weight bold.
Recent Comments