css - ビジュアル（ブロックリフロー）行の最初の要素のCSSセレクター

Question

ブロックアイテムのすべての視覚的な行の最初の要素にCSSセレクターはありますか？つまり、親コンテナに収まるように複数の行にまたがるように20個のブロック要素があると想像してください。各行の左端の項目を選択できますか？

JavaScriptではすべての要素の最上位を確認することで実行できますが、プレーンCSSでも可能ですか？

Answer 1

はい、CSSを介して可能ですが、すべての行の要素を修正できる場合に限ります。

ケースを提供していないので、ここに例を示します。

要素がaulとliパターンで積み重ねられ、3つのリストが連続しているとすると、次のcssスニペットを使用できます。

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

デモ

Answer 2

いいえ、このためのセレクターはありません。JavaScriptを使用する必要があります。

参考までに、以下はCSSセレクターへの良いリファレンスです： http ：//www.w3.org/wiki/CSS/Selectors

Answer 3

残念ながら、これは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

Answer 4

@lukejacksonnの作品に基づく

これは、ウィンドウのサイズ変更時にクラスを追加または削除します。

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