Adjacent Sibling Selectors in CSS

Discussion in 'ASP .Net' started by Nathan Sokalski, Jun 23, 2008.

  1. 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.
    --
    Nathan Sokalski

    http://www.nathansokalski.com/
    Nathan Sokalski, Jun 23, 2008
    #1
    1. Advertising

  2. Nathan Sokalski

    Munna Guest

    On Jun 23, 10:02 am, "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>.</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.
    > --
    > Nathan Sokalski
    > ://www.nathansokalski.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
    Munna, Jun 23, 2008
    #2
    1. Advertising

  3. 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.
    Arthur Milfait, Jun 23, 2008
    #3
  4. 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

    http://www.nathansokalski.com/

    "Arthur Milfait" <> wrote in message
    news:...
    > 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.
    Nathan Sokalski, Jun 23, 2008
    #4
  5. Nathan Sokalski

    bruce barker Guest

    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>.</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.
    > --
    > Nathan Sokalski
    >
    > http://www.nathansokalski.com/
    >
    >
    >
    bruce barker, Jun 23, 2008
    #5
  6. 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

    http://www.nathansokalski.com/

    "Arthur Milfait" <> wrote in message

    news:
    ----------------------------------------------------
    Arthur Milfait, Jun 30, 2008
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Matt Beckwith

    Class and ID Selectors (CSS question)

    Matt Beckwith, Jul 12, 2003, in forum: HTML
    Replies:
    3
    Views:
    380
    David Dorward
    Jul 13, 2003
  2. Derek Clarkson
    Replies:
    3
    Views:
    378
    Derek Clarkson
    Nov 7, 2003
  3. Nik Coughin

    css - descendant selectors

    Nik Coughin, Jan 28, 2004, in forum: HTML
    Replies:
    2
    Views:
    387
    Alliss
    Jan 29, 2004
  4. Replies:
    11
    Views:
    651
    Fredrik Lundh
    Jan 23, 2006
  5. Replies:
    3
    Views:
    114
Loading...

Share This Page