Parent Element Combinator - tomhodgins/process-css-demo GitHub Wiki

A custom combinator that allows authors to target the parent element of elements matching a CSS selector

<target> /--parent/ { <list of declarations> }

• <target> is a CSS selector matching the direct child of the element you wish to target

If you have HTML like this:

<label>
  <div>Enter a valid email</div>
  <input type=email required>
</label>

And you wanted to style the background of the <label> based on the <input> element's validity status, you could write a selector like this

:invalid /--parent/ {
  background: pink;
}
:valid /--parent/ {
  background: lightgreen;
}

• This feature automatically uses jsincss-parent-selector plugin for support in the browser.