CSS override / do only once?

Question

I use the following code in CSS

.table>tbody>tr:nth-of-type(even) { background-color:#C6DDFF;}

to color table rows one white, next blue, next white...

But when I use JavaScript to insert a new <tr> (which is needed temporary) the design screws up. Because the CSS sees the inserted <tr> as next row, which is theoretically correct.

But want the new <tr> in a own style, and the original table layout should be the same as in the first load.

Is there a way to tell CSS like "don't affect this row...ignore it?"

Not using that style, because it will be computed by the browser when the DOM changes. You'll need to copy the styles of the current rows before adding new ones... — BenM, Dec 29 '13 at 15:34
You need a more unique way of identifying your existing `tr` tags - give them a class name. — Emissary, Dec 29 '13 at 15:35
If you just need a temporary table row, could you just do `document.createElement('tr')`, or do you need to do stuff in the page? — Bojangles, Dec 29 '13 at 15:55
No, its more like a "detail-view" of the parent row. the inserteted row contains a div with details from parent row, gotten by Ajax. — HKK, Dec 29 '13 at 15:58

score 2 · Answer 1 · edited May 23 '17 at 11:49

2

I think this will do the trick.

.table > tbody > tr.someclass:nth-of-type(even) { background-color:#C6DDFF;}

You give your initial trs the someclass and the dynamicly added ones dont get this class.

Works fine: fiddle

UPDATE

When you add rows in the middle of the table this won't work: css3 nth of type restricted to class

edited May 23 '17 at 11:49

Community

1
1

answered Dec 29 '13 at 15:36

Markus Kottländer

8,228
4
37
61

1

It doesn't work because `nth-of-type` pseudo class counts the elements by their names, ignoring other things like the class. – Carlo Cannas Dec 29 '13 at 15:41
1

@BenM Try to add the new rows in the middle, not at the end. – Carlo Cannas Dec 29 '13 at 15:45
@CarloCannas Where does the OP say that's what he's doing? – BenM Dec 29 '13 at 15:47
i insert between 2 existing rows – HKK Dec 29 '13 at 15:48
...is there another way? is there anything other than `nth-of-type` to made different row Colors. Note: `` get made by `while mysqli_fetch_row()` – HKK Dec 29 '13 at 15:53
I dont think so. You'll have to add classes in your while. – Markus Kottländer Dec 29 '13 at 15:56
But thats not possible? i can only add 1 single class? – HKK Dec 29 '13 at 15:59
In your tr? You can add as many classes as you wish: class="class1 class2 classn" – Markus Kottländer Dec 29 '13 at 16:00
yes..but i can only add it to one tr... because i dont add a second tr in the while. the class i use in the first tr will be set to all other tr's because.. its a loop... – HKK Dec 29 '13 at 16:01
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/44100/discussion-between-markus-kottlander-and-hkk) – Markus Kottländer Dec 29 '13 at 16:01

CSS override / do only once?

1 Answers1