0

I have a dynamic html table which grows and shrinks based on certain parameters. I have to apply a certain styling to a column which has it's title as YTD.

Earlier when the table was static and I knew the position of the YTD column I was using the below css to style it 

.DashboardTable tr td:nth-child(5) {
        background-color: #0091D5;
        color: white;
    }

Since I knew it is the 5th column that I have to style. But now that YTD column can move to 8 or 10 etc positions based on parameters. So I was wondering if there is a way in css where I can target based on the column header(th) so instead of 5 it would say something like below and locate the th with text YTD and apply the style.

.DashboardTable tr td:nth-child("YTD") {
            background-color: #0091D5;
            color: white;
        }

Please let me know if this is possible

Thanks

SP1
  • 1,182
  • 3
  • 22
  • 47
  • 1
    Maybe you can count from the back `:nth-child(n - 2)` ? – Daut Jan 22 '19 at 11:05
  • :) Nice idea ..yeah it's static from the back. – SP1 Jan 22 '19 at 11:06
  • Not working though..this is applying the style to the whole table – SP1 Jan 22 '19 at 11:10
  • You will need javascript to do this - this snippet works but before I could post it the question was closed var tableCells = document.querySelectorAll('.DashboardTable tr td') tableCells.forEach(function(tableCell){ tableCell.innerHTML == 'YTD' ? tableCell.classList.add('highlight') : tableCell.classList.remove('highlight') }) td.highlight{ background-color: #0091D5; color: white; } – gavgrif Jan 22 '19 at 11:11
  • :nth-last-child(2) this was it..Thanks for the help and ideas..really appreciate it. – SP1 Jan 22 '19 at 11:13
  • No worries @user1221989 – Daut Jan 22 '19 at 12:36

0 Answers0