18

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?

0

4 Answers 4

17

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

5
  • +1, however this will fail on layouts without a fixed width. You could probably throw in media query width sniffing to target different :nth-child(Xn+1) multipliers.
    – Oleg
    Aug 12, 2012 at 8:15
  • I commented on a similar answer to a related question that was asked last week... can't find it anymore. Basically what @o.v. just said. As you have mentioned in your answer, the caveat is that the layout must be fixed.
    – BoltClock
    Aug 12, 2012 at 8:48
  • @o.v. Yes but still the width of each block has to be fixed.
    – Starx
    Aug 12, 2012 at 12:01
  • I'm going to have to use JavaScript, but I like the thinking on this one + o.v.'s excellent suggestion to use media queries.
    – Kevin L.
    Aug 12, 2012 at 14:35
  • The provided solution works well for a row with 3 columns. In case someone needs to adjust it for 2 columns, the fix is simple. To do it, simpley replace li:nth-child(3n+1) with li:nth-child(2n+1) and that'll be it :)
    – Devner
    Nov 3, 2013 at 9:29
7

No, there is no selector for this, you'll need to use JavaScript.

For reference, the following is a good reference to CSS selectors: http://www.w3.org/wiki/CSS/Selectors

1
  • Why was this downvoted? +1 because there is no selector for this and you will need to use JavaScript or some other workaround
    – Oleg
    Aug 12, 2012 at 8:11
4

Unfortunately this is not possible with CSS alone. I ran into this issue when I wanted to ensure that the left most floated elements on each row always start on a new line.

I know you were looking for a CSS solution but I wrote this jQuery plugin that identifies the first element on each visual row and applies "clear:left" to it (you could adapt it to do anything).

(function($) {

    $.fn.reflow = function(sel, dir) {

        var direction = dir || 'both';
        //For each conatiner
        return this.each(function() {
            var $self = $(this);

            //Find select children and reset clears
            var $elems = sel ? $self.find(sel) : $self.children();
            $elems.css('clear', 'none');
            if ($elems.length < 2) { return; }

            //Reference first child 
            var $prev = $elems.eq(0);

            //Compare each child to its previous sibling 
            $elems.slice(1).each(function() {
              var $elem = $(this);
              //Clear if first on visual row
              if ($elem.position().top > $prev.position().top) {
                $elem.css('clear', direction);
              }
              //Move on to next child
              $prev = $elem;
            });
        });
    };

})(jQuery);

See this codepen example http://codepen.io/lukejacksonn/pen/EplyL

1
0

Based on the work by @lukejacksonn

This one adds or removes a class on window resize.

(function ($) {
  $.fn.reflow = function (sel, className) {
    if (className == null) throw new Error('className must be set');
    //For each conatiner
    return this.each(function () {
      var $self = $(this);

      //Find select children and reset clears
      var $elems = sel ? $self.find(sel) : $self.children();
      if ($elems.length < 2) {
        return;
      }

      //Reference first child 
      var $prev = $elems.eq(0);

      $elems.each(function () {
        $(this).removeClass(className);
      });

      //Compare each child to its previous sibling 
      $elems.slice(1).each(function () {
        var $elem = $(this);
        //Clear if first on visual row
        if ($elem.position().top > $prev.position().top) {
          $elem.addClass(className);
        }
        //Move on to next child
        $prev = $elem;
      });
    });
  };


  const markFirstRowElement = function () {
    $(".cd-progress-indicator").reflow('li', 'first-row-element');
  }
  $(function () {
    markFirstRowElement();
    $(window).resize(markFirstRowElement);
  });
})(jQuery);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.