Newbie - Why can't I reference a unique id?

Discussion in 'HTML & Website Design' started by lwoods, Jun 25, 2016.

0
  1. #1
    I just don't "get" CSS. I have set up an element with a unique ID but I can't get any CSS to "touch" that element when I just reference the id itself ( "#......." ). Since it is unique to my script why can't CSS "see" it? Feel free to point me to any reference material. I just don't know where to look.
     
    lwoods, Jun 25, 2016 IP
  2. accel

    accel Well-Known Member

    Messages:
    142
    Likes Received:
    5
    Best Answers:
    1
    Trophy Points:
    133
    #2
    Have you included your stylesheet properly?

    Post the code you are using, you have probably made a syntax error.
     
    accel, Jun 25, 2016 IP
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #3
    Why don't you post the code you're using? Usually, it's a small issue.

    But yes, code like this:

    
<div id="testing">This is a div for testing</div>

#testing {
  color: red;
  background: black;
  font-size: 4em;
}
    Code (markup):
    (of course the CSS needs to be put somewhere where it will be read, either in an external CSS-file, or in a call in the <head>-section - but the above will style the div with red text on black background with 4em size text).
     
    PoPSiCLe, Jun 25, 2016 IP
  4. sarahk

    sarahk iTamer Staff

    Messages:
    28,807
    Likes Received:
    4,534
    Best Answers:
    123
    Trophy Points:
    665
    #4
    I actually get that quite a bit, and it's not just that the css doesn't get priority, it doesn't get seen at all. I'll usually work around it by hooking into something higher up so instead of

    .testing {}

    I might have

    #sectionA div ul li.testing {}

    I've never worked out why. I should put together a test case of it next time it happens.
     
    sarahk, Jun 25, 2016 IP
  5. lwoods

    lwoods Active Member

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    86
    #5
    I'm sorry but I have already changed my code so I can't demo the problem. I will try to put together another example so you can see what I am talking about. Thanks for your trouble.
     
    lwoods, Jun 25, 2016 IP
  6. billzo

    billzo Well-Known Member

    Messages:
    961
    Likes Received:
    278
    Best Answers:
    15
    Trophy Points:
    113
    #6
    One reason could be specificity. CSS applies rules based on a few criteria and one is specificity. A rule could have a higher degree of specificity than your ID (believe it or not) and that rule will overrule your rule targeting the ID.

    Read up on CSS specificity for more.
     
    billzo, Jun 25, 2016 IP
  7. sarahk

    sarahk iTamer Staff

    Messages:
    28,807
    Likes Received:
    4,534
    Best Answers:
    123
    Trophy Points:
    665
    #7
    You can always see if that's the case though

    upload_2016-6-26_15-3-56.png

    you can see in .messageInfo that there are settings that are being ignored
    and in .message that zoom is overruled

    It gets frustrating when your rule doesn't even make the list.
     
    sarahk, Jun 25, 2016 IP
  8. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #8
    If the rule doesn't make the list it's because it's either the wrong selector or it's within another selector that is not in the hierarchy of the element your checking.
     
    PoPSiCLe, Jun 26, 2016 IP