SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Anchor class being overridden by what?

    I have a list of links and they are all styled generally. However I want to modify that general style on a specific anchor (FirstLink) with a class (for example here, background:blue), but it's having no effect. I can't figure out what/why it is being overwritten.
    HTML Code:
    <style type="text/css">
    #navigation {
    list-style:none;
    display:table;
    margin:12em auto 0;
    }
    #navigation li {
    display:table-cell;
    font:1.8em/2.1em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    }
    #navigation a,#navigation a:link,#navigation a:visited,#navigation a:active,#navigation a:hover,#navigation a:focus
    {color:#F5FFF5;
    text-decoration:none;
    display:block;
    padding:0 1.2em;
    background:#A11123;}
    #navigation a:hover{background:black;}
    a.FirstLink {background:blue;}
    a.FirstLink:link {background:blue;}
    a.FirstLink:visited {background:blue;}
    a.FirstLink:hover {background:blue;}
    a.FirstLink:focus {background:blue;}
    a.FirstLink:active {background:blue;}
    </style>
    
    <ul id="navigation">
    	<li><a href="#" class="FirstLink">Home</a></li>
    	<li><a href="#">About</a></li>
    	<li><a href="#">Forum</a></li>
    	<li><a href="#">Archive</a></li>
    	<li><a href="#">Contact</a></li>
    </ul>

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    You have run foul of the specificity rules.

    Put simply, if you have two style rules targeting the same element (in this case, both targeting the <a>), the browser will run through the following checklist:

    1. Is one of the styles marked as !important? If so, use that one.
    2. Is one of the styles inline (in the HTML)? If so, use that one.
    3. Does one of the styles have more IDs in the declaration? If so, use that one.
    4. Does one of the styles have more classes in the declaration? If so, use that one.
    5. Does one of the styles have more elements in the declaration? If so, use that one.
    6. Use the one that comes last in the parsed CSS.

    Here, you're up against "2". The declaration #navigation a {...} includes an ID, whereas the declaration a.FirstLink {...} doesn't.

    If you will only ever have one FirstLink on a page, you could just change that from a class to an ID, and you're sorted. If there could be more than one FirstLink on a page, you could either add !important to the FirstLink declarations (which is not recommended, because you never know what else it might override), or you could change the declaration to #navigation a.FirstLink {...} all the way down. Then the two would be equal on IDs and so it would come down to classes, and the FirstLink ones would win through.

  3. #3
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, I had no idea of the first 5 points of that checklist.


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
  •