Remove background image from div

Question

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.

Your first selector: #first, #second #third. Are you sure you don't mean #first, #second, #third, with the extra comma? — thirtydot
– thirtydot, Commented Mar 22, 2011 at 13:03

Saurabh Gokhale · Accepted Answer · 2011-03-22 13:04:34Z

2

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.

edited Mar 22, 2011 at 13:04

Saurabh Gokhale

46.5k35 gold badges139 silver badges163 bronze badges

answered Mar 22, 2011 at 13:00

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Robbert Stevens · Accepted Answer · 2011-03-22 12:59:54Z

2

Why not just do this?

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

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

answered Mar 22, 2011 at 12:59

Robbert Stevens

3364 silver badges19 bronze badges

3 Comments

SLaks Over a year ago

That's not the same. Read his selector carefully.

Robbert Stevens Over a year ago

@SLaks I am pretty sure he mean #first, #second, #third if not, I agree with you

georgevich Over a year ago

My mistake. It is #fist, #second, #third

grantk · Accepted Answer · 2011-03-22 13:00:16Z

1

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

#third {
   font-size: 1em;
}

answered Mar 22, 2011 at 13:00

grantk

4,0684 gold badges30 silver badges37 bronze badges

Comments

Surreal Dreams · Accepted Answer · 2011-03-22 13:15:09Z

1

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.

edited Mar 22, 2011 at 13:15

answered Mar 22, 2011 at 13:00

Surreal Dreams

26.4k4 gold badges49 silver badges61 bronze badges

Collectives™ on Stack Overflow

Remove background image from div

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related