The adjacent sibling selector `+` can be used to style an element based on the state of a sibling. For example:

input:valid + label { color: black; }

input:invalid + label {color: red; }

CSS Tricks has a tutorial (http://css-tricks.com/float-labels-css/) on this technique for displaying form labels as faux placeholders until the input has content, although it's not quite ready for most site's production requirements.

I haven't found many uses for the general sibling selector `~`, as it matches all elements after the initial selected element. I usually want the preceding elements as well if I'm shooting that broadly, so simply excluding the item with `:not()` is generally a better choice.

A super useful one is for styling an element that's next to a checked checkbox.

:checked + label { background-color: green; }

http://jsbin.com/witaziwu/1/edit?html,css,output Small demo if you want to mess around with it.

Before the nth-child/first-child selectors had common-enough implementation and the <section> tag didn't yet exist, I used hn + p and .epigraph + p (along with first-line set in small-caps and first-letter as an versal) to style the initial paragraph of a page or major section. That's more document layout than anything apptastic, but it made for a nice-looking page.

Way back NetTuts had a good article with unusual CSS selectors; check it out here:

https://code.tutsplus.com/tutorials/the-30-css-selectors-you...