views:

112

answers:

1

I created this user style to make my StackOverflow use much more pleasant. As the screenshots there illustrate, my sidebar contains only the "Ignored Tags" header and input box. I don't care about all of the unanswered tags, nor about all of the tags I've already ignored. Here is the CSS:

#sidebar > * { display: none }
#sidebar > :nth-child(5) { display: inherit }
#sidebar > :nth-child(5) > * { display: none }
#sidebar > :nth-child(5) > :nth-child(4) { display: inherit }
#sidebar > :nth-child(5) > :nth-child(6) { display: inherit }

This ultimately means "Hide everything except children 4 and 6 of child 5 of the sidebar." It works beautifully, but looks ridiculous. Do you care to golf, and improve my selector-fu?

A: 

I don't know if you consider this less ridiculous, but here's how I did it with only two rules:

#sidebar > :not(:nth-child(5)) { display: none }
#sidebar ul > :not(:nth-child(4)):not(:nth-child(6)) { display: none }
  1. Hide every sidebar child except the 5th one.
  2. Inside all of the sidebar's lists, hide every child except the 4th and 6th.

Depending on the actual markup of the sidebar, you might have to replace the ul in rule two with something else.

Jakob
A great answer. Educational, and cleeeean. (I replaced "ul" with "div" to fit the situation). Thanks.
Jonathan Feinberg