css children

Nothing too rocket-sciency, but I decided to try messing with CSS for showing and hiding things based on if 1, 2, or 3 buttons are showing, rather than using scripting logic: the first one shows something different if the button is the only one, the second set is a way of saying "I have exactly two things here" (in this case, if there's only a single button it's not the one I'm worried about"

 .fixedButtonBar .fixedButton:last-child{
   border-right: none;
 }

 .fixedButtonBar .fixedButton:only-child .multipleButtonCaption {
   display: none;
 }

 .fixedButtonBar .fixedButton:not(:only-child) .singleButtonCaption {
   display: none;
 }



 .hideWhenCramped {
   display:none;
 }

 /* when exactly two items */ 

.fixedButtonBar .fixedButton:nth-child(1):nth-last-child(2) .hideWhenCramped,
 .fixedButtonBar .fixedButton:nth-child(2):nth-last-child(1) .hideWhenCramped {
   display:inline-block;
 }


  /* when exactly two items */

.fixedButtonBar .fixedButton:nth-child(1):nth-last-child(2) .showWhenCramped,
.fixedButtonBar .fixedButton:nth-child(2):nth-last-child(1) .showWhenCramped {
  display:none;
}



I guess it might be a little too clever-clever. I liked it over the scripting approach in part because I would have had to repeat calculations to count which buttons were showing, but I'm not sure this css states its intentions very clearly