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.
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.