?
Solved

CSS color every TWO rows?

Posted on 2011-02-17
20
Medium Priority
?
694 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 11
  • 9
20 Comments
 
LVL 9

Expert Comment

by:rawinnlnx9
ID: 34919612
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
ID: 34919617
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
ID: 34919632
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
Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

 
LVL 9

Expert Comment

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

Author Comment

by:Cerixus
ID: 34919651
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
ID: 34919674
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
ID: 34919720
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
ID: 34919745
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
ID: 34919795
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
ID: 34919802
I can, but the original question specifically mentioned avoiding that.
0
 
LVL 9

Expert Comment

by:rawinnlnx9
ID: 34919838
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 2000 total points
ID: 34919879
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
ID: 34919895
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
ID: 34919950
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
ID: 34919956
And it makes sense now that I see it :)
0
 
LVL 9

Expert Comment

by:rawinnlnx9
ID: 34919996
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
ID: 34920007
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
ID: 34920023
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
ID: 34920043
Oh cool. Yeah that is helpful! Pretty nifty.
0
 
LVL 1

Author Closing Comment

by:Cerixus
ID: 34949787
Thanks for leading me to the answer.
0

Featured Post

WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

770 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