SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    styling multiple links within the same div without classes?

    Heres my code for one of my link styles

    #content a {
    color: #333;
    outline: 0;
    text-decoration: underline;
    }
    #content a:visited {
    color: #333;
    }
    #content a:active, #content a:focus, #content a:hover {
    text-decoration: none;
    background: #F1F1E4;
    padding: 0 0 2px;
    }

    I want to have a completely different styled link for the home pages content div. Seems easy enough to me - just give the body on the home page a id of #home and add the id home to the above rules - right? But I cannot for the life of me get it to fly. Can you have two different ids on one link? If so how should it look - what order? I know I could always just give each a separate class or just give the home page a different div name - but it's bugging me that I can't do it the way I would prefer. Thanks!

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So you have this... right? ::

    Code HTML4Strict:
    <body id="home">

    And this? ::

    Code CSS:
    #home #content a {
    [RULES HERE]
    }

    It should work. Can we see all the code used?

    I am thinking that maybe the "#content a:visited" rule would have a higher specificity than "#home #content a" - Maybe this is the issue - I mean you have 'visited' that page so it will use that pseudo class as a rule.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Here we go - heres the site itself

    http://www.littleaboutalot.com/

    and here is the code to all the links. Basically I would like to change the #nav to (#home #content a:link) but for some reason it won't work.

    /* ------------------- Links ---------------------- */
    #content a {
    color: #333;
    outline: 0;
    text-decoration: underline;
    }
    #content a:visited {
    color: #333;
    }
    #content a:active, #content a:focus, #content a:hover {
    text-decoration: none;
    background: #F1F1E4;
    padding: 0 0 2px;
    }
    /* --------------------- Menus ---------------------- */
    /* Main Menu */
    #nav ul {
    list-style: none;
    }
    #nav li {
    font-size: 1.4em;
    }
    #nav li a {
    position: relative;
    height: 1em;
    color: #333;
    text-decoration: none;
    padding: 0 0 1px;
    margin: 0 6px;
    display: block;
    letter-spacing: 1px;
    outline: 0;
    }
    #nav li a:visited {
    color: #333;
    }
    #nav li a:active, #nav li a:focus, #nav li a:hover {
    background-color: #F1F1E4;
    }
    /* Footer Menu */
    #footer ul {
    padding: 1.3em 0 .5em;
    list-style: none;
    }
    #footer li {
    display: inline;
    word-spacing: 5px;
    font-size: 1.4em;
    }
    #footer a, #footer a:visited {
    text-decoration: none;
    color: #333;
    outline: 0;
    }
    #footer a:active, #footer a:focus, #footer a:hover {
    text-decoration: underline;
    }

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Also, I would think that #home #content would have a higher specificity than #content? The reason for the change is I would like to actually put in place a navigation menu up top. And right now the #nav is the rules for the 6 articles. I want to change that to #home #content a {rules;}

  5. #5
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am sorry.... maybe I am being blind here.. but where is the #content element you are referring to? (I mean, where in the HTML is it?)
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  6. #6
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ewwatson View Post
    Also, I would think that #home #content would have a higher specificity than #content?
    That's true, but the addition of a pseudo-class to "#content a" means that it has higher specifity than any other assuming that the pseudo-c is activated...
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  7. #7
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In other words this:

    Code:
    a:link {}
    would have a higher specificity than this:

    Code:
    body a {}
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Sorry - the #content in the html is on every page except the index page. The reason for the change is I would like to actually put in place a navigation menu up top. And right now the #nav is the rules for the 6 articles. I want to change that to #home #content a {rules;}

    OK what you said makes sense. So is there any way that you know of to set up the rules as I want? The rules would look like this - and work of course - because if I do it this way now they don't. But this is how I want them.

    #content a {
    color: #333;
    outline: 0;
    text-decoration: underline;
    }
    #content a:visited {
    color: #333;
    }
    #content a:active, #content a:focus, #content a:hover {
    text-decoration: none;
    background: #F1F1E4;
    padding: 0 0 2px;
    }

    And then

    #home #content a {
    color: #333;
    outline: 0;
    text-decoration: underline;
    }
    #home #content a:visited {
    color: #333;
    }
    #home #content a:active, #home #content a:focus, #home #content a:hover {
    text-decoration: none;
    background: #F1F1E4;
    padding: 0 0 2px;
    }

    So the later should have a higher specificity - right? Thanks!

  9. #9
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It should work... Yes.

    I've tested that latest code and it works with me using this HTML:

    Code HTML4Strict:
    <body id="home">
    <div id="content">
    <a href="#">HELLO</a>
    </div>
    </body>
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)


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
  •