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 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    18
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Inheritance Confusion...

    Hi There -

    Am having some confusion with CSS inheritance.

    I'm working with a Drupal where I don't have control over the html output and everything seems to have extra layers of divs generated by the cms.

    I have a large container div with id=forum.
    Nested inside a table inside that div are more divs.
    Inside of that I have links inside a div that has class=name.

    Like this:
    Code:
    <div id="forum">
    <ul>
    </ul>
    <table>
    <thead>
    </thead>
    <tbody>
    <tr class="odd">
    <td class="container" colspan="4">
    <div style="margin-left: 0px;">
    <div class="name">
    </div>
    <div class="description">Containers that will look OK as and when we decide to use forum Containers.</div>
    </div>
    </td>
    </tr>
    <tr class="even">
    <td class="forum">
    <div style="margin-left: 30px;">
    <div class="name">
    <a href="/forums/samplecontainer/sample-forum-for-sample-container">Sample forum for sample container</a>
    </div>
    How do I address these so that only the links within the forum are affected by this rule? The following rule is affecting all of the links in the whole site, no matter what the id or class. I thought I understood how to address these, but it's clear to me now that I don't. I'd appreciate any help I can get with this.

    Just to be clear, I'm trying to address the text that says 'Sample forum for sample container' in the very last div in the code above.

    Here's what I was trying to use:
    Code:
    #forum .name a:link, a:visited, a:hover {
    color:#F79239;
    }
    I've also tried permutations; #forum.name a:link etc. I don't want to be 'lucking' into something that sorta works. I really want to nail this.

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    capoeirista (12-31-2007)

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by capoeirista View Post
    Here's what I was trying to use:
    Code:
    #forum .name a:link, a:visited, a:hover {
    color:#F79239;
    }
    I've also tried permutations; #forum.name a:link etc. I don't want to be 'lucking' into something that sorta works. I really want to nail this.
    I’m guessing that you don’t understand how selector syntax works. Look at your selector again with line breaks as shown below.

    Code:
    #forum .name a:link,
    a:visited,
    a:hover { …
    See the problem yet? Try a selector like that shown below.

    Code:
    #forum .name a:link, #forum .name a:visited, #forum .name a:hover { …
    Even the above selector is redundant though unless you want to differentiate styling between anchor elements with a href attribute and those without. If not, the following selector would probably suffice.

    Code:
    #forum .name a { …
    Tangential Information
    I do realize that you said that you lack control over the HTML output. Despite this, I would point out that the HTML you’ve shown contains errors: the ul and thead elements are missing required child elements.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    capoeirista (12-31-2007)

  • #4
    New Coder
    Join Date
    Aug 2007
    Posts
    18
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Thanks you guys! You're awesome!


  •  

    Posting Permissions

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