Is there a more succinct CSS selector expression for this Stack Overflow improvement?
I created this user style to make my Stack Overflow use much more pleasant. As the screenshots there illustrate, my sidebar contains only the "Ignored Tags" header and input box. I don't car开发者_开发技巧e 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?
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 }
- Hide every sidebar child except the 5th one.
- 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.
精彩评论