August 12, 2012
CSS selector for first element of visual (block reflow) row
Question by Kevin L.
Is there a CSS selector for the first element of every visual row of block items?
That is, imagine having 20 block elements such that they flow across multiple lines to fit in their parent container; can I select the leftmost item of each row?
It’s doable in JavaScript by looking at the top position of all of the elements, but is it possible in plain CSS?
Answer by Starx
Yes, Its possible through CSS but only if you can fix the elements in every row.
Since you haven’t provided your case, here is an example.
Suppose, your elements are stacked up in a ul and li pattern and are three lists in a row, then you can use the following css snippet.
li:first-child, li:nth-child(3n+1) {
background: red;
}
Demo
