Adjacent Sibling Selectors in CSS

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>.</tbodysection 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.
--
Nathan Sokalski
nj********@hotm ail.com
http://www.nathansokalski.com/

Jun 27 '08 #1

Subscribe Reply

1743

Munna

On Jun 23, 10:02*am, "Nathan Sokalski" <njsokal...@hot mail.comwrote:

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>.</tbodysection 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.
--
Nathan Sokalski
njsokal...@hotm ail.comhttp://www.nathansokal ski.com/

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

Jun 27 '08 #2

Arthur Milfait

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.

Jun 27 '08 #3

Nathan Sokalski

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
nj********@hotm ail.com
http://www.nathansokalski.com/

"Arthur Milfait" <am*@gmx.infowr ote in message
news:96******** *************** ***********@t54 g2000hsg.google groups.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.

Jun 27 '08 #4

=?Utf-8?B?YnJ1Y2UgYmFya2Vy?=

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)
"Nathan Sokalski" wrote:

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>.</tbodysection 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.
--
Nathan Sokalski
nj********@hotm ail.com
http://www.nathansokalski.com/

Jun 27 '08 #5

Arthur Milfait

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
njsokal...@hotm ail.com
http://www.nathansokalski.com/

"Arthur Milfait" <a...@gmx.infow rote in message

news:96******** *************** ***********@t54 g2000hsg.google groups.com
----------------------------------------------------

Jun 30 '08 #6

Similar topics

11292

Problems using the "following-sibling"-expression in XPATH

by: Peter Rohleder | last post by:

Hi, I'm using a style-sheet where I make use of the XPATH-"following-sibling"-expression. The part which makes problems looks similar to the following code: --------------------------- <xsl:for-each select="headdata/extension/person">

.NET Framework

5877

Access only next sibling element with XSL

by: Michael K?nig | last post by:

Hello, I've an XML-file structured like this <table> <tr> <td>Nombre:</td> <td>Joseph</td> <td>Apellido:</td> <td>Ratzinger</td>

.NET Framework

2613

Id v Class Selectors

by: Tony Benham | last post by:

I have been getting to grips with css recently (very slowly), and one area I have a problem is when to use class selectors or id selectors. Are there any guidelines when to use each type ? The key difference is, AFAICS, is that id selectors can only be used once, whereas class selectors can be used repeatedly ? Is this the main differentiator...

HTML / CSS

1765

Adjacent selectors not supported in any MSIE?

by: Stan Brown | last post by:

Brian Wilson's Index Dot CSS at <http://www.blooberry.com/indexdot/css/supportkey/syntax.htm> says that no version of MSIE supports adjacent sibling selectors, such as p+p. Is that actually true? I use p+p pretty extensively, because I like the first paragraph of a group to be flush left and with a top margin, while later paragraphs in...

HTML / CSS

4241

priority of descendent selectors

by: Andy Fish | last post by:

hi, I am using descendent selectors to format cells within a table according to the css class of the table. However, when using nested tables, it seems to pick up the outer matching rule rather than the inner one. here's a self-contained example: <HTML><HEAD> <style type="text/css"> table.foo td { background-color:red; }

HTML / CSS

1099

Sibling Mode not working on Menu Items when calling HtmlHelp?

by: Elaine | last post by:

I have a truly curious problem with HtmlHelp and Sibling Mode in Visual C++ ..Net 2003 in an MFC app. Sibling mode allows the help viewer to display on top of the app, but if the app is clicked, then the app becomes the top most window. The idea is to let the user switch back and forth between the help viewer and the application. For the...

.NET Framework

1757

Indenting headings and adjacent siblings?

by: sgarfunkle | last post by:

I have a complex document that goes several heading levels deep, and it's unreadable with all the headings and paragraphs against the left margin. I'd like to indent H2 elements by 50 pixels, H3 elements by 100 pixels, and so on. The tricky part is that I need to get the paragraphs following each heading as well. Grouping everything in a...

HTML / CSS

2128

how to find not the next sibling but the 2nd sibling or find sibling "a" OR sinbling "b"

by: localpricemaps | last post by:

i have some html which looks like this where i want to scrape out the href stuff (the www.cnn.com part) <div class="noFood">Cheese</div> <div class="food">Blue</div> <a class="btn" href = "http://www.cnn.com"> so i wrote this code which scrapes it perfectly:

Python

2741

Remove sibling elements according to the value of an attribute

by: patrizio.trinchini | last post by:

Hi, how can remove sibling elements based on the value of an attribute ? For instance, gven the XML document: <root> <parentElment> <testElement name="A"> <removableElement/>

.NET Framework

7504

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...

General

7435

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...

Windows Server

7694

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...

C / C++

7947

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...

Online Marketing

7461

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...

Windows Server

7792

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...

General

5360

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...

Microsoft Access / VBA

5080

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...

C# / C Sharp

747

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

General