CSS :only-child Selector with Example
The :only-child selector in CSS is a powerful pseudo-class that allow you to select an element that is the only siblings of its type. In other words, this pseudo-class matches an element that is the only child of its parent.
This selector is especially useful when you want to style an element that has no other siblings within its parent element.
For example, if you have a single <p> element within a <div> element and you want to apply a specific style to it. You can do it using the :only-child selector to style that <p> element.
This selector will apply the CSS styles only when the <p> element is the single child of the <div> container.
Syntax of CSS :only-child Selector
The general syntax to define the :only-child selector is as follows:
element:only-child {
/* CSS properties */
}In the above syntax,
element: It represents the type of element you want to target. For example, div, p, span, etc.:only-child: It is a pseudo-class that matches an element that is the only child of its parent.
Examples on CSS :only-child Selector
Let’s take an example in which we will highlight an element that is the only child within its parent container.
Example 1:
<!DOCTYPE html>
<html>
<head>
<style>
.container p:only-child {
color: white;
background-color: blue;
padding: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<p>This is the only child paragraph.</p>
</div>
<div class="container">
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
</div>
</body>
</html>
In the above example code, the :only-child selector will select a <p> element that is the only child within its parent div element with class attribute value “container”. The text color will change into white color and the blue background. Look at the output below.
Output:
Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
.box h1:only-child {
color: white;
background-color: red;
padding: 10px;
}
</style>
</head>
<body>
<div class="box">
<h1>This heading will not be styled.</h1>
<p>This paragraph will not be styled.</p>
</div>
<div class="box">
<h1>This is the only heading that will be styled.</h1>
</div>
</body>
</html>
In this example, the .box h1:only-child selector will select only the <h1> element that is the only child of its parent element with class attribute value “box”. Thus, this selector will only select the second <h1> element inside the .box class and apply the CSS style.
Common Error
When you use the :only-child selector, there are a few common mistakes that you can often make. If the parent element has more than one child, the :only-child selector will not apply the defined CSS style.
Example 3:
<!DOCTYPE html>
<html>
<head>
<style>
.box p:only-child {
color: white;
background-color: red;
padding: 10px;
}
</style>
</head>
<body>
<div class="box">
<p>First paragraph.</p>
<p>Second paragraph.</p>
</div>
</body>
</html>
In this example, the CSS rule will not apply on the <p> element within its parent element because there are two <p> elements within the .box container, so neither of them is the only child.
In this tutorial, you have learned CSS :only-child selector with syntax and important examples. You can also combine the :only-child class with other pseudo-classes to create more advanced styles. Try yourself it.
