Adjacent Sibling Selectors in CSS

  • Thread starter Thread starter Nathan Sokalski
  • Start date Start date
N

Nathan Sokalski

I'm not sure if this is the right place to ask this question, but I wasn't
sure where else to go. I have a table made of the following tags:

<table class="myclass">
<tbody>
<tr><td>.</td></tr>
<tr><td>.</td></tr>
<tr><td>.</td></tr>
</tbody>
</table>

The <tbody>.</tbody> section is repeated several times, so I do not want to
individually specify a style attribute or class in all instance, so I
decided to use a stylesheet. Here are the selectors I have:

..myclass{}
..myclass tbody{}
..myclass tbody tr{}
..myclass tbody tr td{}
..myclass tbody tr td *{}

These selectors work fine when you want the same style for all rows in the
tbody, but I want to specify different styles for the first, second, and
third tr tags (and their descendants, the td tag and anything inside the td
tag). I would think the adjacent sibling selector would be the solution for
this, giving me the following selectors:

For the second tr tag:
..myclass tbody tr+tr{}
..myclass tbody tr+tr td{}
..myclass tbody tr+tr td *{}
For the third tr tag:
..myclass tbody tr+tr+tr{}
..myclass tbody tr+tr+tr td{}
..myclass tbody tr+tr+tr td *{}

However, this does not seem to be working. It looks like the selectors I am
using for the second and third tr tags is being ignored, and the ones for
the first tr tag are being used (which is what I would expect if I did not
have the others). Am I doing something wrong? Is there a different selector
I should be using to style the second and third tr tags? Any help would be
appreciated. Thanks.
 
I'm not sure if this is the right place to ask this question, but I wasn't
sure where else to go. I have a table made of the following tags:

<table class="myclass">
    <tbody>
        <tr><td>.</td></tr>
        <tr><td>.</td></tr>
        <tr><td>.</td></tr>
    </tbody>
</table>

The <tbody>.</tbody> section is repeated several times, so I do not want to
individually specify a style attribute or class in all instance, so I
decided to use a stylesheet. Here are the selectors I have:

.myclass{}
.myclass tbody{}
.myclass tbody tr{}
.myclass tbody tr td{}
.myclass tbody tr td *{}

These selectors work fine when you want the same style for all rows in the
tbody, but I want to specify different styles for the first, second, and
third tr tags (and their descendants, the td tag and anything inside the td
tag). I would think the adjacent sibling selector would be the solution for
this, giving me the following selectors:

For the second tr tag:
.myclass tbody tr+tr{}
.myclass tbody tr+tr td{}
.myclass tbody tr+tr td *{}
For the third tr tag:
.myclass tbody tr+tr+tr{}
.myclass tbody tr+tr+tr td{}
.myclass tbody tr+tr+tr td *{}

However, this does not seem to be working. It looks like the selectors I am
using for the second and third tr tags is being ignored, and the ones for
the first tr tag are being used (which is what I would expect if I did not
have the others). Am I doing something wrong? Is there a different selector
I should be using to style the second and third tr tags? Any help would be
appreciated. Thanks.
Click to expand...

Whats wrong if you set two different class for your tr...
.str
{
}
.ttr
{
}

<table class="myclass">
<tbody>
<tr><td>.</td></tr>
<tr class='str'><td>.</td></tr>
<tr class='ttr'><td>.</td></tr>
</tbody>
</table>

some thing like that...

Best of luck

Munna
www.munna.shatkotha.com
www.munna.shatkotha.com/blog
www.shatkotha.com
 
as i understand the selector-syntax the selector for row one also
applies to rows two and three, and the selector for row two also
applies to row three.

e.g. a selector like "body span {}" applies to all span-elements in
the following hirarchy, regardless of where they stand. "body div
span{}" applies to span-element four and five and "body div div
span{}" just applies to span-element five.
<body>
<span></span>
<span></span>
<span></span>
<div>
<span></span>
<div>
<span></span>
</div>
</div>
</body>

to be honest i don't think there is a way to select a specific element
among siblings by just using the ancestor- and sibling-selectors.

i don't know what you are aiming at but, depending on the case, you
can try the following:
..use headerrow and footerrow-elements thead and tfoot for a table
(google).
..use id-or attribute-selectors to select a sepcific row.
..use class-selectors to select every first, second or third row.
 
I'm not going to say you're wrong about there not being a way to select a
specific element among siblings, since I have never used them, but if you
are right then what exactly is the purpose of the adjacent sibling selector?
Could you give me an example in which the adjacent sibling selector is used?
Thanks.
 
your selectors can be simpified:

table.myclass tr td {first row & default.. }
table.myclass tr+tr td {second row only .. }
table.myclass tr+tr+tr td {thirs row only .. }

you can even remove the table if myclass is only used for tables.

unfortunately you will need to wait for next release of IE for full support
of sibling (adjacent) selectors. although this will work fine for all other
popular browsers.

-- bruce (sqlwork.com)
 
i don't say that i am perfectly sure that i am right either.

a case where sibling-selection might be usefull would be an article in
which the first paragraph after a headline shall be formatted
differently than the other paragraphs - assuming that the headline-tag
and the paragraph-tag, lets say a div-tag, are siblings.

<div id="article">
<h1>Headline</h1>
<div>first paragraph</div>
<div>second paragraph</div>
</div>

selector:
#article h1+div{}


arthur
----------------------------------------------------
I'm not going to say you're wrong about there not being a way to
select a
specific element among siblings, since I have never used them, but if
you
are right then what exactly is the purpose of the adjacent sibling
selector?
Could you give me an example in which the adjacent sibling selector is
used?
Thanks.
--
Nathan Sokalski
(e-mail address removed)
http://www.nathansokalski.com/


----------------------------------------------------
 
Back
Top