DEV Community

Samantha Ming
Samantha Ming

Posted on • Originally published at samanthaming.com

CSS only-child

CodeTidbit by SamanthaMing.com

We have first-child, last-child, and nth-child. What if you're the only child. Not everyone has siblings, you know! No worries, CSS got you covered ๐Ÿค—. If you want to style an element that has no siblings, use the :only-child pseudo-class selector ๐Ÿ‘ฉโ€๐Ÿ‘ง

HTML

<ul>
  <li>I'm the only child๐Ÿ‘ฉโ€๐Ÿ‘ง</li>
</ul>

<ul>
  <li>I have siblings๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘ง</li>
  <li>I have siblings๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘ง</li>
</ul>

CSS

li:only-child {
  color: DeepPink;
}

Output

Code Sample Output

Alternative Solutions

Alternatively, you can also achieve this "only child" using the other child selectors

Using :first-child and :last-child

This will also select the only child.

li:first-child:last-child {
  color: DeepPink;
}

Using :nth-child and :nth-last-child

li:nth-child(1):nth-last-child(1) {
  color: DeepPink;
}

What's the difference?

So the difference between using the alternative solution and :nth-child is that our latter will have lower specificity.

If there are two or more conflicting CSS rules that point to the same element, the browser follows some rules to determine which one is most specific and therefore wins out.

w3schools.com: CSS Specificity

Specificity Battle โš”๏ธ

Let's take a look at this example. Since only-child has lower specificity, the text color that will appear would be blue.

li:first-child:last-child {
  color: blue; /* ๐Ÿ‘ˆ This will win */
}

li:only-child {
  color: DeepPink;
}

And if we battle all 3 of them. This :first-child:last-child has the same specificity as :nth-child(1):nth-last-child(1), so the rule would be whichever comes last will the winner. In our case, since :nth-child(1):nth-last-child(1) appears after, that the text color that will appear would be green.

li:first-child:last-child {
  color: blue;
}

li:nth-child(1):nth-last-child(1) {
  color: green; /* ๐Ÿ‘ˆ This will win */
}

li:only-child {
  color: DeepPink;
}

only-child vs only-of-type

Let's start by explaining them individually:

:only-child only selects an element that is the ONLY child of a parent. That means only one element within that parent. Even if it's a different element type, it won't be considered an only child. One element, no exceptions!

:only-of-type only selects an element if that is the ONLY child of a particular type within a parent. So having other siblings of different types are fine.

Now that we have the explanation down. Let's take a look at some examples.

Example: only-child

Here's an easy one. <p> is the only child of the parent <div> element, so this fits the criteria.

<div>
  <p></p> <!-- p:only-child -->
</div>

Example: NOT only-child

But now we have a problem. The parent, <div>, has 2 children. So if we were to use :only-child as our selector, nothing would be selected.

<!-- โš ๏ธ p:only-child โžก๏ธ no element selected -->
<div>
  <h1></h1>
  <p></p>
</div>

Example: only-of-type

However, if we used :only-of-type, we're okay. Even though our parent, <div>, has 2 children. <p> still remains to be the ONLY child of that particular type. In this case, our <p> is the only type of our children. So it satisfies the criteria of being the only type, hence it is selected.

<div>
  <h1></h1>
  <p></p> <!-- p:only-of-type -->
</div>

Other similar CSS pseudo-class

Here are some other similar CSS pseudo-classes

  • :first-child and :first-of-type
  • :last-child and :last-of-type
  • :nth-child and :nth-of-type

I covered :first-child and :first-of-type in my previous code notes, scroll down near the end to read it ๐Ÿค“

CSS Not Selector

Browser Support

It's also quite well supported, including Internet Explorer!

Browser Support: only-child

Update: only-child in CSS Selectors 4

Want to also include this update. It's in the Working Draft of CSS Selectors Level 4.

Matching elements are not required to have a parent.

MDN Web Docs

So does it mean an only child can exist without a parent element ๐Ÿค” I don't really know the details of this ๐Ÿ˜…. But if you know what this is about, leave it in the comments so I can learn more. You know what they say, sharing is caring ๐Ÿค—

Community Input

  • @EmmiePaivarinta: :empty is also super useful ๐Ÿ˜Š It only applies if the element has no child elements.

  • @Skateside: Fair warning with :empty

<i></i> <!-- empty -->
<i><!-- not empty --></i>
<i><b hidden>not empty</b></i>
<i> </i><!-- not empty (white space)

first-child vs only-child

@yoann_buzenet: Why would we use only-child instead of first-child? Don't they do the same thing?

@cancrexo: well, first-child not always is the only child ๐Ÿ˜‰

@yoann_buzenet: Yes but if there is only one child, first-child will work too, thatโ€™s what I don't get?

@cancrexo: Yes, but it will apply to all :first-child, regardless if it has more elements ๐Ÿ˜Š

Resources


Thanks for reading โค
Say Hello! Instagram | Twitter | Facebook | Medium | Blog

Top comments (6)

Collapse
 
kioviensis profile image
Max Tarsis

Great explanation
Thank you

Collapse
 
samanthaming profile image
Samantha Ming

Glad it made sense to you! Thanks for reading ๐Ÿ‘๐Ÿ‘

Collapse
 
brob profile image
Bryan Robinson

I love all the new selectors in CSS. :only-child can be super handy to change layouts in Flex depending on content which is super handy.

Great write up!

Collapse
 
samanthaming profile image
Samantha Ming

Totally! Thanks for reading ๐Ÿ˜Š

Collapse
 
elliot profile image
Elliot

Nice intro to only-child :) I really like the community input section. Love to see people getting involved and interested!

Collapse
 
samanthaming profile image
Samantha Ming

This is my favorite part too! Itโ€™s great when people leave comments because itโ€™s such a great way to exchange knowledge. The best is when other folks chime in and help address the questions. Such a wonderful and generous community, super awesome ๐Ÿ˜Š๐Ÿ’›