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
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-69b0f4f0e75bb834131827-i/] selector styles elements that come later in the same parent. Elements...
How to Use the Child Combinator in CSS
How to target exactly the elements you want with CSS combinators! > selects direct children only (e.g., h2 > em) Space selects all descendants, any depth (e.g., h2 em) Combinators can be combined (e.g., div.sale p > em) + selects...
Descendant Selectors in CSS
Unlock the power of CSS by learning how HTML’s hierarchy shapes every style you apply! HTML elements form nested parent-child structures. Parents are directly above children; ancestors can be higher up. Descendant selectors style elements inside a...
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