同じスタイルで、要素を番号に関連付けて配布しますか？ はい簡単に

代替の記事タイトルは「ほぼ：子カウント（n）」です。 それがすべての仕組みだからです むき出しのCSSで、データ属性やレイアウト内のその他の要素がない場合。



たとえば、ある種のニュースフィードがあるとします。 どちらでもかまいません。 主なことは、その中に含まれる要素の数と、対称になるようにそれらを配置する方法がわからないことです。 そして、役に立たないが美しい何かをしたいです。例えば、すべてを2列に配置し、いくつかのブロックを全幅で挿入します。 3回ごと、または5回ごと。



もちろん、4つの要素があり、3番目の要素が全幅で作成されている場合、最後の要素は最後にハングします。 したがって、要素の数が3の倍数である場合にのみ、このような美しくて役に立たないものを適用する必要があります。 そして、それらの数が奇数である場合（ただし、3の倍数ではない場合）-たとえば、バスバー全体の最後の要素を実行する必要があります。

このように、例えば：











または、たとえば、GTA 5のように、ラジオを作ることにします。これは次のとおりです。







また、要素を円形に配置したいが、その数がわからない場合。 もちろん、異なる場合のために-異なる変換を指定する必要があります：rotate（）。 さて、または、必要に応じて、罪とcosに依存して、左と上にすべてを配置できます。 しかし、それでも、要素の数を知る必要があります。



このような機能を実装する必要があるプロジェクトでは、最初にすべてを最も単純なjsで実行しました。

function countElementChildren(element) { $(element).attr('children', $(element).children().length) }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そしてscssで私は直接働きました

 @for $i from 1 through 20 { .parent[children="#{$i}"] { @for $j from 1 through $i { & > :nth-child(#{$j}) { transform: rotate(360deg * (($j - 1) / ($i - 1))); } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコードが誰にとっても明確であることを願っています。 そうでない場合は、.parent [children = 2]>：nth-​​child（0）{transform：rotate（0deg）}という形式の構造で展開し、さらにループに沿って展開します。



子孫の数を監視するためにMutationObserverでこの関数の呼び出しをラップすることはできましたが、それでもこのソリューションの不正確さの感覚がありました-それはメインロジックとは関係のないスタイルでした。



おそらく、かなり長い間スタイルを練習してきたすべての人が、直感レベルのどこかで、「同じスタイルでこれを行うことができます」と思われます。

その結果、バックグラウンドでのほぼ1日は、要素の数を決定する方法の解決策の検索でした。 非常によく似ていますが、2つのソリューションもありました。

ロジックは非常にシンプルで、技術的には（〜および+を介して）ほぼすべての要素を参照できますが、リスト内の要素の数を決定するには、先に進み、すべての要素をカウントしてから戻ることができる必要があります。

「逆」移動は、nth-last-of-typeとnth-last-childの2つの属性だけで可能です。

さらに、実際には、この移動は最後の要素から実行されるため、最終的には、最初から最後、n番目の最後の子までのすべての要素を調べ、最初の子までの要素の「最終性」を発見する必要があります

その結果、セレクターの最初のバージョンは

 :nth-last-child(20):first-child { }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これにより、最初から20番目の要素（つまり、親が20の子しかない場合）を参照できるようになりました。

次のような次のアイテムに移動できます。

 :nth-last-child(20):first-child ~ :nth-child(10) { }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

読みやすさはありましたが、やや大きく見えました。

最初の子は特別な場合です：n番目の子（1）、最後にセレクターを取得したことを思い出してください

 :nth-child(1):nth-last-child(20) { }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これにより、子のリストの最初と最後に明確に「固執」し、あらゆる手段で左右に移動することが可能になりました。



実際のscssでは、やや怪しい構造になりました

 @for $i from 1 through 20 { @for $j from 1 through $i { .child:nth-child(#{$j}):nth-last-child(#{$i - $j}) { @include transform(rotate(360deg * (($j - 1) / ($i - 1)))) } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これがどのように機能するかの例を次に示します。

数に応じて異なるブロック幅の例

円内の要素の均一な分布の例



この例はおそらく多少工夫されていますが、実際には、要素へのそのような「ポイント」条件付き参照の実際の可能性を示しています。



マイナスのうち、大きなサイズの出力cssファイルのみに名前を付けることができます。20個の要素のデザインの場合、各セレクターにはベンダープレフィックスによる14行があり、結果のスタイルの長さは約2000行でした。



これが他にどのように使用できるかはわかりませんが、明らかに何か大きなもの、面白いものがあります。 アイデアがあれば、投稿の最後にここに例を追加します。