How awesome are CSS pseudo selectors ?

Answer: VERY !

Jump to the demo: http://dabblet.com/gist/3333961

A really cool tip I wanted to share is hiding/showing content using CSS pseudo selectors. In the demo we have a checkbox that shows one paragraph and hides another. Most of the work is done by the ~ selector, it targets everything that comes after the former selector (in our case everything that comes after the input element), it is similar to + but less restrictive. We use the pseudo selectors :checked and :not() to show or hide our different paragraphs.

It is a really neat trick and saves you a few lines of JS.

I sometimes use it in combination with JS, when a button is pushed I add the active class to it and I have a CSS rule to reveal more content (it's useful for busy menu bars and such). It would look something like this

.sub-menu {
  display:none;
 }

 .btn.active + .sub-menu {
   display:block;
 }