Не могу выбрать целевой элемент
У меня есть HTML вот так
<element1 class = "class__1">
<element2 removePadding></element2>
<element3 class = "class-3"></element3>
</element>
Я хочу изменить нижнюю границу класса 3 только тогда, когда у элемента2 есть атрибут removePadding, я пробовал так
element1 element2[removePadding] element1 element3.class-3 {
margin-top: 20px;
}
но это не сработало.
Я хочу нацелиться на это class-3 только тогда, когда у element2 есть атрибут removePadding.
Ответы 3
element1 element2[removePadding] element1 — Последнего element1 там быть не должно, селекторы CSS могут двигаться только вниз, а не вверх. Кроме того, element3 не является дочерним элементом element2, а является родственным по отношению к +, поэтому вы можете использовать селектор element1 element2[removePadding] element1 (next-sibling)
div div[data-removePadding] + div.class-3 {
margin-top: 20px;
background: red;
}
div {
border: 1px solid #020202;
padding: 5px;
box-sizing: border-box;
}<div class = "class__1">
<div data-removePadding = ""></div>
<div class = "class-3"></div>
</div>Попробуйте использовать комбинацию селектора одного уровня с селектором класса 3:
element1 element2[removePadding] ~.class-3 {
margin-bottom: ...
}
Как упоминалось в другом комментарии, селекторы CSS могут идти только вниз/следующий, а не вверх/предыдущий.
Вы можете использовать псевдокласс :has и дочерний комбинатор (>) для достижения желаемого результата!
element1:has( > element2[removePadding] ) > element3.class-3 {
/* your code goes here */
}
Согласен, поменяю на «можно».