How to select the previous sibling using selenium css syntax

Question

EG How do select the second div in this list if all I have is the id of the third?

<div></div>
<div>I want this</div>
<div id="i_know_this"></div>

This Suggests that I could use tilde. eg css=#i_know_this ~ div but it is selecting the next sibling rather than the previous one. Also, the ::before selector doesn't work.

Possible duplicate of [Is there a "previous sibling" CSS selector?](http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector) — Michael Benjamin, Mar 13 '16 at 00:28

score 1 · Answer 1 · answered Mar 07 '16 at 11:27

1

CSS selector path does not give you the privilege to move backward in the DOM hierarchy in that case you will have to use XPath //*[@id='i_know_this']/preceding-sibling::div[1]

answered Mar 07 '16 at 11:27

Pankaj Dubey

279
2
18

Rounin · Answer 2 · 2017-04-26T18:37:14.960

You can use the axe library (axe is a CSS post-processor).

In this instance, the immediate previous axe selector is ?.

(It's the opposite of + in conventional CSS).

Working Example:

div {
height: 36px;
padding: 6px 12px;
line-height: 36px;
}

#i_know_this:hover ? div {
color: rgb(255, 255, 255);
background-color: rgb(255, 0, 0);
}

<div>Ignore me</div>
<div>I want this</div>
<div id="i_know_this">Hover me</div>

<script src="https://rouninmedia.github.io/axe/axe.js"></script>

How to select the previous sibling using selenium css syntax

2 Answers2

Linked