Как выбрать предыдущего брата, используя синтаксис Selen CSS
Например, как выбрать второй div в этом списке, если у меня есть только идентификатор третьего?
<div></div>
<div>I want this</div>
<div id="i_know_this"></div>
Это говорит о том, что я мог бы использовать тильду. например, css=#i_know_this ~ div, но он выбирает следующего брата, а не предыдущего. Кроме того, селектор::before не работает.
2 ответа
Путь селектора CSS не дает вам права двигаться назад в иерархии DOM, в этом случае вам придется использовать XPath //*[@id='i_know_this']/preceding-sibling::div[1]
Вы можете попробовать использовать XPath selection - см. Примеры здесь: http://zvon.org/xxl/XPathTutorial/Output/
Вы можете использовать библиотеку ax (ax - постпроцессор CSS).
В этом случае ближайший предыдущий селектор топоров ?
,
(Это противоположность +
в обычном CSS).
Рабочий пример:
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>