Skip to content

Instantly share code, notes, and snippets.

@mrtag23
Last active February 8, 2018 00:57
Show Gist options
  • Save mrtag23/3018fbcb0986b9a20e1f820fef32e10e to your computer and use it in GitHub Desktop.
Save mrtag23/3018fbcb0986b9a20e1f820fef32e10e to your computer and use it in GitHub Desktop.
Switch styles depending on siblings total number.
/* one item */
li:first-child:nth-last-child(1) {
/* -or- li:only-child { */
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