Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS style specific div without id

I am making an ebay storefront and need to style an element on the page which I have no ability to edit the html of.

The html is something like this

<td id="blah">
  <div>
    <div>....

    </div>
  </div>
  <div>....

  </div>
</td>

I need to add a margin to both the div's

..but not the children divs of those divs

the css I tried was #blah div {margin:5px;} but of course that effected the child divs.

like image 643
Mark Avatar asked Dec 06 '25 13:12

Mark


2 Answers

There is the > "immediate child" selector:

#blah > div {margin:5px;}

but it's not supported by IE6, which sadly still is a consideration for many audiences.

It's preferable to add a class to the box you want to style:

<td id="blah">
  <div class="box">
    <div>....

and specify that:

#blah div.box {margin:5px;}
like image 152
Pekka Avatar answered Dec 08 '25 05:12

Pekka


You can use what you have, just add another selector to override the children:

#blah div 
{
    margin:5px;
}

#blah div div
{
    margin: 0;
}

Give that a go :)

like image 25
Kyle Avatar answered Dec 08 '25 05:12

Kyle



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!