CSS color every TWO rows?

Here you go, a very simple discussion and it will get you going: http://www.somacon.com/p338.php

Oh heck. Sorry you meant row 1,2 (colorx) row 3,4 (colory). Let me figure that out.

So here's the example that I linked to:

<style type="text/css">
table.sample {
	border: 6px inset #8B8378;
	-moz-border-radius: 6px;
}
table.sample td {
	border: 1px solid black;
	padding: 0.2em 2ex 0.2em 2ex;
	color: black;
}
table.sample tr.d0A td {
	background-color: #FCF6CF;
}
table.sample tr.d0B td {
	background-color: #FCF6CF;
}

table.sample tr.d1A td {
	background-color: #FEFEF2;
}
table.sample tr.d1B td {
	background-color: #FEFEF2;
}

</style>
<table class="sample">
<tr class="d0A"><td>One</td><td>Fish</td></tr>
<tr class="dOB"><td>Two</td><td>Fish</td></tr>
<tr class="d1A"><td>Red</td><td>Fish</td></tr>
<tr class="d1B"><td>Blue</td><td>Fish</td></tr>
</table>

Select allOpen in new window

That should make very every alternating row-pair.

That's assigning a color to each row, no?  I might have 10,000 rows, I don't want an individual style for each.

Oh I see, but I'd still have to assign a class to each row which won't work because the rows are all generated dynamically.  I'd have to programmatically have a flag to alternate the styles I apply and at that point I may as well do the colors inline.

No, that should do it. It will continue that pattern for N+1 rows. I'm testing it right now. I'm only using those 4 classes on about 100 rows. I'll reply with results.

but simply having to apply  class="d0A" or  class="d0B" is what causes my problem.

In my original, alternating example, it's all dynamic.  You just apply a class to the table and it automatically does odd/even rows.

Oh, so that does change things. I started to play with this. I've done this before let me dig and see how I did this. Maybe someone else has a concise answer. Mine would require that you dynamically set each class to one of 4 in a loop. Now that would be trivial. Is that an option? Can you just inject a classname into the TR of the html?

I can, but the original question specifically mentioned avoiding that.

Using simple math you should be able to make this happen. You can put equations in for odd/even.

tr:nth-child(2n+1) /* represents every odd row of an HTML table */
tr:nth-child(odd)  /* same */
tr:nth-child(2n+0) /* represents every even row of an HTML table */
tr:nth-child(even) /* same */

Select allOpen in new window

I don't think it works like that.  Well, I know it doesn't:

.GeneralTable tr:nth-child(2n+1)          {background: #FFFFFF}
.GeneralTable tr:nth-child(2n+2)          {background: #FFFFFF}
.GeneralTable tr:nth-child(2n+3)          {background: #FCFCFC}
.GeneralTable tr:nth-child(2n+4)          {background: #FCFCFC}

results in the first two rows being white and the rest being gray.

And it makes sense now that I see it :)

Weird. I just tested it with 2n+1, etc... and here's the output I got.

1red
2red
3blue
4blue
3red
4red
5blue
6blue
5red
6red
7blue
8blue
7red
8red
9blue
10blue
9red
10red
11blue
12blue
11red
12red
13blue
14blue
13red
14red
15blue
16blue
15red
16red
17blue
18blue
17red
18red
19blue
20blue
19red
20red
21blue
22blue
21red
22red
23blue
24blue
23red
24red
25blue
26blue
25red
26red
27blue
28blue
27red
28red
29blue
30blue
29red
30red
31blue
32blue
31red
32red
33blue
34blue
33red
34red
35blue
36blue
35red
36red
37blue
38blue
37red
38red
39blue
40blue
39red
40red
41blue
42blue
41red
42red
43blue
44blue
43red
44red
45blue
46blue
45red
46red
47blue
48blue
47red
48red
49blue
50blue
49red
50red
51blue
52blue
51red
52red
53blue
54blue
53red
54red
55blue
56blue
55red
56red
57blue
58blue
57red
58red
59blue
60blue
59red
60red
61blue
62blue
61red
62red
63blue
64blue
63red
64red
65blue
66blue
65red
66red
67blue
68blue
67red
68red
69blue
70blue
69red
70red
71blue
72blue
71red
72red
73blue
74blue
73red
74red
75blue
76blue
75red
76red
77blue
78blue
77red
78red
79blue
80blue
79red
80red
81blue
82blue
81red
82red
83blue
84blue
83red
84red
85blue
86blue
85red
86red
87blue
88blue
87red
88red
89blue
90blue
89red
90red
91blue
92blue
91red
92red
93blue
94blue
93red
94red
95blue
96blue
95red
96red
97blue
98blue
97red
98red
99blue
100blue
99red
100red
101blue
102blue
101red
102red
103blue
104blue
103red
104red
105blue
106blue
105red
106red
107blue
108blue
107red
108red
109blue
110blue
109red
110red
111blue
112blue
111red
112red
113blue
114blue
113red
114red
115blue
116blue
115red
116red
117blue
118blue
117red
118red
119blue
120blue
119red
120red
121blue
122blue
121red
122red
123blue
124blue
123red
124red
125blue
126blue
125red
126red
127blue
128blue
127red
128red
129blue
130blue
129red
130red
131blue
132blue
131red
132red
133blue
134blue
133red
134red
135blue
136blue
135red
136red
137blue
138blue
137red
138red
139blue
140blue
139red
140red
141blue
142blue
141red
142red
143blue
144blue
143red
144red
145blue
146blue
145red
146red
147blue
148blue
147red
148red
149blue
150blue
149red
150red
151blue
152blue
151red
152red
153blue
154blue
153red
154red
155blue
156blue
155red
156red
157blue
158blue
157red
158red
159blue
160blue
159red
160red
161blue
162blue
161red
162red
163blue
164blue
163red
164red
165blue
166blue
165red
166red
167blue
168blue
167red
168red
169blue
170blue
169red
170red
171blue
172blue
171red
172red
173blue
174blue
173red
174red
175blue
176blue
175red
176red
177blue
178blue
177red
178red
179blue
180blue
179red
180red
181blue
182blue
181red
182red
183blue
184blue
183red
184red
185blue
186blue
185red
186red
187blue
188blue
187red
188red
189blue
190blue
189red
190red
191blue
192blue
191red
192red
193blue
194blue
193red
194red
195blue
196blue
195red
196red
197blue
198blue
197red
198red
199blue
200blue
199red
200red
201blue
202blue

http://reference.sitepoint.com/css/understandingnthchildexpressions

This should explain why that doesn't make sense and 4n does.

Funny! When I did it though my instincts told me that it should be 4n+1, so that's kind of funny. Well cool! So that's kind of sweet. Takes me back to my probabilities and stats where we plaid around with sequences and series.

Oh cool. Yeah that is helpful! Pretty nifty.

Thanks for leading me to the answer.