How to select an html element according to its child node attribute in css?

Question

For example, in the following snippet:

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

I would like select all <tr> elements that have a <td> with the class="someclass".

I am wondering if this is possible in css, without using javascript. Thanks.

Answer 1

To select elements with a particular class:

.someclass{
  color: red;
}

Answer 2

What your asking for isn't possible. CSS reads left to right, meaning that you can't specify the parent element based on a childs attributes. You can do this in javascript but like you said you didn't want to use that.

Example HTML:

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

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

Example CSS:

.box {
    color: blue;
} 

.box .green {
    color: green;
}

.box .red {
    color: red;
}

As you can see, you can select the parent element by itself but not based on a child's attributes.

Technically, you should always work outwards in. If you need a specific style to be applied on the parent you should add an extra class.

Example HTML:

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

Example CSS:

.box.green {
    color: green;
}

You can see in the above CSS that you can "stack" the classes to select the proper element.

Hope this helps, if you have any questions just ask. I can post a javascript variation that would be able to select an element based on child element attributes if you open a new topic for that.

Answer 3

I would like select all elements that has a with class attribute "someclass".

If by selection you mean node selection that you can only use JavaScript.

jQuery:

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

But if by selection you mean CSS selection then:

CSS:

<element class="someclass"> can be selected using .someclass in CSS.