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;


Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+


Please fill the form - I will response as fast as I can!