SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with CSS Specifity?

    Hi,

    I have done several websites so far and I've stucked on this very basic example .
    I really don't know why the "Second" word is not displayed in #666 color. I've tried to extend #second definition to .first#second#a and it didn't work as well.

    This is a simplified code:
    HTML
    HTML Code:
    	<div class="first">
    		<a href="#">First</a><br />
    		<a href="#" id="second">Second</a>
    	</div>

    CSS
    Code:
    .first a{color:#1155CC;}
    #second a {color:#666666;}

    The same is happened if I changed #second ID to class.

  2. #2
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,267
    Mentioned
    116 Post(s)
    Tagged
    1 Thread(s)
    Either change the #second to a#second or just #second and it should work. The way you've got it, it would only match if there was an a element inside a container with the id of second.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Say .first a#second {...}

  4. #4
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot,
    I really aprreciate, is there any document speaking about it? I mean difference between a#id and id# a. I've read some books and actually didn't see any examples.

    ..why this doesn;t work

    a.first {color:#fff;}
    a#second {color:#666666;}

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    There are tons of "CSS specificity" articles , just google.


    difference between a#id and id# a
    That case is not so much a specificity issue , as they both have the same "weight" as far as that goes. This is probably why you never saw an example in specificity articles.

    a#id means: an A tag that has the ID ="id"
    example :
    <ul>
    <li><a href="mydoc1.html" id="other">other</a></li>
    <li><a href="mydoc2.html" id="notit">other2</a></li>
    <li><a href="mydoc.html" id="id">My Doc</a></li>
    <ul>
    on the other hand
    id# a means: ANY A tag that's WITHIN an element with the ID="ID"

    <ul id="id">
    <li><a href="mydoc1.html" >other</a></li>
    <li><a href="mydoc2.html" >other2</a></li>
    <li><a href="mydoc.html" >My Doc</a></li>
    <ul>

    So this :
    a.first {color:#fff;}
    a#second {color:#666666;}

    should be:

    .first a {color:#fff;}
    a#second {color:#666666;}


    As long as we are at it. IDs ARE UNIQUE ( not to be used elsewhere in the mark up). So a#second is a bit redundant, if you are doing that using IDs just write : #second {color:#666666;}

    Hope that helps clear things up

  6. #6
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot


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
  •