CODEWITHSUNDEEP
htmlcss
Piyush-Ask Any Difference
Piyush-Ask Any Difference

Reputation: 4286

Add different images to div elements with same class

Is it possible to select the div elements with same class using css and apply different css attributes to these div elements.

My HTML:

<div class="image"><br/>a</div>

<div class="image"><br/>b</div>

<div class="image"><br/>c</div>

CSS:

div.image:before {
   content:url(http://placehold.it/350x150);
}

//want to show different image for the three divs in html

JSfiddle: http://jsfiddle.net/htfhjzbo/1/

Upvotes: 0

Views: 1710

Answers (2)

Alex Deas
Alex Deas

Reputation: 15

Just use the nth-child pseudoselector [parent element] .image:nth-child(n) and you can select them individually based on their position in the array of children with that class name (starting from 1).

As Alaa Mohammead mentioned, you can change the styles inline, but then it requires an !important declaration later if the site is responsive, so it's usually not a good practice to get into over simply using a stylesheet to apply the styles you want.

Upvotes: 0

maioman
maioman

Reputation: 18734

you can use nth of type selector

.image:nth-of-type(2) {
    background: #ff0000;
}
<div class="image"><br/>a</div>

<div class="image"><br/>b</div>

<div class="image"><br/>c</div>

Upvotes: 3

Related Questions