SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast Marcelo's Avatar
    Join Date
    Oct 2003
    Location
    Buenos Aires
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Parent and children CSS

    I have the following code:

    a:link { color: #333333; font-weight: bold; text-decoration: none; }
    a:visited { color: #333333; }
    a:active { color: #333333; }
    a:hover {color: #FFFFFF; text-decoration: none; cursor : hand;}

    But for a special section I have the following:

    a.tablejustified:link { color: #000000; text-decoration: none; }
    a.tablejustified:active { color: #000000; text-decoration: none; }
    a.tablejustified:visited { color: #000000; text-decoration: none; }
    a.tablejustified:hover { color: #FFCCAA; text-decoration: none; cursor: hand;}

    HTML

    <table class="tablejustified">
    <tr>
    <td><p>Title</p></td>
    </tr>

    <tr>
    <td><p>This is a text with a <a href="#">link</a></p></td>
    </tr>
    </table>

    Problem

    When I used this html with tablejustified class assigned to my table it continues display the parent "a" properties and not "a.tablejustifed".

    What's the solution to this?

    Thanks in advance,
    Marcelo

  2. #2
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The way you described your stylesheet you need to do this:

    <table>
    <tr>
    <td><p>Title</p></td>
    </tr>

    <tr>
    <td><p>This is a text with a <a href="#" class="tablejustified">link</a></p></td>
    </tr>
    </table>
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    What KLB said, or change your CSS selectors to something like this:
    Code:
    .tablejustified a:hover {
      /*any links inside of an element with a class of "tablejustified"*/
    }
    Also, selectORacle may be of interest to you. It takes complex CSS selectors and translates them into plain English.

  4. #4
    SitePoint Wizard Dangermouse's Avatar
    Join Date
    Oct 2003
    Posts
    1,024
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Oooh thats kewl!

  5. #5
    SitePoint Enthusiast Marcelo's Avatar
    Join Date
    Oct 2003
    Location
    Buenos Aires
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by KLB
    The way you described your stylesheet you need to do this:

    <table>
    <tr>
    <td><p>Title</p></td>
    </tr>

    <tr>
    <td><p>This is a text with a <a href="#" class="tablejustified">link</a></p></td>
    </tr>
    </table>
    That means I cannot make a class for a table?

    Thanks in advance,
    Marcelo

  6. #6
    SitePoint Enthusiast Marcelo's Avatar
    Join Date
    Oct 2003
    Location
    Buenos Aires
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    What KLB said, or change your CSS selectors to something like this:
    Code:
    .tablejustified a:hover {
      /*any links inside of an element with a class of "tablejustified"*/
    }
    Also, selectORacle may be of interest to you. It takes complex CSS selectors and translates them into plain English.
    I was doing a.tablejustified:hover instead of .tablejustified:hover

    Thanks, now it works...
    Marcelo


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
  •