CODEWITHSUNDEEP
htmlcss
Ian Atkin
Ian Atkin

Reputation: 6356

CSS: provide different padding on the last element without need for multiple classes

I have a div that contains three images, which are more or less 31% wide. The idea is to provide padding in-between. The last image should have no right padding, so that the three together are as wide as a larger image above.

Like so...

enter image description here

How can I specify a variant (selector or otherwise) class that simply knows that the image is in this last position? Any ideas, maybe using siblings, etc.

Upvotes: 0

Views: 334

Answers (2)

Mr Lister
Mr Lister

Reputation: 46579

My guess is that you can use the + selector.

img + img {
  padding-left:4px;
}

in that way, every image except the first will receive the left padding. And you won't have to write one style rule for all images and a separate style rule for only the last image.

Upvotes: 0

Itay
Itay

Reputation: 16777

You can use the :last-of-type pseudo class.

.container_class > img:last-of-type {
    padding-right: 0;
}

P.S - Aren't you spacing elements from each other with margin instead of padding?

Upvotes: 3

Related Questions