Target second and third li in row of three

I have a gallery in an unsorted list. Each row consist of three li’s I try to target the second and third li but so far without success.

This is what I have:

.gallery {
  width: 65%;
  margin: 0;
  padding: 0;
  display: inline-block;
  position: relative;
  text-align: center;
}
.gallery li {
  margin: 0 0 .8rem;
  padding: 1rem 2%;
  display: inline-block;  
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color:transparent;
  background-color:rgba(0,0,0,0.6);    
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
.gallery li:nth-child(3n+2) {
  float: none;
}
.gallery li:nth-child(3n+3) {  
  float: right;
}

So i made the ul display: inline-block and text align: center. The first li in the row should float left (default value for the li’s), the second one shouldn’t float (li:nth-child(3n+2))and the third one should float right (li:nth-child(3n+3)). What is happening with the way I have it now that this only works in the odd rows 1st, 3rd, 5th etc. What am i doing wrong? Or should I do this differently?

Thank you in advance

Like this?

Hi FrontendGuru, thank you for the responce. Because of the text align center on the parent the second one should alighn in the center. but in your example i see a stairs effect as well

If I understand you correctly your approach is wrong. I’ve updated my Codepen. Is this your desired result?

Hi FrontendGuru. Thanks again for the reply. I see that you have given the li’s a width, and that is one thing I try t avoid. Furthermore see what happens when you add another row

Hi donboe,
yes, if you add another row this wont do it, but in your question you said there are always 3 li’s and I showed you a way to target the second and third one :wink:

Does this mean you need always the items in one row with the first on the left, the last on the right and the rest in between?

I don’t think you can do this with floats (if I understand what you are saying).

Did you want something like this?

I’m not sure how robust it will be as usually you would want to have groups of three rather than a single list. However it seems to work in modern browsers.

Flexbox can probably do this also (if you can get your head around it :smile: ).

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.