Css for tags with any class or id

I used two image tags in one div tag. I tried to give different style with css to image tags, so that tags did not any class or id. but I did not result. Please correct my css

I used 开发者_高级运维css like this :

div img { padding-right: 2px; vertical-align: middle; }
div img img { width: 16px; height: 16px; }

<div>
<img src="..." alt="" />
<img src="..." alt="" />
</div>

Write your css like this

div img:first-child {}
div img:last-child {}

If you have more than 2 <img> inside the div use :nth-child(N)

As spliter mentioned, this is not supported by IE8, in this case use adjacent selector like he has showed in his answer.

Second line should be

div img + img { width: 16px; height: 16px; }

Child selector (+) is supported by all contemporary browsers while :last-child in IE is supported by IE9 and up only. IE6 is out of the scope no matter how you approach this.

What you are attempting to do will possible without a class or id using the :first-child and :last-child selector.

div img img {}

The above identifies an <img> inside an <img> inside a <div>, which isn't what you have.

div img:first-child { padding-right: 2px; vertical-align: middle; }
div img:last-child { width: 16px; height: 16px; }

You can use the CSS3 :nth-type-of selector, like bellow

div img:nth-of-type(1) {
    padding-right: 2px; vertical-align: middle;
}
div img:nth-of-type(2) {
    width: 16px; height: 16px;
}

However, this will only work in browsers which support CSS3 (Chrome, Firefox, IE 9). To get backwards compatibility, you will need to either use Javascript (to loop over each element), or add a class to the images

try this way:

div img.img1 { padding-right: 2px; vertical-align: middle; }
div img.img2 { width: 16px; height: 16px; }


<div>
<img src="..." alt="" class="img1" />
<img src="..." alt="" class="img2" />
</div>