TidusWulf February 2016

How to set the CSS of an img inside a li inside a ul inside a class?

In my html file, I have a navigation bar at the top of my page start starts off like this:

    <div class="“topNav">
      <ul>
        <li><img src="assets/map.png"> <a href="locations.html">Locations</a></li>
        <li><img src="assets/length.png"> <a href="length.html">Length</a></li>
     </ul>
   </div>

And so on.

And in my CSS I tried

.topNav img {
  width: 10%;
  height: auto;
}

Except that img is too far deep (inside a li tag inside a ul tag) to be noticed or something. I want my topNav's images to be 10%, but not ALL images on my page. I have other images in the lower part of my page, and I have other style plans for them.

Answers


pritesh February 2016

You need to use .topNav > ul>li>img OR .topNav ul li img Anyone will work.


Mi-Creativity February 2016

The problem is with your HTML, you have an extra here

<div class="“topNav">

JS Fiddle

.topNav img {
  border:2px green solid;
}
<div class="topNav">
  <ul>
    <li><img src="//placehold.it/100x50?text=img-1"> <a href="locations.html">Locations</a></li>
    <li><img src="//placehold.it/100x50?text=img-2"> <a href="length.html">Length</a></li>
    <li><img src="//placehold.it/100x50?text=img-3"> <a href="locations.html">Locations</a></li>
    <li><img src="//placehold.it/100x50?text=img-4"> <a href="length.html">Length</a></li></ul>
</div>


DebRaj February 2016

In addition to @pritesh you code has a typo <div class="“topNav"> should be <div class="topNav">

Hope that is the reason it's not working.

Post Status

Asked in February 2016
Viewed 3,859 times
Voted 4
Answered 3 times

Search




Leave an answer