Types of Pseudo-classes
Know the types of Pseudo-classes, master CSS styling with pseudo-classes for precise element targeting and design control!
nanadwumor
- Structural pseudo-classes style elements based on their position or hierarchy in the HTML document, like :root and :empty.
- The :empty pseudo-class targets elements with no content or child elements.
- The :only-child pseudo-class selects elements that are the sole child of their parent.
- The :only-of-type pseudo-class targets elements that are the only one of their type among siblings.
RECOMMENDED ARTICLES
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! Combining classes and pseudo-classes styles elements based on both their type and class, such as...
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...
There are several types of pseudo-classes. These include structural pseudo-classes, location pseudo-classes,
Structural pseudo-classes
Structural pseudo-classes allow styling based on the hierarchical structure of the HTML document tree. Examples of structural pseudo-classes include :root and :empty.
The root element (:root)
The pseudo-class :root selects the root element of the HTML document. The root element of the HTML document is <html>.
The empty element (:empty)
The :empty pseudo-class selects elements that have no text content. It’s handy for styling elements based on whether they contain content or not. For example, if you don’t want empty paragraphs to display, you use
|
1 2 3 4 |
p:empty { display: none; } |
An element is said to be empty if there is no content in the element and it does not have descendant elements. An empty element does not have any characters whether whitespace.
By default, the :empty pseudo-class targets all empty elements such as <img>, <input>.
The only child element (:only-child)
The :only-child pseudo-class is used to target element that is the only child of the parent element.
This means it selects the element that doesn’t have any siblings and is the sole child element within their parent. For example, consider the HTML,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<p> This picture is nice. <img src="obama1.jpg" alt="President Obama"> </p> <p> This picture <span> is nice. <img src="obama2.jpg" alt="President Obama"> </span> </p> <p> This <em>picture</em> <span> is nice. <img src="obama3.jpg" alt="President Obama"> </span> </p> <p> This picture <span> is nice <em>and beautiful</em> <img src="obama4.jpg" alt="President Obama"> </span> </p> |
Suppose we want to style the image that is the only child of its parent to have some borders. This is what we will type
|
1 2 3 |
img:only-child{ border : 5px solid red; } |
The style will affect the <img> element because the <img> element is the only child of <p> element.
It will also target the <img> in the second <p> element because again, it’s the only child of its parent. The difference is that <img> here is the child of <span>. Nonetheless, it’s targeted because it’s the only child of its parent.
In the third <p>, we have <em> , <span> and <img> as children of <p>. The <img> element however is the only child of the <span> element. Therefore, the <img> will be targeted by the style and a red border will be around the image.
The last <p> element has the children <span>, <em> , <img>. Here, both the <img> and <em> elements are children of <span>. This means <img> is not the only child of <span>. Hence, the <img> won’t be affected by the style.
What if we wanted to specifically target <img> element that are not just the only child of any element but that which is the only child of the <p> element
If you use the : only-child pseudo-class to select an element, it selects all elements that are only child of a parent irrespective of what parent element it is. For example, in our example, the first <img> was the the only child of <p>.
The second <img> was the only child of <span>. You might wonder why <img> was targeted here since it’s inside a <span> element which is in turn inside a <p> element. The simple answer is, because <img> is inside <span>, it is the only child of <span>. In other words, <span> is the parent here while <p> is the grandparent.
If we decide to select only the <img> which is the only child of a <p> element but not just any <omg> which is the only child of any element, then we need to include the child combinator ( >) to add specificity. That’s,
|
1 2 3 4 |
p > img:only-child { border : 5px solid red; } |
The style above reads that find <img> element which is the only child of a <p> element and make its borders red, solid and 5px thick.
The only type selection (only-of-type)
If you want to select an element which happens not to be the only child of the parent, you cannot use the :only-child pseudo-class to do the selection. If the children are of different types, this can be done by targeting the type of element using :only-of-type pseudo-class. For example, let’s consider the last paragraph in the previous code above
|
1 2 3 4 |
<p> This picture <span> is nice <em>and beautiful</em> <img src="obama4.jpg" alt="President Obama"> </span> </p> |
If we want to target the <img> element, we cannot use the : only-child pseudo-class because it’s not the only child of <span>. The <span> element has the children <em> and <img> and they’re of different types. We use
|
1 2 3 |
p > img:only-of-type { border : 5px solid red; } |
The rule reads that find element that’s of type <img> only and a child of <p> element and make a 5px, solid, red border around it. Thus, the :only-of-type pseudo-class applies to elements only.
Recent Comments