Skip to content

Instantly share code, notes, and snippets.

@cladley
Created August 6, 2015 10:40
Show Gist options
  • Save cladley/6a655715b155a64bdb4d to your computer and use it in GitHub Desktop.
Save cladley/6a655715b155a64bdb4d to your computer and use it in GitHub Desktop.
.box{
width: 100px;
height: 100px;
float: left;
margin: 10px;
border: 1px solid black;
}
/* Only one item */
.box:only-child{
border-width: 10px;
}
/* If more than one */
.box:not(:only-child){
border-width: 10px;
}
/* Only one of type */
div:only-of-type{
border-width: 10px;
}
/* Exactly n items (6 here ) */
/* nth-last-child mathches nth element from last */
.box:nth-last-child(6):first-child,
.box:nth-last-child(6):first-child ~ .box{
border-width: 10px;
}
/* the 6th from last up */
.box:nth-last-child(n + 6){
border-width: 10px;
}
/* Matches 6 or more items */
.box:nth-last-child(n + 6),
.box:nth-last-child(n + 6) ~ .box{
border-width: 10px;
}
/* Matches 6 or less items */
.box:nth-last-child(-n+6):first-child,
.box:nth-last-child(-n+6) ~ .box{
border-width: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment