CODEWITHSUNDEEP
cssparent-child
Vince
Vince

Reputation: 2656

How to style elements that don't contain a certain element

I have a menu system that contains both text, and images. My images are slightly larger ( in height ) than the text is and would like to add a little more margin space to the elements that don't contain an image inside it. How would I go about doing that? My HTML looks like this:

<div id = "menu2">
  <div>
    <a href = "index.php">
      <img src = "images/home.png" alt = "Home" title = "Home"/>
    </a>
    <a href = "#">
      Menu_Item_1
    </a>
    <a href = "#">
      Menu_Item_2
    </a>
  </div>
</div>

In my case, I would like to style (using css/css3) the elements that don't have an image child.

Upvotes: 0

Views: 37

Answers (2)

AlokMaurya
AlokMaurya

Reputation: 5

<div id = "menu2">
<div>
<a href = "index.php">
  <img src = "images/home.png" alt = "Home" title = "Home"/>
</a>
<a href = "#" class="ses">
  Menu_Item_1
</a>
<a href = "#" class="ses">
  Menu_Item_2
    </a>
  </div>
</div>


<style>
#menu2 a .ses{
color:#f2f2f2;// whatever you want..
}
</style>

Upvotes: 0

Artem Petrosian
Artem Petrosian

Reputation: 2954

You can apply line-height to your links:

line-height: 50px;

Where 50px depends on your images height.

Fiddle

Upvotes: 1

Related Questions