Styling elements based on sibling count

Posted on January 17, 2011 by Lea Verou

The original idea belongs to André Luís, but I think it could be improved to be much less verbose.

André’s solution is like this:

/* one item */
li:nth-child(1):nth-last-child(1) {
	width: 100%;
}

/* two items */
li:nth-child(1):nth-last-child(2),
li:nth-child(2):nth-last-child(1) {
	width: 50%;
}

/* three items */
li:nth-child(1):nth-last-child(3),
li:nth-child(2):nth-last-child(2),
li:nth-child(3):nth-last-child(1) {
	width: 33.3333%;
}

/* four items */
li:nth-child(1):nth-last-child(4),
li:nth-child(2):nth-last-child(3),
li:nth-child(3):nth-last-child(2),
li:nth-child(4):nth-last-child(1) {
	width: 25%;
}

It’s based on the relationship between :nth-child and :nth-last-child. As you can see, the number of total rules is O(N) and the number of selectors in every rule is also O(N).

However, what you really want, is to just target the first element. The others can be targeted with just a sibling selector. With my improvement, the number of total rules is still O(N), but the number of selectors in every rule becomes just 2, making this trick practical for far larger numbers of children:

/* one item */
li:first-child:nth-last-child(1) {
	width: 100%;
}

/* two items */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
	width: 50%;
}

/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
	width: 33.3333%;
}

/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
	width: 25%;
}

And here’s a fiddle to prove it:

Yes, I know that with Flexbox and the other layout modules, techniques such as these are soon becoming obsolete, but I think they are still useful right now.
I’m also aware that you can emulate this particular example with table display modes, but a) Table display modes have other implications that are sometimes undesirable and b) Widths are just an example, you could come up with other ways to style the elements based on their total count, which can’t be emulated by CSS tables.

http://www.sareez.com/ Indian Sarees

Wow,,, childish CSS huh ..!! nice..
Pingback: CSS: Innovative Techniques and Practical Solutions - Smashing Magazine
Pingback: CSS: Innovative Techniques and Practical Solutions - Smashing Magazine
Pingback: CSS: Innovative Techniques and Practical Solutions « e-wok.fr, le blog
Pingback: CSS: Innovative Techniques and Practical Solutions | Ruturaj Pradeep Kohok | Your Web Advisor
Pingback: CSS: Innovative Techniques and Practical Solutions - Broadys Web Design
Pingback: CSS: Innovative Techniques and Practical Solutions | Remake Wordpress Theme
Pingback: CSS: Innovative Techniques and Practical Solutions | RC Freak
Pingback: 关于CSS创新技术和实际解决办法 | Jackchen Design 1984
Pingback: CSS: Innovative Techniques and Practical Solutions | Snippet Magazine
Pingback: CSS: Innovative Techniques and Practical Solutions | i know idea
Pingback: CSS innovations, techniques, and more 8 | Hanzoro5's blog
Pingback: CSS: Innovative Techniques and Practical Solutions | desmaksolutions.com
Pingback: I'm TH Chong » Css-useful-coding-techniques-and-design-solutions
Pingback: Powerful New CSS Techniques and Tools | redbey
Pingback: Powerful New CSS Techniques and Tools « e-wok.fr, le blog
Pingback: Powerful New CSS Techniques and Tools
Pingback: Powerful New CSS Techniques and Tools | Remake Wordpress Theme
http://barraponto.blog.br Capi Etheriel

Let’s write it in SASS (actually, SCSS):

@for $i from 1 through 4 { li:first-child:nth-last-child(#{$i}), li:first-child:nth-last-child(#{$i}) ~ li { width: 100% / #{$i} } }

http://leaverou.me Lea Verou

Good, but I don’t think this is a good idea for making elements the same width, there are better techniques for that, like CSS table layout. It’s very useful for a number of other things though, for example see how I used this on http://bytesizematters.com to make the textareas shorter as their total number increases.

gordondev

Just out of curiosity, why is it that you say here that there are “better techniques” for making elements the same width, when a) the technique Capi used is the same as your post, and b) you explained in the post why table layout isn’t necessarily a better solution?

http://www.facebook.com/ContactDillonHere Dillonn Sylvestree

Nice one! However ..
width: 100% / #{$i}
Should actually be:
width: 100% / $i
If not, the expression won’t evaluate due to $i using interpolation syntax.

http://barraponto.blog.br/ Capi Etheriel

DId you try it? I’ve seen all sorts of issues due to interpolation, so I always shove it in the code, although here it’d be clearer if it was written like #{100/$i}%

http://www.facebook.com/ContactDillonHere Dillonn Sylvestree

Yes, I am using it right now on a site and it works fine. The original code written here however, did not work for me.

Pingback: Powerful New CSS Techniques and Tools « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates
Pingback: Powerful New CSS Techniques and Tools | CRICKET ka FUNDA
Anonymous

Hello,

That’s a good id.
There’s a little mistake in the first code : the second width: 33.3333%; has to be width: 25%

http://leaverou.me Lea Verou

Oops, thanks. Fixed now!

Anonymous

Oh, actually there’s an other very simple tip to select one item :

/* one item */
li:only-child {
width: 100%;
}
Pingback: Powerful New CSS Techniques and Tools | Sejix Technologies Blog
Anonymous

Nice idea, its sorta concise than previous, but some1 could tell me what does the operator (~) mean? I searched a lot in google but fail to get results

http://leaverou.me Lea Verou

When in doubt, always check the specification: http://www.w3.org/TR/css3-selectors/#general-sibling-combinators

In a nutshell, it’s a generalization of +.

Pingback: Powerful New CSS Techniques and Tools | Inspire Technologies
Pingback: New CSS Techniques and Tools | W Design Love | Graphic and Web Design Blog | Coding | tutorials | freebies | Wordpress | inspiration | Blog
Cristian Rojas

Really good thing, it helped me a lot with a breadcrumb. Thanks for posting!
http://www.mazero.com/ SEO

I would like to say thank you for this great resource, what you have here in your blog content is very useful and contained good values about CSS3.
http://www.seorus.com.au/ SEO_Melbourne_Services

very helpful information
http://css3.me/ Funkyscript

Using :first-of-type and :nth-last-of-type one could style based on the number of the same kind of elements such as the number of paragraphs within an article. This could be very useful in responsive design.
http://twitter.com/elmaguire Gerardo Vidal

Very Useful, ¡thanks!
Robert

Combining your answer here, and the technique described http://stackoverflow.com/a/8720986/1825034 – you can create a selector that acts as a “style if contains at least this number of elements”

li:first-child:nth-last-child(n + 3),
li:first-child:nth-last-child(n + 3) ~ li
http://twitter.com/ucariouk Billy O’Connor

Thanks so much, was messing around with LESS trying to get the same effect.
http://twitter.com/yourkiv Sergii

is it possible to style the container (parent) depending on the number of children that it has?

http://lea.verou.me/ Lea Verou

Not currently

http://twitter.com/yourkiv Sergii

Thank you, Lea

http://lea.verou.me/ Lea Verou

Not currently We only have :empty, which means no children at all (including text nodes), but nothing more fine grained at the moment… It’s coming in Selectors 4 though!