Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    accessing embedded divs and html code

    Take the following code example. How can I access element two via CSS without affecting the other elements? Sorry for dumb noobie question.
    Code:
    <div id="content">
    
    <table id="data">
    <tr id="element_1"><td></td><td>element 1</td><td class="data">xxx</td></tr>
    <tr id="element_2"><td></td><td>element 2</td><td class="data">xxx</td></tr>
    <tr id="element_3"><td></td><td>element 3</td><td class="data">xxx</td></tr>
    </table>
    <div>
    Say I want to change the second element only. How could I code it?

    what if the division was also within another division, like this?
    Code:
    <div id="page"
    <div id="content">
    
    <table id="data">
    <tr id="element_1"><td></td><td>element 1</td><td class="data">xxx</td></tr>
    <tr id="element_2"><td></td><td>element 2</td><td class="data">xxx</td></tr>
    <tr id="element_3"><td></td><td>element 3</td><td class="data">xxx</td></tr>
    </table>
    <div>
    <div>

  • #2
    New Coder
    Join Date
    Oct 2011
    Posts
    27
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Well you could use the id as reference:

    #element_2 {....}

    If you dont want to use the id you could probably use the first-child selector and then the "+" for next sibling.

    #data:first-child + tr {...} should give you the 2. child

    #data:first-child + tr + tr {...} should give you the 3. child

    and so on.

    I didn't test the second one, but afaik it should work...

    With CSS3 you can also select the nth child directly:

    #data:nth-child(3) {...} should give you the 3. child
    Last edited by moon-safari; 11-21-2011 at 11:09 PM.


  •  

    Posting Permissions

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