Solved

CSS color every TWO rows?

Posted on 2011-02-17
20
646 Views
Last Modified: 2012-08-14
I want to alternate background color on every set of two rows.

I know you can do this to alternate each row:

.GeneralTable tr:nth-child(even)          {background: #FFFFFF}
.GeneralTable tr:nth-child(odd)           {background: #FCFCFC}        

But for example, I want the following:

 Row1: #FFFFFF
 Row2: #FFFFFF
 Row3: #FCFCFC
 Row4: #FCFCFC
 Row5: #FFFFFF
 Row6: #FFFFFF

etc...  I can do this programmatically, obviously, but I'm wondering if there is a CSS trick?
0
Comment
Question by:Cerixus
  • 11
  • 9
20 Comments
 
LVL 9

Expert Comment

by:rawinnlnx9
Comment Utility
Here you go, a very simple discussion and it will get you going: http://www.somacon.com/p338.php
0
 
LVL 9

Expert Comment

by:rawinnlnx9
Comment Utility
Oh heck. Sorry you meant row 1,2 (colorx) row 3,4 (colory). Let me figure that out.
0
 
LVL 9

Expert Comment

by:rawinnlnx9
Comment Utility
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>

Open in new window

0
 
LVL 9

Expert Comment

by:rawinnlnx9
Comment Utility
That should make very every alternating row-pair.
0
 
LVL 1

Author Comment

by:Cerixus
Comment Utility
That's assigning a color to each row, no?  I might have 10,000 rows, I don't want an individual style for each.
0
 
LVL 1

Author Comment

by:Cerixus
Comment Utility
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.
0
 
LVL 9

Expert Comment

by:rawinnlnx9
Comment Utility
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.
0
 
LVL 1

Author Comment

by:Cerixus
Comment Utility
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.
0
 
LVL 9

Expert Comment

by:rawinnlnx9
Comment Utility
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?
0
 
LVL 1

Author Comment

by:Cerixus
Comment Utility
I can, but the original question specifically mentioned avoiding that.
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 9

Expert Comment

by:rawinnlnx9
Comment Utility
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 */

Open in new window

0
 
LVL 9

Accepted Solution

by:
rawinnlnx9 earned 500 total points
Comment Utility
So here is what you want I think...

tr:nth-child(2n+1)
tr:nth-child(2n+2)
tr:nth-child(2n+3)
tr:nth-child(2n+4)
0
 
LVL 1

Author Comment

by:Cerixus
Comment Utility
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.
0
 
LVL 1

Assisted Solution

by:Cerixus
Cerixus earned 0 total points
Comment Utility
Got it!

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

Neat.
0
 
LVL 1

Author Comment

by:Cerixus
Comment Utility
And it makes sense now that I see it :)
0
 
LVL 9

Expert Comment

by:rawinnlnx9
Comment Utility
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
0
 
LVL 1

Author Comment

by:Cerixus
Comment Utility
http://reference.sitepoint.com/css/understandingnthchildexpressions

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

Expert Comment

by:rawinnlnx9
Comment Utility
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.
0
 
LVL 9

Expert Comment

by:rawinnlnx9
Comment Utility
Oh cool. Yeah that is helpful! Pretty nifty.
0
 
LVL 1

Author Closing Comment

by:Cerixus
Comment Utility
Thanks for leading me to the answer.
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now