CODEWITHSUNDEEP
javascriptcsscss-selectorstargeting
Marcin Mikołajczyk
Marcin Mikołajczyk

Reputation: 31

Targeting the last odd element with a given class

I have a dynamic photo list, pulled from the CMS. Photos are vertical and horizontal. I am trying to create a "dynamic grid" where all horizontal photos are 100% wide and vertical photos are 50% wide. I was able to achieve this with the help of JS. codepen with my code

However, I have trouble targeting the last odd vertical shot that has a horizontal shot in front of it. I would like this photo to be 100% wide as well, so that there would be no unnecessary break.

I tried to use :nth-child() pseudo class but, that was not helpful at all. - its select only first child.

.wide + .portfolio-item:nth-last-child(odd) {
  width: 100%;
}

Upvotes: 2

Views: 34

Answers (1)

Marcin Mikołajczyk
Marcin Mikołajczyk

Reputation: 31

Okay, I tried to overthink it, a solution was very easy - on portfolio-item I should use:

  flex-grow: 1;

Upvotes: 1

Related Questions