Docs

[kynate33]

I have made each column header in my table featured to get the style that goes with it. I want each column header background to be a different color. I have tried using some variations of nth child(x), but cant get it to work. Please help.

The table I am working with can be found here:

http://www.mcclellangray.com/service-options/

[Nabeel A]

Hi there,

Thanks for writing in! I checked your page and it doesn’t exist, have you deleted the page? Please give us the page URL so we can take a look.

Thanks!

[kynate33]

It is there now, it is a new page. Please try and view it again.

Thanks

[Lely]

Hello There,

I tried the page too but it is page not found. See this:http://screencast-o-matic.com/watch/cDlnVYQlz3

[kynate33]

Ok, I’m not sure what is going on. This is a page that is not complete. I didn’t really want to publish it, but I did so that I could get an answer to my question. Is there a way for you to answer my question without seeing the page? Is there not a standard way to change the color of the individual headers for the price table? I will see what I can do to get the page live in the meantime.

[kynate33]

Ok, it is live now.

[Joao]

Hi There,

Please try the following code:

.x-pricing-column.featured h2:first-of-type{
    background: red;
}

.x-pricing-column.featured h2:nth-child(2) {
    background: green;
}

.x-pricing-column.featured h2:nth-child(3) {
    background: yellow;
}

.x-pricing-column.featured h2:last-child {
    background: orange;
}

Hope it helps

Joao

[kynate33]

Didn’t work. When I copy this into the global css, all of the featured headers are red.

[Jade]

Hi there,

Please use this code:

.page-id-1817 #x-section-2 .x-pricing-table .x-pricing-column:nth-child(1) h2 {
    background: red;
}

.page-id-1817 #x-section-2 .x-pricing-table .x-pricing-column:nth-child(2) h2 {
    background: green;
}

.page-id-1817 #x-section-2 .x-pricing-table .x-pricing-column:nth-child(3) h2 {
    background: yellow;
}

.page-id-1817 #x-section-2 .x-pricing-table .x-pricing-column:nth-child(4) h2 {
    background: orange;
}

Hope this helps.

[kynate33]

This produces the same result. All of the headers are red.

[kynate33]

What could the reason be that the red color is carrying over to the other headers? It seems to me that the nth-child call outs are not working properly.

[Friech]

Hi There,

Its on different colour now, did you resolve the issue?

http://image.prntscr.com/image/a138c1fdc43c4a24962ebb00455bdb19.png

Please clear your browser’s cache.

Thanks.

[Author]

Posts