Targeting a specific TH element

[briguystuff]

Hello!

I am trying to target a specific TH element to change the background color of that cell only. I’ve made several attempts and can’t quite seem to get it right.

The attached screenshot shows the cell I am attempting to target. Any pointers? Any assistance is much appreciated.

I’ve tried variations of this but none of it seems to work.

.price-tiers__table .savings th {
        background-color: var(--color--dark-grey);
}

[marcusparsons]

Hi @briguystuff and welcome back to the forums!

You can use the nth-child pseudo class to target a specific element based on where it is ordinally (its index in a sequence of numbers).

To break it down, since you’re targeting the 3rd th element on that table, you would want to target the th that is in the thead element (just in case of any other HTML floating around in there):

.price-tiers__table .savings thead th:nth-child(3) {
background-color: var(–color–dark-grey);
}

Here is a CodePen using that nth-child selector I created:

nth-child in table

[lasjorg]

Are there other elements with the savings class you do not want to target?

If not just use the class you already have on the element. You can scope it to the price-tiers__table as well. Just remove the th descendant combinator from the selector.

.price-tiers__table .savings {
  background-color: var(--color--dark-grey);
}

[briguystuff]

Thank you for your suggestion! That is a step closer. The desired state is to have some of the header cell backgrounds light grey and others to be medium grey. When using your suggestion I do indeed get the darker grey in the header but it also is now applied to the white cells below. And we only want it applied to the header cell. Is that possible?

[lasjorg]

So you do have the class on other elements. You can scope it to the th element.

.price-tiers__table th.savings {
  background-color: var(--color--dark-grey);
}

Without seeing all the HTML it is hard to give a proper answer.