Previous Message
Next Message

Re: [css-d] Everysecond row in a table?...

Sent by Chris Casciano on 30 January 2002 12:12


on 1/30/02 11:34 AM, Austin Govella at [EMAIL-REMOVED] wrote:

>> tr,tr+tr+tr,tr+tr+tr+tr+tr { background-color:#FFCCCC; }
>> tr+tr,tr+tr+tr+tr,tr+tr+tr+tr+tr+tr { background-color:#CCCCFF; }
>> 
>> Like this:
>> http://placenamehere.com/css-discuss/alternatingrowcolor.html
> 
> 
> selector-wise... how does this work?
> 

Well... Good question:

At first I tried something like the following (with tds instead) but it
didn't work:

tr { background-color:#FFCCCC; }
tr+tr,tr+tr+tr+tr,tr+tr+tr+tr+tr+tr { background-color:#CCCCFF; }

Instead, the first row was red and the rest were blue. Looking at it closer
that made sense:

Row one = matches tr - it is not preceded by any other trs
Row two = matches tr & tr+tr, but tr+tr was the latter declaration
Row three matches tr but it also matched tr+tr which was the latter
declaration and hence was blue also

So then I decided I'd be more explicit:

tr { red }
tr+tr { blue }
tr+tr+tr { red }
tr+tr+tr+tr { blue }
tr+tr+tr+tr+tr { red }

So then row 3 matched the tr,tr+tr,tr+tr+tr rules and since the latter was
the last declaration it would be the one used. So it worked, but I felt that
I was missing something about the cascade "rules" so I went to the spec,
found the part on the cascade, and found the little thing called
SPECIFICITY[1] that made everything sit a bit better with me. Gone was the
need to be the 'last' declaration because tr+tr+tr was more specific then
tr+tr [calculated as 003 vs, 002]. This meant I could condense this a bit
into the form I showed:

tr,tr+tr+tr,tr+tr+tr+tr+tr { }
tr+tr,tr+tr+tr+tr,tr+tr+tr+tr+tr+tr { }


[1] http://www.w3.org/TR/REC-CSS2/cascade.html#specificity

-- 
Chris Casciano                  home >> http://www.placenamehere.com/
                                words > http://www.chunkysoup.net/
[EMAIL-REMOVED]       fun >>> http://www.neuralust.com/~cac6982/
Previous Message
Next Message

Message thread:

Possibly related: