CODEWITHSUNDEEP
htmlcsslistcss-selectors
BrownBe
BrownBe

Reputation: 987

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

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?

Upvotes: 3

Views: 402

Answers (3)

BoltClock
BoltClock

Reputation: 723708

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).

Upvotes: 0

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

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>

Upvotes: 0

DaniP
DaniP

Reputation: 38252

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>

Upvotes: 1

Related Questions