SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member nelwa's Avatar
    Join Date
    Apr 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool how to address a parent element

    Hi,

    I would like to find out how to apply a style to a parent element depending on the child element for instance:

    say I have the following html:
    <td><label for='name'>Name: </label></td>

    I would like to specify that all td tags that are directly followed by a label tag should be right aligned, how do I do that??

    Thanks
    nelwa

  2. #2
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    Code:
    td label
    {
        text-align: right;
    }

  3. #3
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by stymiee
    Code:
    td label
    {
        text-align: right;
    }
    Code:
    td label
    {
        display: block;
        text-align: right;
    }

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I would like to find out how to apply a style to a parent element depending on the child element for instance:
    You can't style the parent but you can style the child label as in John's example. You would need javascript if you wanted to travel up the tree.

    Css basically only cascades downwards (or sideways adjacent sibling selectors etc).

    More info:

    http://www.andybudd.com/archives/200...m_css3_part_2/
    http://www.456bereastreet.com/archiv...ors_explained/

  5. #5
    SitePoint Member nelwa's Avatar
    Join Date
    Apr 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    umm, this code:

    td label
    {
    text-align: right;
    }
    adds the style to the child element, in this case the label tag - I want to reference the parent...

  6. #6
    SitePoint Member nelwa's Avatar
    Join Date
    Apr 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul O'B,

    sorry, I already replied before I noticed your message... so you say there's actually no way that this could be done?

    This sucks!, I hope it gets introduced into css in the near future..

    Thanks
    nelwa

  7. #7
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    You'll probably need to add a class="" to the specific <tr>'s.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    sorry, I already replied before I noticed your message... so you say there's actually no way that this could be done?

    This sucks!, I hope it gets introduced into css in the near future..
    No there's currently no way to do it with css but you could do in javascript by traversing up the dom and applying a class etc.

    The only way at present in css is to just add a class or id to the element in question as already mentioned.

    If you read the links I posted then a parent selector is discussed but it seems that it is not on the horizon for various reasons, although there may be a certain combination of those advanced selectors ( in the second link) that may come close. However it will be years before they can be used I'm afraid

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    If you wanted to do it i javascript then you could do something like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Horizontal Drop Down Menus</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    function startSrch(){
    	srchTd('lblsrch'); // list your list id's here
    }
    srchTd = function(ulid) {
     var sfEls = document.getElementById(ulid).getElementsByTagName("Label");
     for (var i=0; i<sfEls.length; i++) {
    	sfEls[i].parentNode.className+=" test";
      }
    }
    window.onload=startSrch;
    //--><!]]></script>
    <style type="text/css">
    body {
     font: normal 11px verdana;
     }
    .test{text-align:right;color:red}
    </style>
    </head>
    <body>
    <form id="form1" name="form1" method="post" action="">
     <table id="lblsrch"  cellspacing="0" cellpadding="0">
      <tr>
       <td class="test"><label for="textfield">test</label>
    	<input type="text" name="textfield" id="textfield" value="testing" /><p>Some right text</p>
       </td>
      </tr>
      <tr>
       <td><p>not a label here</p></td>
      </tr>
      <tr>
       <td><label for="textfield2">test</label>
    	<input type="text" name="textfield2" id="textfield2" /><p>Some right text</p>
       </td>
      </tr>
      <tr>
       <td><label for="textfield3">test</label>
    	<input type="text" name="textfield3" id="textfield3" /><p>Some right text</p>
       </td>
      </tr>
      <tr>
       <td><p>not a label here</p></td>
      </tr>
      <tr>
       <td><p>not a label here</p></td>
      </tr>
      <tr>
       <td><p>not a label here</p></td>
      </tr>
      <tr>
       <td><label for="textfield4">test</label>
    	<input type="text" name="textfield4" id="textfield4" /><p>Some right text</p>
       </td>
      </tr>
      <tr>
       <td><p>not a label here</p></td>
      </tr>
      <tr>
       <td><p>not a label here</p></td>
      </tr>
     </table>
    </form>
    </body>
    </html>
    However that code is assuming too much and you'd need to test at each stage to see what you've got.The code above is just assuming that a label is a direct child of the td and then adds a class to its parent. I'm sure the JS forum could give you a full solution

  10. #10
    SitePoint Member nelwa's Avatar
    Join Date
    Apr 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! that'll work fine!

    nelwa
    http://www.nellen.co.za


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •