CODEWITHSUNDEEP
css
Ben
Ben

Reputation: 317

How do I apply a class to multiple images with one tag?

I'm trying to apply a class to multiple images. For example:

<img class="test" src="great.jpg" />
<img class="test" src="hello.jpg" />
<img class="test" src="pie.jpg" />

How do I wrap all of those images with one tag to apply the 'test' class to all of them without having to specify the class in every single image tag? In the stylesheet I have:

img.test {
border: 4px solid black;
}

I tried wrapping the images with a div and then a span tag with the class as test, but nothing. Help please?? Thanks!!

Upvotes: 1

Views: 3285

Answers (2)

martriay
martriay

Reputation: 5742

Css descendant selector!

HTML:

<div class="test">
  <img src="great.jpg" />
  <img src="hello.jpg" />
  <img src="pie.jpg" />
</div>

CSS:

.test img {
  border: 4px solid black;
}

Upvotes: 1

canon
canon

Reputation: 41665

markup:

<div class="test">
    <img src="great.jpg" />
    <img src="hello.jpg" />
    <img src="pie.jpg" />
</div>

css:

.test img
{
    border: 4px solid black;
}

[edit]: Check out w3.org's Selectors Level 3 and, specifically, descendant combinators.

Upvotes: 3

Related Questions