Elder Sibling Combinator - tomhodgins/process-css-demo GitHub Wiki

A custom selector that allows authors to target previous sibling elements of another element that match a selector. This is like the following sibling combinator ~, except in the other direction.

<target> /--previous/ <sibling> { <list of declarations> }

• <target> is a CSS selector showing where the start the sibling comparison
• <sibling> is an optional CSS selector to filter previous siblings. The missing value default for this is * which will match all previous siblings

If you had a <li class=target> in a list of <li> elements and you wanted to target all <li> elements before that <li class=target> you could write a selector like:

.target /--previous/ {
  background: lime;
}

However, if you only wanted to target those previous sibling elements that had a certain class, you could provide that after the /--elder/ combinator to further filter the list of elder siblings that would be matched. If you wanted to only target elder siblings of <li class=target> that have class=example, you could write a selector like this:

.target /--elder/ .example {
  background: lime;
}

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