CSS: applying class to tbody cells (in the same column) based on header class

Question

couldn't find anything so here's my Markup:

<style>
table {
  width:300px;
  border-collapse:collapse;
}

th.price
{
  text-align:right;
  background:yellow;
}

th, td
{
  border:1px solid #aaa;
}
</style>

<table>
  <thead><tr><th>Item</th><th class="price">Price</th></tr></thead>
  <tbody>
    <tr><td>Item1</td><td>12.30</td></tr>
    <tr><td>Item2</td><td>23.40</td></tr>
    <tr><td>Item2</td><td>45.60</td></tr>
  </tbody>
</table>

https://jsfiddle.net/2b67rw5o/

Desired output:

So I don't want to apply .price to each table cell or use :nth-child or jQuery .. would it be possible with css only?

Please describe your problem fully here: what you indended to do, what you got, what you expected. — Cyrille Pontvieux, Oct 19 '21 at 20:46
You know this by now. Include all relevant code in the question itself, not only on an external site. As it says in [ask], "If it is possible to create a live example of the problem that you can link to (for example, on http://sqlfiddle.com/ or http://jsbin.com/) then do so - **but also copy the code into the question itself.**" — Heretic Monkey, Oct 19 '21 at 20:47
Doesn't look like it. You can style a col element, but looks like that only applies color, not the text-align. https://jsfiddle.net/dgrogan/d25wjuxp/ — dgrogan, Oct 19 '21 at 20:51
I don't think what you want to do is possible (but maybe someone here is smarter than me). Although it was often requested, you cannot travel over parents with CSS selectors because CSS cannot pass information upwards in the DOM hierarchy. For more see https://css-tricks.com/parent-selectors-in-css/ — Niklas E., Oct 19 '21 at 20:53
@NiklasE. how would you use parent selectors, if such existed, for this case? — dgrogan, Oct 19 '21 at 20:59
What is the problem with `:nth-child`? This works: `td:nth-child(2) { background:yellow; text-align:right;}` — Jirka, Oct 19 '21 at 21:26

score 1 · Answer 1 · answered Oct 19 '21 at 21:01

I don’t think you can apply a class to td elements based on the class applied to a th element, in css.

You don’t want to use jQuery, but you can use vanilla javascript:

const cssClass = "price";
const th = document.getElementsByClassName(cssClass)[0];
const thead = th.parentElement;
const idx = Array.prototype.indexOf.call(thead.children, th);
const tbody = th.parentElement.getElementsByTagName("tbody")[0];
Array.prototype.forEach(tbody.getElementsByTagName("tr"), tr => {
  tr.children[idx].classList.add(cssClass)
})

Niklas E. · Answer 2 · 2021-10-19T21:31:53.400

I don't think what you want to do is possible in CSS today. Although it was often requested, you can't travel (at least now) over parents with CSS selectors because CSS cannot pass information upwards in the DOM hierarchy. But this specific feature would be the minimum requirement to determine the index of the children in the following rows that need to be styled.

For more on that see the answer of "Is there a CSS parent selector?", which is stating "There is currently no way to select the parent of an element in CSS. (...) That said, the Selectors Level 4 Working Draft includes a :has() pseudo-class that will provide this capability."

With the currently drafted :has() you could at least build a repetitive CSS solution with a finite column count like this:

/* For a column of three columns maximum: */
/* if price is first column */
table:has(thead > th.price:first-child) tbody > td:first-child,
/* if price is second column */
table:has(thead > :first-child+th.price) tbody > :first-child+td,
/* if price is third column */
table:has(thead > :first-child+*+th.price) tbody > :first-child+*+td {
 ...
}

Crappy, I know... but currently the only native CSS solution in a possible foreseeable future.

But for now depending on what you need, you could also "cheat": If the background and/or border of the column should be changed you can use styling of the th header cell only (e.g. by abusing :before and :after). But text content specific changes would be quite impossible without JavaScript.

CSS: applying class to tbody cells (in the same column) based on header class

2 Answers2