css - 出現回数に応じてcssを変更する

Question

ユーザークラスが親クラスに表示される回数に応じて、ユーザー div のスタイルを設定したいと考えています。jqueryでこれを行う方法は知っていますが、これはcss3でのみ可能ですか? Chrome ブラウザーのみを対象としています。

<div class="parent">
 <div class="user"></div>
</div>

<div class="parent">
 <div class="user"></div>
 <div class="user"></div>
</div>

score 1 · Accepted Answer

私が知っていることをあなたが求めていることをする方法はありません。Gareth Parkerによってリンクされたメソッドでは、子要素がいくつあるか、またはそれらの最大数を知っている必要があります。

私が得た最も近いものは、.user1つの.user要素に続く要素のスタイルを設定することでした。

.parent .user { background:red; }
.parent .user ~ .user { background:blue; }

これは、~GeneralSiblingコンビネータであるコンビネータを使用します。

ここでそれが実行されています。

.parentもちろん、内部に複数の要素があることがわかっている要素にクラスを適用してから、その特定のクラス内の.user任意の要素をターゲットにすることもできます。.user

score 1 · Accepted Answer

:nth-child(integer) というセレクターがあります。あなたはそのようにすることができます

.parent .user:nth-child(1)

その .parent 内の最初の .user にのみ影響します。なぜ0ベースではないのかわかりませんが、何でも。また、次のような方程式を使用できます。

.parent .user:nth-child(2n+2)

毎秒 .parent .user のみを選択します

その他の読み物はこちら

または、.user が表示される回数に基づいてスタイルを表示するには、最初の子をスタイリングしてからオーバーライドし、2 番目の子をスタイリングし、3 番目の子をスタイリングするときにそれをオーバーライドするという解決策があります。これが例です

2 に答える 2