I don't understand why an ID is not more specific than a class

Question

I've got:

<div class="cardDisplay">
<img class="cardImg"  id="cardImg4" alt="Card" src="picture.jpg" width="148" height="236.8" title="">
        </div>

Here's my CSS.

.cardDisplay
    {
    width: 1020px;
    background-color: #040D14;
    margin: auto;
    position: relative;
    }

.cardImg
    {
    padding:0px;
    padding-left: 40px;
    padding-right: 0px;
    /* background-color: black; */
    }   

#cardImg4
    {
    border: 20px solid white;
    padding-right: 30px: 
    }

The problem is I cannot get the, I thought, more specific ID to override the class. I've tried doing it a number of different ways with no luck. I'm using Chrome if that matters. Thanks.

Possible duplicate : http://stackoverflow.com/questions/970730/css-id-vs-class — pradeek, Nov 20 '11 at 01:23
It's not a dupe, the rule is simply ignored due to the colon, see answers below. — weltraumpirat, Nov 20 '11 at 01:26

score 4 · Accepted Answer · answered Nov 20 '11 at 01:21

4

You have a colon : instead of a semi-colon ; in your padding-right style for #cardImg4. The rule probably isn't being applied at all.

answered Nov 20 '11 at 01:21

numbers1311407

33,686
9
90
92

Well.... that's embarrassing. Should I delete this post? At least my faith has returned in my understanding of specificity. – Dale Nov 20 '11 at 01:28

Kurru · Answer 2 · 2011-11-20T01:36:50.087

1

You should be aware that you have a : not ; after the #cardimg4 padding-right. This might affect it.

edited Nov 20 '11 at 01:36

answered Nov 20 '11 at 01:20

Kurru

14,180
18
64
84

I don't understand why an ID is not more specific than a class

2 Answers2