Sebastian Graz Sebastian Graz - 3 months ago 8
CSS Question

nth-child advanced logic selection

I apologise in advance that I have not made good progress on this matter so I dont have a Fiddle nor Codepen.

I do have the following layout (below) that I wish to achieve.

My only question is how I select two elements in a row and then another two elements in a row so I can style them accordingly. Keeping in mind that the first-child will need to be separately selected.

The last picture is just to show them in a horizontal order to easier understand what I wish to achieve :)

Last note is that I will be using Packery to enable the smug fit in case you are wondering

Thank you!

Nth logic

Answer

As per the MDN Docs:

The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element. More simply stated, the selector matches a number of child elements whose numeric position in the series of children matches the pattern an+b.

Therefore, to match the blue squares (first and fourth for every quadruplet), you can use the following:

:nth-child(4n+1), :nth-child(4n)

and for the orange rectangles (second and third for every quadruplet):

:nth-child(4n+2), :nth-child(4n+3) { ... }

Also make sure to add a selector before the :nth-child to make it more specific. For instance, use something like div:nth-child(...) (see example below) or a class/id selector for most accurate results.


Working example:

div {
  width: 100px;
  display: inline-block;
  margin: 10px;
  vertical-align: top;
}
div:nth-child(4n+1), div:nth-child(4n) {
  height: 150px;
  background-color: blue;
}
div:nth-child(4n+2), div:nth-child(4n+3) {
  height: 100px;
  background-color: orange;
}
<span>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</span>


Also see W3Schools.com and CSSTricks for more info.