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 Pseudo-classes
Know the types of Pseudo-classes, master CSS styling with pseudo-classes for precise element targeting and design control! Structural pseudo-classes style elements based on their position or hierarchy in the HTML document, like...
How to use Pseudo-classes in CSS
Discover how pseudo-classes in CSS enhance user interaction and styling! Pseudo-classes apply styles based on user interaction, element position, or relationships between elements. Normal classes are applied directly as attributes, whereas...
Attribute Selectors
From targeting elements based on their attributes to styling based on partial values, attribute selectors offer flexibility and control. Elevate your CSS skills as we dive into the nitty-gritty of attribute selectors. CSS 2 introduces attribute...
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