Не могу выбрать целевой элемент

У меня есть 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.

🤔 А знаете ли вы, что...
CSS Grid Layout предоставляет средства для создания сложных сеточных макетов, таких как магазины сеток.

[РЕШЕНО]Перейти к решению

2

78

3

Css75481 вопрос Sass3570 вопросов Css selectors1724 вопроса Tailwind css724 вопроса

Решено

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 */
}

Не могу выбрать целевой элемент

Ответы:

Интересные вопросы для изучения