CODEWITHSUNDEEP
csshtmlcss-selectors
suhMAN
suhMAN

Reputation: 179

Target all child images within list

I am trying to target all the image tags within the html code below:

<ul id = "test">
    <li><a href="#"><img src="img/example1.jpg">EXAMPLE TEXT 1</a></li>
    <li><a href="#"><img src="img/example2.jpg">EXAMPLE TEXT 2</a></li>
    <li><a href="#"><img src="img/example3.jpg">EXAMPLE TEXT 3</a></li>
</ul>

My CSS to target all the images within the test list:

#test li a > img{
    margin-right: 10px;
}

EDIT: #nav li a img{} also isn't effecting the image elements. If I give each img a class, then I can get the css to work properly, but I should be able to target without using a class on the images

How am I using the child selector incorrectly?

ANSWER: nevermind, the original CSS I have above does work. My code had an invisible character messing the everything up.

Upvotes: 1

Views: 3370

Answers (4)

VAhid
VAhid

Reputation: 92

#test {
  position:relative;
}
#test li{
  list-style: none;
  padding:5px 15px;
}
#test li img{
  float:left;
  margin-right:15px;
}

Upvotes: 0

Pravin W
Pravin W

Reputation: 2521

It seems that you are not closing you tags properly Please find updated code

DEMO

HTML

<ul id="test">
    <li><a href="#"><img src="img/example1.jpg" />EXAMPLE TEXT 1</a></li>
    <li><a href="#"><img src="img/example2.jpg" />EXAMPLE TEXT 2</a></li>
    <li><a href="#"><img src="img/example3.jpg" />EXAMPLE TEXT 3</a></li>
</ul>

CSS

#test li a img {
    /*css code*/
    border:1px solid red;
}

Upvotes: 2

Ctrl Alt Design
Ctrl Alt Design

Reputation: 707

This tagets the images in the li http://jsfiddle.net/UkmR3/1/

#test li a  img{
    margin-right:  100px;
}

Upvotes: 0

ooo
ooo

Reputation: 1627

As you can see on this fiddle it should work with this css:

ul#test>li>a>img{
   margin-right: 10px;
}

Upvotes: 2

Related Questions