Есть ли селектор CSS для первого элемента каждой визуальной строки элементов блока? То есть, представьте, что у вас есть 20 блочных элементов, чтобы они пересекали несколько строк для размещения в их родительском контейнере; могу ли я выбрать самый левый элемент каждой строки?
Это можно сделать в JavaScript, посмотрев верхнюю позицию всех элементов, но возможно ли это в простом CSS?
Да, это возможно через CSS, но только если вы можете исправить элементы в каждой строке.
Поскольку вы не представили свой случай, вот пример.
Предположим, что ваши элементы сложены в шаблоны ul и li и представляют собой три списка в строке, тогда вы можете использовать следующий фрагмент css.
li:first-child, li:nth-child(3n+1) {
background: red;
}
К сожалению, это невозможно с помощью 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
Нет, для этого нет селектора, вам нужно будет использовать JavaScript.
Для справки, следующая ссылка на селектор CSS: http://www.w3.org/wiki/CSS/Selectors