Question

I have this situation in html and css:

css

.heading-border{ border-bottom:2px groove; }

html (edited for brevity)

 <tr class="heading-border">
  <th>Some Label</th>

Is there some way to target the <tr> here from css, not javascript, without having to explicitly define the class (in other words assign this style to any <tr> which contains a <th>? The reason is that this situation exists in many places and I would prefer not to have to mark a class in every place.

Answer 1

This is currently not possible, but we may have it in Level 4 Selectors. In the future you will be able to explicitly declare the subject of the selector by prefixing it with the dollar sign:

$div p {
  /* div is the subject, not p */
}

One note on the symbol above is that it appears to up in the air still. I’ve read reports that it will be ?, and others which suggest that it will be !. Bottom line, watch the spec 🙂

http://www.w3.org/TR/selectors4/#subject
http://dev.w3.org/csswg/selectors4/#subject