Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Alternating row classes

8 views
Skip to first unread message

emf

unread,
May 19, 2013, 4:00:41 AM5/19/13
to
In the following table:

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
<style type="text/css">
body {
background-color: black;
color:white;
}
table {
margin: auto;
width: 20em;
}
.gr { background: green; }
.rd { background: red; }
.bl { background: blue; }
</style>
</head>

<body>
<table>
<thead>
<tr class="gr">
<td>GREEN</td>
</tr>
</thead>
<tbody>
<tr class="rd">
<td>Red</td>
</tr>
<tr class="bl">
<td>Blue</td>
</tr>
<tr class="rd">
<td>Red</td>
</tr>
<tr class="bl">
<td>Blue</td>
</tr>
<tr class="rd">
<td>Red</td>
</tr>
<tr class="bl">
<td>Blue</td>
</tr>
</tbody>
</table>
<body>
</html>

red and blue rows are alternating each other. I am wondering if there is
a way to simplify the code by assigning a class to each following row
according to these lines:

tr[class="rd"] + tr { assign to tr class="bl" };
tr[class="bl"] + tr { assign to tr class="rd" };

Is there a way to do this?

emf

--
Natal Transits Calculator
https://files.nyu.edu/emf202/public/jv/nataltransits.html

Evertjan.

unread,
May 19, 2013, 4:46:58 AM5/19/13
to
emf wrote on 19 mei 2013 in comp.infosystems.www.authoring.stylesheets:

> red and blue rows are alternating each other. I am wondering if there is
> a way to simplify the code by assigning a class to each following row
> according to these lines:
>
> tr[class="rd"] + tr { assign to tr class="bl" };
> tr[class="bl"] + tr { assign to tr class="rd" };
>
> Is there a way to do this?
>

<!DOCTYPE HTML>
<style type='text/css'>
tr:nth-child(odd) td { color:blue; }
tr:nth-child(even) td { color:red; }
</style>

<table>
<tr><td>xxxxxxxxx
<tr><td>xxxxxxxxx
<tr><td>xxxxxxxxx
<tr><td>xxxxxxxxx
</table>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Thomas 'PointedEars' Lahn

unread,
May 19, 2013, 5:22:37 AM5/19/13
to
emf wrote:

> red and blue rows are alternating each other. I am wondering if there is
> a way to simplify the code by assigning a class to each following row
> according to these lines:
>
> tr[class="rd"] + tr { assign to tr class="bl" };
> tr[class="bl"] + tr { assign to tr class="rd" };
>
> Is there a way to do this?

Yes, see my previous posting.


PointedEars
--
Danny Goodman's books are out of date and teach practices that are
positively harmful for cross-browser scripting.
-- Richard Cornford, cljs, <cife6q$253$1$8300...@news.demon.co.uk> (2004)

Jeff North

unread,
May 19, 2013, 7:29:09 AM5/19/13
to
On Sun, 19 May 2013 04:00:41 -0400, in
comp.infosystems.www.authoring.stylesheets emf <emf...@gmail.com>
<kna0qv$nqb$1...@speranza.aioe.org> wrote:

[snip]
>|
>| red and blue rows are alternating each other. I am wondering if there is
>| a way to simplify the code by assigning a class to each following row
>| according to these lines:
>|
>| tr[class="rd"] + tr { assign to tr class="bl" };
>| tr[class="bl"] + tr { assign to tr class="rd" };
>|
>| Is there a way to do this?
>|
>| emf

You can use:
thead td { color: green; }
tr:nth-child(odd) { color: red; }
tr:nth-child(even) { color: blue; }

But :nth-child is not supported in IE 6,7 or 8. If you want to have
this visual in IE then you will have to stick with classes on each
row.

Jukka K. Korpela

unread,
May 19, 2013, 7:47:52 AM5/19/13
to
2013-05-19 14:29, Jeff North wrote:

> But :nth-child is not supported in IE 6,7 or 8. If you want to have
> this visual in IE then you will have to stick with classes on each
> row.

It suffices to have a class on every other row. Set the desired
background and other properties on cells in general, then override them
for even-numbered rows, on the basis of class attributes.

But this tends to be too clumsy as compared with the gain. Unless
someone pays you for supporting IE 8 and older, use :nth-child(even).
Even if you are required to support old versions of IE, you might decide
to to Selectivzr.js (unless your boss or client really wants you to
support IE 8 and older with scripting disabled).

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Evertjan.

unread,
May 19, 2013, 8:56:08 AM5/19/13
to
Jukka K. Korpela wrote on 19 mei 2013 in
comp.infosystems.www.authoring.stylesheets:
If you are paid for older versions of this dying browser,
better pay for serverside code to determine such uneven oddness.

btw:

:nth-child by design should work on all siblings: tr, td, li, span, img,
etc.

===========================

<!DOCTYPE HTML>
<style type='text/css'>
table tr td {color:white;padding:20px 100px;
border-radius:40px;-moz-border-radius:40px;}

table tr:nth-child(even) td:nth-child(even)
{background-color:red;}
table tr:nth-child(even) td:nth-child(odd)
{background-color:green;}
table tr:nth-child(odd) td:nth-child(odd)
{background-color:red;}
table tr:nth-child(odd) td:nth-child(even)
{background-color:green;}

table tr:nth-last-child(-n+2) td
{font-size:33pt;}
</style>

<table>
<tr><td>aaaaa<td>bbbbb<td>c
<tr><td>bbbbb<td>aaaaa<td>c
<tr><td>aaaaa<td>bbbbb<td>c
<tr><td>bbbbb<td>aaaaa<td>c
<tr><td>aaaaa<td>bbbbb<td>c
<tr><td>bbbbb<td>aaaaa<td>c
<tr><td>aaaaa<td>bbbbb<td>c
<tr><td>bbbbb<td>aaaaa<td>c
</table>

===========================

<http://www.w3.org/TR/selectors/#nth-last-child-pseudo>

Thomas 'PointedEars' Lahn

unread,
May 19, 2013, 11:38:11 AM5/19/13
to
Jeff North wrote:

> On Sun, 19 May 2013 04:00:41 -0400, in
> comp.infosystems.www.authoring.stylesheets emf <emf...@gmail.com>
> <kna0qv$nqb$1...@speranza.aioe.org> wrote:

It's attribution _line_, not attribution novel.

> thead td { color: green; }
> tr:nth-child(odd) { color: red; }
> tr:nth-child(even) { color: blue; }
>
> But :nth-child is not supported in IE 6,7 or 8.

And it certainly is unnecessary to use both :nth-child(odd) and
:nth-child(even) for the same element type in the same context
as they are mutually exclusive.

> If you want to have this visual in IE then you will have to stick with
> classes on each row.

However, it is also possible to use client-side scripting to assign those
classes, thereby trigger the same formatting, afterwards. See
<http://PointedEars.de/es-matrix> for an example (alternateRows() in
test/es-matrix/table.js).


PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16

dorayme

unread,
May 19, 2013, 5:38:34 PM5/19/13
to
In article <kna0qv$nqb$1...@speranza.aioe.org>, emf <emf...@gmail.com>
wrote:

> red and blue rows are alternating each other. I am wondering if there is
> a way to simplify the code by assigning a class to each

If there are a lot of rows, I would assign a background-color to all
rows in the CSS and then class alternative rows to change to another
color. Does not take a minute to type up really (bang on a letter to
<tr> like <trl> and FIND <trl> and REPLACE with <tr
class="alternative"> in your good editor.

This is a humble and old fashioned and rock-solid way and it will
stand you in good stead at The Gates.

--
dorayme
0 new messages