CODEWITHSUNDEEP
htmlcss
user667429
user667429

Reputation: 3113

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>

Upvotes: 1

Views: 144

Answers (5)

Starx
Starx

Reputation: 78981

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.

Upvotes: 3

Mr.T.K
Mr.T.K

Reputation: 2356

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>

Upvotes: 0

fin1te
fin1te

Reputation: 4351

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

Upvotes: 0

Michael Berkowski
Michael Berkowski

Reputation: 270617

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; }

Upvotes: 0

spliter
spliter

Reputation: 12569

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.

Upvotes: 1

Related Questions