Search code examples
cssclasscss-specificity

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

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.

Solution

  • 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.