CODEWITHSUNDEEP
css
georgevich
georgevich

Reputation: 2485

Remove background image from div

I have css declaration like this 

#first, #second, #third {
 font-size:1em;
 background: url('path/to/image') no-repeat;

}

Next I want to remove background only for #third;

I have tried

#third {
background:none;
}

But it doesn`t work.

Upvotes: 0

Views: 3300

Answers (4)

Surreal Dreams
Surreal Dreams

Reputation: 26380

It's not working because #second #third is more specific than #third. Did you mean to group #second and #third together, or did you forget a comma?

It sounds like that wasn't what you intended, so this should fix it:

#first, #second, #third {
    font-size:1em;
    background: url('path/to/image') no-repeat;
}

Note the comma - that's all it takes. Your #second element should also be styled correctly with this edit.

Also, did you place the separate declaration for #third after the other set of code? Order matters, and it would need to come after the declaration of #first, #second and #third.

Upvotes: 1

SLaks
SLaks

Reputation: 887453

Your first selector is more specific than the second one, so it has priority.

To solve this, you can make the second selector equally specific by changing it to #second #third.
If that won't select the same elements, your design is flawed; element IDs should be unique.

Alternatively, you can add !important to the second background rule to force it to override the first one.

Upvotes: 2

grantk
grantk

Reputation: 4058

So why not just remove third from the first style declarations and make a seperate

#third {
   font-size: 1em;
}

Upvotes: 1

Robbert Stevens
Robbert Stevens

Reputation: 336

Why not just do this?

#first, #second {
 font-size:1em;
 background: url('path/to/image') no-repeat;

}
#third {
font-size:1em;
}

Upvotes: 2

Related Questions