Как выбрать элемент HTML в соответствии с его атрибутом дочернего узла в CSS?

Question

Например, в следующем фрагменте:

<tr>
 <td align="center">123</td>
 <td class="someclass">abc</td>
</tr>

Я бы хотел выбрать все <tr> элементы, которые имеют <td> с class="someclass".

Мне интересно, возможно ли это в CSS, без использования JavaScript. Спасибо.

Answer 1

То, что вы просите, невозможно.CSS читает слева направо, это означает, что вы не можете указать родительский элемент на основе дочерних атрибутов.Вы можете сделать это в javascript, но, как вы сказали, вы не хотите использовать это.

Пример HTML:

<div class="box">
    <div class="green">
       Some text
    </div>
</div>

<div class="box">
    <div class="red">
       Some Text
    </div>
</div>

Пример CSS:

.box {
    color: blue;
} 

.box .green {
    color: green;
}

.box .red {
    color: red;
}

Каквы можете видеть, что вы можете выбрать родительский элемент сам по себе, но не на основе дочерних атрибутов.

Технически, вы всегда должны работать вовне. Если вам нужен определенный стиль для применения к родителю, вы должны добавитьдополнительный класс.

Пример HTML:

<div class="box green">
    Some Text
</div>

Пример CSS:

.box.green {
    color: green;
}

В приведенном выше CSS вы можете «сложить» классы, чтобы выбрать нужный элемент.

Надеюсь, это поможет, если у вас есть какие-либо вопросы, просто задавайте.Я могу опубликовать вариант JavaScript, который сможет выбрать элемент на основе атрибутов дочернего элемента, если вы откроете для этого новую тему.

Answer 2

Я бы хотел выбрать все элементы, которые имеет атрибут с классом "SomeClass".

Если под выделением вы подразумеваете выбор узла, вы можете использовать только JavaScript.

JQuery:

$(".someclass").doStuff();

Но если под выделением вы подразумеваете выделение CSS, то:

CSS:

<element class="someclass"> можно выбрать с помощью .someclass в CSS.

Answer 3

Чтобы выбрать элементы с определенным классом:

.someclass{
  color: red;
}