Re: [csswg-drafts] [css-selectors] Postcede selector

This feels like a feature that falls outside of the limitations of CSS so I'm not optimistic that a 'previous element selector' will ever happen. However, it _is_ something that is easily attainable with JS via `previousElementSibling()` as well as XPath in the browser, but neither of these can perform this with the speed and performance CSS requires.

Almost half of the styling plugins I've built include some kind of previous selector functionality (7/18 plugins at the time of posting this) including a [simple JS mixin](https://github.com/tomhodgins/reprocss/blob/master/mixins/prev-selector.js) explaining my take on it: a selector that grabs the immediately preceding element sibling of any element(s) matching a given selector.

Here are some demos:

- [`$prev` in EQCSS](https://codepen.io/tomhodgins/pen/gMPpMd?q=%24prev&limit=all&type=type-pens)
- [`$prev` documentation](https://tomhodgins.github.io/element-queries-spec/element-queries.html#selectordef-meta-selectors-prev)
- [Previous Element Selector mixin for reproCSS](https://codepen.io/tomhodgins/pen/awQXVJ)
- [Previous Element Selector with CSSplus/Selectory](https://codepen.io/tomhodgins/pen/mmXrLo)

After implementing this functionality a few different times in a few different ways I still haven't found _too many_ compelling use cases for its inclusion. Most of the time I hear people wishing for a previous element selector is when styling forms, where there's a desire to style different elements based on the state of an element that appears after another one in HTML. In these cases the solution often requires using JavaScript to babysit the elements in the form and apply a class to a parent or the previous element at the Right Time™.

It's definitely a feature that would be 'nice to have' for prototyping, but from what I can see having this in CSS would only abstract away a few lines of JS in a layout and would be needed pretty infrequently. Also, the difference between 'immediately preceding sibling' and 'matching older sibling(s)' is kind of like the difference between 'parent' and 'matching ancestor(s)', and the latter would perform even worse.

**Can anybody else think of any compelling use-cases for a previous element selector in CSS?** I've got plugins ready to go we can use to test out the ideas and see if they're worthwhile, what can we test?

---

Here's the example you gave of selecting all `<label>` elements that appear before immediately before `<input>` elements executed in EQCSS, CSSplus/Selectory, and reproCSS with the previous selector mixin:

```html
<div id=eqcss>
  <label>label</label>
  <input>
</div>

<style>
  @element #eqcss input {
    $prev {
      color: lime;
    }
  }
</style>

<script src=http://elementqueries.com/EQCSS.js></script>
```

```html
<div id=selectory>
  <label>label</label>
  <input>
</div>

<style>
  #selectory label[test="this.nextElementSibling.tagName == 'INPUT'"] {
    color: blue;
  }
</style>

<script src=http://tomhodgins.github.io/cssplus/selectory.js></script>
```

```html
<div id=reprocss>
  <label>label</label>
  <input>
</div>

<style process=auto>
  ${prev('#reprocss input', `
    color: orange;
  `)}
</style>

<script src=https://rawgit.com/tomhodgins/reprocss/master/mixins/prev-selector.js></script>
<script src=https://rawgit.com/tomhodgins/reprocss/master/reprocss.js></script>
```

-- 
GitHub Notification of comment by tomhodgins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1705#issuecomment-322534366 using your GitHub account

Received on Tuesday, 15 August 2017 17:33:09 UTC