CSSの新機能は薄い空気からは表示されませんが、議論、評価、定義、執筆、プロトタイピング、テスト、公開、サポートなど、長いプロセスを経ます。このプロセスは非常に長く、新しい機能を使用したいと思っていても、待つことしかできません。
しかし、別の待機方法を選択できます。この機能を使用してインターフェイスやデモンストレーションを完全に避けますか？または、CSSの境界に挑戦し、自分で実装しようとしますか？
多くの進取的で好奇心の強い開発者が後者を選択しました。このメンタリティがなければ、CSSは停滞します。したがって、今日は、今後の2つの機能を調査します。私たちは長年彼らを楽しみにしてきたので、私の好奇心を飛ばし、事前に彼らの魅力を感じさせてください！ sibling-count()
sibling-index()ツリーカウント関数
関数リクエスト。
関数内で関数は文字列を使用します。これにより、数値を処理する関数を使用できることは素晴らしいことです。これにより、レイアウトに新しい可能性がもたらされます。
calc()counter()ただし、
関数では役に立たなくなります。要素のインデックスとその数の兄弟要素の数をANcounter()integercalc()の形で返すような、同様の関数が必要です。これは過度の需要がないようです。現在、pseudoセレクター（およびそのバリアント）を使用して、pseudoセレクターを使用して要素に含まれるアイテムの数に基づいて照会することは言うまでもなく、ツリーの場所に基づいて要素をクエリすることができます。 :nth-child()
:has()幸いなことに、今年のCSSWGは
関数の実装を承認しました！一部のコンテンツは、仕様に記載されています：sibling-count()
sibling-index()
関数は、関数を使用してとして表される要素の親要素の子要素の子要素の総数を表します。
関数は、親要素の子要素の関数を使用して、sibling-count()<integer></integer>で表される要素のインデックスを表します。
それらを使用するのにどれくらい時間がかかりますか？今年の初めに、Adam Argyleは次のように述べています。「Chromiumのエンジニアは、これをやりたいと言及していますが、まだ試してみるロゴはありません。2025年にもっとニュースを入手したいと思っていますが、すぐにリリースされることはありません。その間、私たちが今できることを見てみましょう！sibling-index()と同様に、<integer></integer>カウント1から。:nth-child()sibling-index()
アップデート（2025年3月5日）：Chromeは、これら2つの機能をプロトタイプする意図を提出しました。
構文と使用法の観点から、ツリーカウント関数に最も近いものはカスタムプロパティです。ただし、最大の問題は、正しいインデックスとカウントをそれらに入力する方法です。最も簡単で最も長い方法は、純粋なCSSを使用して各値をハードコードすることです。nth-child()セレクターを使用して、各要素に対応するインデックスを与えることができます。
li:nth-child(1) {
--sibling-index: 1;
}
li:nth-child(2) {
--sibling-index: 2;
}
li:nth-child(3) {
--sibling-index: 3;
}
/* 以此类推... */等価物には、sibling-count()セレクターの数を使用してクエリする必要があるため、より多くの微妙さが必要です。数量クエリには、次の構文があります：:has()
.container:has(> :last-child:nth-child(m)) { }
ol:has(> :nth-child(1)) {
--sibling-count: 1;
}
ol:has(> :last-child:nth-child(2)) {
--sibling-count: 2;
}
ol:has(> :last-child:nth-child(3)) {
--sibling-count: 3;
}
/* 以此类推... */スコアリングする人の場合、12の要素のインデックスとカウントを理解するには24のルールが必要です。確かに、この数値をより管理しやすい数値に削減できると感じていますが、各インデックスをハードコードすると、記述するコードの量が増加します。私たちにできる最善のことは、CSSを書き換えて、
と--sibling-indexのプロパティを一緒にネストできるようにすることです。各属性を個別に書き込む代わりに：--sibling-count
li:nth-child(2) {
--sibling-index: 2;
}
ol:has(> :last-child:nth-child(2)) {
--sibling-count: 2;
}ルール内で--sibling-countルールをネストできます。 --sibling-index
li:nth-child(2) {
--sibling-index: 2;
ol:has(> &:last-child) {
--sibling-count: 2;
}
}
liしかし、これはほんの少しの改善です。 100個の要素がある場合でも、liおよびolプロパティを100回ハードコードする必要があります。幸いなことに、次の方法では、特にベース2の場合、ルールを対数的に追加します。したがって、100の要素に100のルールを書く代わりに、約100の要素に対して約100のルールを記述する必要があります。
改善方法--sibling-index
--sibling-countこの方法は、昨年10月にローマコマロフによって最初に説明され、2つのツリーカウント関数と将来の
このメソッドはカスタムプロパティも使用しますが、各プロパティのハードコーディングの代わりに、2つのカスタムプロパティを使用して、各要素の--sibling-indexプロパティを構築します。ローマの記事と一致するために、私たちはそれらを--si1と--si2と呼びます。
li:nth-child(1) {
--sibling-index: 1;
}
li:nth-child(2) {
--sibling-index: 2;
}
li:nth-child(3) {
--sibling-index: 3;
}
/* 以此类推... */は、これら2つのプロパティと--sibling-index因子（f）を使用して構築されます。これは、2以上の整数を表します。だから...
sqrt(F) - 1
最初に知っておくべきことは、
の属性を計算するための式はです。私たちの要因が3の場合、それは次のようになります：--sibling-index
calc(F * var(--si2) var(--si1))
.container:has(> :last-child:nth-child(m)) { }をオフセットとして設定します。これは、次のCSSに翻訳されます：--si1
--si1
ol:has(> :nth-child(1)) {
--sibling-count: 1;
}
ol:has(> :last-child:nth-child(2)) {
--sibling-count: 2;
}
ol:has(> :last-child:nth-child(3)) {
--sibling-count: 3;
}
/* 以此类推... */ 同様に、要因が3の場合、次の2つのルールを書きます。
のみを設定することにより、最大8つの要素を計算できます。それがどのように機能するかの背後にある数学的計算は、一見して奇妙に見えますが、一度それを直感的に理解すると、すべてが明らかになります。この式を使用してすべての要素にアクセスする方法を確認できるこのインタラクティブなデモを作成しました。コードスニペットの上にホバリングして、選択できる要素を確認してクリックして、それらを可能なインデックスに結合します。 など、欠落していることが1つあります： 選択方法を使用して、追加のセレクターを記述する必要はありません。これらの javaScriptメソッド
属性を設定し、コンテナ内に を設定する関数を作成します（カスケードのために子供の要素で使用できます）。 から 関数を書きました。生成されたオブザーバーオブジェクトを使用して、2つのパラメーターを受け入れる これが私たちがする必要があるすべてです！この方法を使用すると、多くの要素を計算できます。次のデモでは、最大値を100に設定しますが、10回に簡単に到達します。
および 詳細情報とチュートリアルli:nth-child(2) {
--sibling-index: 2;
}
ol:has(> :last-child:nth-child(2)) {
--sibling-count: 2;
}--si2
li:nth-child(2) {
--sibling-index: 2;
ol:has(> &:last-child) {
--sibling-count: 2;
}
}li {
--si1: 0;
--si2: 0;
}sibling-count()関数。 幸いなことに、sibling-index()プロトタイピングから学んだことすべてを再利用します。コンテナ内の2つのカスタムプロパティの2つのカスタムプロパティから始めます。両方とも0から始めます。 --sc1を計算するための式は同じです。 --sc1
--sibling-count
li:nth-child(1) {
--sibling-index: 1;
}
li:nth-child(2) {
--sibling-index: 2;
}
li:nth-child(3) {
--sibling-index: 3;
}
/* 以此类推... */--sibling-countおよび:has()プロパティをルールに詰め込むことができます。
--sc1
--sc2これはファクター3を使用しているため、4つのルールしかない最大8つの要素を計算できます。次の例には7倍の係数があるため、14のルールしかない最大48の要素を計算できます。 sibling-index()
.container:has(> :last-child:nth-child(m)) { }
最初に、domからコンテナを入手します：ol:has(> :nth-child(1)) {
--sibling-count: 1;
}
ol:has(> :last-child:nth-child(2)) {
--sibling-count: 2;
}
ol:has(> :last-child:nth-child(3)) {
--sibling-count: 3;
}
/* 以此类推... */--sibling-indexを取得できます。 --sibling-count
--sibling-index
elements.children機能があると、最初のツリーカウントプロパティがあるように、一度呼び出すことを忘れないでください：elements.children.length
--sibling-count
li:nth-child(2) {
--sibling-index: 2;
}
ol:has(> :last-child:nth-child(2)) {
--sibling-count: 2;
}
attributes、childList、およびsubtree。この場合、childListの変更を確認するだけなので、プロパティをtrue：li:nth-child(1) {
--sibling-index: 1;
}
li:nth-child(2) {
--sibling-index: 2;
}
li:nth-child(3) {
--sibling-index: 3;
}
/* 以此类推... */
タイムマシンを持っていないので、sibling-index()関数がいつ公開されるかはわかりません。しかし、CSSWGは仕様に何かを書いており、物事を公開するブラウザ（主にChromium）の意図は最近非常に強力なので、これら2つの機能がすぐに表示されると思います！ sibling-count()
幸いなことに、それらが公開され、サポートが受け入れられると、これらのカスタムプロパティをその関数と同じ名前に設定するだけです。もちろん、各カスタム属性を変更するためにCSSを変更したくない場合は、これも実行できます。
.container:has(> :last-child:nth-child(m)) { }将来のCSSの可能性：ツリーカウント関数とランダム値（ローマコマロフ）
トランジションの驚異を見る（Chris Coyier）
calc（）＃1026
内でcounter（）の使用を有効にします
提案：sibling-count（）およびsibling-index（）＃4559
以上が兄弟count（）と兄弟index（）を待つ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
