BinaryDevelop
  1. ホーム
  2. css

[解決済み】CSSでN個目の要素を全て選択する

2022-04-30 14:40:51

質問

ある要素の集合の中で、例えば4番目の要素まで選択することは可能ですか？

例：16個の <div> 要素... みたいな書き方ができる。 

div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)

は、もっと良い方法があるのでしょうか？

どのように解決するのですか？

その名の通り :nth-child() を使用して算術式を構築することができます。 n を定数として使用することができます。加算を行うことができる( + )、減算( - ) と 係数乗算 ( an ここで a は整数（正の数、負の数、0を含む）です。

上のセレクタリストを書き直すとこうなる。 

div:nth-child(4n)

これらの算術式がどのように機能するかについての説明は、私の回答 この質問 と同様に スペック .

なお、この回答では、同じ親要素内の子要素はすべて同じ要素タイプであると仮定しています。 div . のような異なるタイプの要素がある場合、その要素を削除する必要があります。 h1 または p を使用する必要があります。 :nth-of-type() の代わりに :nth-child() を数えるだけであることを確認します。 div 要素で構成されます。 

<body>
  <h1></h1>
  <div>1</div>  <div>2</div>
  <div>3</div>  <div>4</div>
  <h2></h2>
  <div>5</div>  <div>6</div>
  <div>7</div>  <div>8</div>
  <h2></h2>
  <div>9</div>  <div>10</div>
  <div>11</div> <div>12</div>
  <h2></h2>
  <div>13</div> <div>14</div>
  <div>15</div> <div>16</div>
</body>

それ以外のもの（クラス、属性、またはこれらの組み合わせ）については、任意のセレクタに一致するn番目の子を探す場合、純粋なCSSセレクタではこれを行うことができません。例えば この質問 .

ちなみに、4nと4n＋4に関しては、それほど大きな違いはありません。 :nth-child() . を使用する場合 n これは、各セレクタがマッチする内容です。

:nth-child(4n) 

4(0) = 0
4(1) = 4
4(2) = 8
4(3) = 12
4(4) = 16
...

:nth-child(4n+4) 

4(0) + 4 = 0  + 4 = 4
4(1) + 4 = 4  + 4 = 8
4(2) + 4 = 8  + 4 = 12
4(3) + 4 = 12 + 4 = 16
4(4) + 4 = 16 + 4 = 20
...

ご覧の通り、どちらのセレクタも上記と同じ要素にマッチします。この場合、違いはありません。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します