How to select only first img of pairs in a list with CSS?

Question

I have a group of different img tags with classes:

<div>
    <img class="w100" />
    <img class="w50" />    
    <img class="w50" />
    <img class="w100" />
    <img class="w50" />   
    <img class="w50" />
</div>

How can I select only the first .w50 of each pair with CSS?

So you want to get **only** the first two w50, or the w50 after a w100? — Jacob G, Feb 09 '15 at 17:09
Could you say something like `img.w50:nth-child(odd)` so it grabs the first in each pair, and `.w50`? — Chad, Feb 09 '15 at 17:20
I tried this `.w50:nth-child(odd) {padding:0 8px 0 0 } .w50:nth-child(even) {padding:0 0 0 8px }`but it take all div in the (odd) and (even) argument. — BrownBe, Feb 09 '15 at 23:06
With just the example given in the question, there is not nearly enough information and any answer would run the risk of making too many assumptions about your actual markup. This is clear based on the comments on the question and the current answers. You should explain the conditions under which elements should be selected, or at least provide some more example scenarios of how your elements might be structured, in order to narrow things down for answerers. — BoltClock, Feb 10 '15 at 04:21

score 1 · Answer 1 · answered Feb 09 '15 at 17:06

1

You can use the adjacent sibling selector like this:

.w100 + .w50 {
  //styles here
}

Example

.w100 + .w50 {
  border: 2px red solid;
}

<div>
  <img src="http://placehold.it/100" class="w100" />
  <img src="http://placehold.it/50" class="w50" />
  <img src="http://placehold.it/50" class="w50" />
  <img src="http://placehold.it/100" class="w100" />
  <img src="http://placehold.it/50" class="w50" />
  <img src="http://placehold.it/50" class="w50" />
<div>

answered Feb 09 '15 at 17:06

DaniP

37,813
8
65
74

2

This wouldn't work if there are other classes besides `.w100` and `.w50` though. – zxqx Feb 09 '15 at 17:08
@zakangelle this answer is based on the actual markup OP has posted, is just another way to think how to select that element not thinking about the first of a pair....instead the first element right after `w100` – DaniP Feb 09 '15 at 17:10
1

Thanks, it an interessant way. But .w100 isn't always before .w50 class. Your answer give me the solution for select the second w50 class : `.w50 + .w50 { }` – BrownBe Feb 09 '15 at 22:57
@BrownBe maybe with a real example of your markup ... I think the `.w50 + .w50` is the best to acomplish your goal – DaniP Feb 10 '15 at 13:45
@DanielPinzon You're right. I wrote all possibilities and it's work. `.w50, .w50 + .w50 + .w50 { padding:0 8px 0 0 }` for "odd" class and `.w50 + .w50, .w50 + .w50 + .w50 + .w50 {padding:0 0 0 8px }`for "even" class. – BrownBe Feb 11 '15 at 08:14

score 0 · Answer 2 · answered Feb 09 '15 at 17:19

Use javascript there is no previous selector in css yet.

var img = document.querySelectorAll("img");
for ( var i = 0; i<img.length; i++) {
    var currentClass = img[i].getAttribute("class"),
        nextClass = img[i].nextSibling.nextSibling.getAttribute("class");
  if(currentClass == nextClass){
     img[i].classList.add("found")
  }
    
}

.found{opacity:.1}

<div>
    <img class="w100" src=http://lorempixel.com/150/150 />
    <img class="w50" src=http://lorempixel.com/150/150 /> 
    <img class="w50" src=http://lorempixel.com/150/150 />
    <img class="w100" src=http://lorempixel.com/150/150 />
    <img class="w50" src=http://lorempixel.com/150/150 /> 
    <img class="w50" src=http://lorempixel.com/150/150 />
<div>

score 0 · Answer 3 · edited May 23 '17 at 12:15

Bearing in mind my comment on the question, there is one assumption that I believe can be made about the markup based on what little information is given in the question (namely, the word "pairs"): that somewhere in the container div there are pairs of img elements that can be represented by the following selector:

.w50 + .w50

and you want to select the first of these pairs only, regardless of any other elements that might occur as siblings (being careful not to make assumptions about what kinds of siblings will be present).

You won't be able to do this with just one selector since there is no previous sibling selector as mentioned in another answer, but you can do this using a variation of this overriding technique. Namely, style all .w50 elements, then override it for anything after the first pair. You first select the pair using .w50 + .w50, then target any following siblings using an additional ~ .w50:

.w50 {
    border: 2px solid red;
}

.w50 + .w50 ~ .w50 {
    border: 0;
}

<div>
    <img class="w100" src="http://placehold.it/100">
    <img class="w50" src="http://placehold.it/50">
    <img class="w50" src="http://placehold.it/50">
    <img class="w100" src="http://placehold.it/100">
    <img class="w50" src="http://placehold.it/50">
    <img class="w50" src="http://placehold.it/50">
<div>

As always, this requires knowing what value to revert to in advance (in this example, reverting to no border).

How to select only first img of pairs in a list with CSS?

3 Answers3

Example