Skip to content

Instantly share code, notes, and snippets.

@ryanand26

ryanand26/styling-children-based-on-their-number.css

Created April 6, 2017 19:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ryanand26/883e1c4f0c9ad1dc77e1dedac6492fa4 to your computer and use it in GitHub Desktop.
Save ryanand26/883e1c4f0c9ad1dc77e1dedac6492fa4 to your computer and use it in GitHub Desktop.
Download ZIP
CSS styling based on number of items
Raw
styling-children-based-on-their-number.css
/**
* http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/
*/
/* 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%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment