CSS-селектор для первого элемента визуального (блок reflow) строки

Есть ли селектор CSS для первого элемента каждой визуальной строки элементов блока? То есть, представьте, что у вас есть 20 блочных элементов, чтобы они пересекали несколько строк для размещения в их родительском контейнере; могу ли я выбрать самый левый элемент каждой строки?

Это можно сделать в JavaScript, посмотрев верхнюю позицию всех элементов, но возможно ли это в простом CSS?

Ответ 1

Да, это возможно через CSS, но только если вы можете исправить элементы в каждой строке.

Поскольку вы не представили свой случай, вот пример.

Предположим, что ваши элементы сложены в шаблоны ul и li и представляют собой три списка в строке, тогда вы можете использовать следующий фрагмент css.

li:first-child, li:nth-child(3n+1) {
    background: red;
}

Демо

Ответ 2

К сожалению, это невозможно с помощью CSS. Я столкнулся с этой проблемой, когда я хотел убедиться, что левые наиболее плавающие элементы в каждой строке всегда начинаются с новой строки.

Я знаю, что вы искали решение для CSS, но я написал этот плагин jQuery, который идентифицирует первый элемент в каждой визуальной строке и применяет к нему "clear: left" (вы можете адаптировать его для выполнения что-нибудь).

(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);

См. этот пример codepen http://codepen.io/lukejacksonn/pen/EplyL

Ответ 3

Нет, для этого нет селектора, вам нужно будет использовать JavaScript.

Для справки, следующая ссылка на селектор CSS: http://www.w3.org/wiki/CSS/Selectors