Target specific column in pricing table for CSS

[rystaman]

Hi,

I have a pricing table on this page -

And i’m trying to change the colour of the header of each individual column

I currently have this CSS to colour all 3 but i’m unsure how to target a specific column as far as I can see all the headers have the same h2 class so I can’t target them inidvidually.

.x-pricing-column h2 {
border: 0px solid #f9fafb !important;
font-family: Open Sans;
font-weight: 600;
font-size: 1.5em;
    color: #f8f9f9;
background-color: #0F5FC5;
letter-spacing: 2.5px;
padding-bottom: 1em;
}

Thanks

[rad]

Hi Ryan,

Thanks for reaching out.

For that, you’ll have to use unique class per column. Example, let’s say you added first_table_column class to the first column,

Then your CSS will be this

.first_table_column h2 {
border: 0px solid #f9fafb !important;
font-family: Open Sans;
font-weight: 600;
font-size: 1.5em;
    color: #f8f9f9;
background-color: #0F5FC5;
letter-spacing: 2.5px;
padding-bottom: 1em;
}

Class name depends on you, just make sure they are not the same if you plan to have different styling for each.

Hope this helps.

[rystaman]

I’m an idiot…

Thanks Rad!

[rad]

You’re most welcome!