css3 question

karistuck

table#tablepress-1 tr.row-2.td.column-8,
table#tablepress-1 tr.row-2.td.column-9,
table#tablepress-1 tr.row-2.td.column-10,
table#tablepress-1 tr.row-2.td.column-11,
table#tablepress-1 tr.row-2.td.column-12 {
    background-color: #f0ad4e;
}

I have that code in style.css

And I want add tablepress-2 and tablepress-3 also

I will do make it like taht.

table#tablepress-1 table#tablepress-2 table#tablepress-3 tr.row-2.td.column-8,
table#tablepress-1 table#tablepress-2 table#tablepress-3 tr.row-2.td.column-9,
table#tablepress-1 table#tablepress-2 table#tablepress-3 tr.row-2.td.column-10,
table#tablepress-1 table#tablepress-2 table#tablepress-3 tr.row-2.td.column-11,
table#tablepress-1 table#tablepress-2 table#tablepress-3tr tr.row-2.td.column-12 {
    background-color: #f0ad4e;
}

But, It's doesn't work.

How can I coding for working and dieat code? Plz rent your knowledge?

Thank you for watching

Detruire

I suggest you look into how CSS selectors work, since the problem here should be immediately obvious if you had (unless I've misunderstood the problem.)

table#tablepress-1 table#tablepress-2 table#tablepress-3 tr.row-2.td.column-8

means a tr element with classes "row-2", "td", and "column-8" that is a descendent of a table with ID "tablepress-3", which is itself a descendent of a table with ID "tablepress-2", which is in turn a descendent of a table with ID "tablepress-1"

In other words, it would match the tr element with ID "to_match" in the following example:

<table id="tablepress-1"> <tr> <td> <table id="tablepress-2"> <tr> <td> <table id="tablepress-3"> <tr class="row-2 td column-8" id="to_match"> [...] </tr> </table> </td> </tr> </table> </td> </tr> </table>

If table#tablepress-1 tr.row-2.td.column-8, etc. does actually match what you intend it to (a tr element with a class of "td" seems a bit strange to me), you'd need to do add table#tablepress-2 tr.row-2.td.column-8, etc..

jcaleb

table#tablepress-1 tr.row-2.td.column-8,
table#tablepress-1 tr.row-2.td.column-9,
table#tablepress-1 tr.row-2.td.column-10,
table#tablepress-1 tr.row-2.td.column-11,
table#tablepress-1 tr.row-2.td.column-12,
table#tablepress-2 tr.row-2.td.column-8,
table#tablepress-2 tr.row-2.td.column-9,
table#tablepress-2 tr.row-2.td.column-10,
table#tablepress-2 tr.row-2.td.column-11,
table#tablepress-2 tr.row-2.td.column-12,
table#tablepress-3 tr.row-2.td.column-8,
table#tablepress-3 tr.row-2.td.column-9,
table#tablepress-3 tr.row-2.td.column-10,
table#tablepress-3 tr.row-2.td.column-11,
table#tablepress-3 tr.row-2.td.column-12{
    background-color: #f0ad4e;
}

DalekOfSkaro

Ouch.. This is too much code.

You can try something like this:

table#tablepress-3 tr.row-2 [class^="column-"] {
    background-color: #f0ad4e;
}

MikeIn

Good one @jcaleb & @DalekOfSkaro (Gr8 short code) .....

karistuck

DalekOfSkaro said: table#tablepress-3 tr.row-2 [class^="column-"] {

background-color: #f0ad4e;
}

Oh. I can diedt soon.

Thank you so much

DalekOfSkaro

You bet'cha.