how to find previous sibling of HTML tag using css only

Question

How to find the previous sibling of HTML tag using CSS only:

<div class="form-group">
  <label for="userID">User ID</label>
  <input id="userID" type="text" class="form-control" placeholder="Enter User ID" tabindex="1"/>
</div>

As far as I know, there is no way in CSS for backward selector. You need to find another way to determine. — Tyler Bean, Feb 15 '19 at 07:20
Possible duplicate: https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector — Cesar Correchel, Feb 15 '19 at 07:21
As I know so far there is no way for CSS. But you can get output via many of the Jquery attribute by (closest, prev, sibling, find) etc... — Yashpal Sindhav, Feb 15 '19 at 07:23

score 0 · Answer 1 · answered Feb 15 '19 at 07:26

I don't think you can, you can however find the next sibling. You didn't even write from which element you want to search and what is the target but I assume you want to go from the <label> to <input>..?

Then just reverse the order they come in html and you can put back the order using css.

html:

<div class="form-group">
  <input id="userID" type="text" class="form-control" placeholder="Enter User ID" tabindex="1"/>
  <label for="userID">User ID</label>  
</div>

css

.form-group {
    display: flex;
    flex-direction: column; // if they should be one one line each
}

[for="userID"] {
    order: -1;
}

how to find previous sibling of HTML tag using css only

1 Answers1