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

Hmm, I'm not quite sure what you're meaning here about CSS grid - selecting a previous element is something that could be done regardless of the layout you're using.

One way I do witness people working around the lack of previous element selector is by using (abusing?) the flexbox `order` property though, so they can visually rearrange things but use the `+ sibling` selector to 'fake' what a previous selector might do.

Here's how people use/abuse flexbox order to fake a previous selector:

```html
<div id=flex>
  <input type=checkbox>
  <label>label</label>
</div>

<style>
  #flex {
    display: flex;
  }
  label {
    order: 1;
  }
  input {
    order: 2;
  }
  input:checked + label {
    color: red;
  }
</style>
```

this way the `<label>` can appear before the `<input>` in the HTML, but we can kind of fake the previous selector by using a normally-ordered sibling selector. When I was saying that a previous selector might be able to abstract away some lines of JS that are sitting and watching form elements and tasked with styling previous element(s) I was thinking more along the lines of:

```html
<section id=prev>
  <label>Label 1</label>
  <input>
  <label>Label 2</label>
  <input>
  <label>Label 3</label>
  <input>
</section>

<style>
  .example { color: red }
</style>

<script>
  function prevver() {

    var tag = document.querySelectorAll('#prev input')

    for (var i=0; i<tag.length; i++) {

      var prev = tag[i].previousElementSibling

      if (tag[i].value == '') {

        prev.classList.add('example')

      } else {

        prev.classList.remove('example')
      }

    }

  }

  var tag = document.querySelectorAll('#prev input')

  for (var i=0; i<tag.length; i++) {

    tag[i].addEventListener('input', prevver)
    tag[i].addEventListener('blur', prevver)

  }

  window.addEventListener('load', prevver)
</script>
```

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

Received on Tuesday, 15 August 2017 18:52:43 UTC