Created
December 30, 2013 15:56
-
-
Save CarlRevell/8183812 to your computer and use it in GitHub Desktop.
Neat CSS trick styling child elements based on how many of them there are... I used this concept on a contacts page to increase line-height when there were only three contact details (name, title and tel) and reduce line-height when there were four details (name, title, tel and email) to maintain the same height for the contact block.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* one item */ | |
.employee span:first-child:nth-last-child(1) { | |
width:100%; | |
} | |
/* two items */ | |
.employee span:first-child:nth-last-child(2) | |
, span:first-child:nth-last-child(2) ~ span { | |
width:50%; | |
} | |
/* three items */ | |
.employee span:first-child:nth-last-child(3) | |
, span:first-child:nth-last-child(3) ~ span { | |
width:33.3333%; | |
} | |
/* four items */ | |
.employee span:first-child:nth-last-child(4) | |
, span:first-child:nth-last-child(4) ~ span { | |
width:25%; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment