web-dev-qa-db-ja.com

より大きいおよびより小さいCSS nth-child

私のHTMLには、

<div class="container">
</div>
<div class="container">
</div>
<div class="container">
</div>
<div class="container">
</div>
..................
..................

上記のHTMLには、containerクラスがあります。 CSSでは、.container:nth-child(3,4,5,6,..and so on)にいくつかのスタイルを追加する必要があります。 1と2以外のすべてのnth-childを適用する必要があることを意味します.

htmlcsscss3css-selectors
53
user960567

:nth-child()はクラスでは機能せず、要素自体を探します。 .container divをラッパーでラップし、次を使用する必要があります。

.wrapper div:nth-child(n+3) {
   /* put your styles here... */
}

<div class="wrapper">
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
</div>

ワーキングデモ。

:nth-child()の明確化

.container:nth-child(n+3)を使用すると動作する場合としない場合があります。なぜなら、:nth-child()擬似クラスは、セレクター（この場合は.container）に一致するnth子要素を表すからです。

.container要素がそのparentのnth-childではない場合、選択されません。

Spec から：

:nth-child(an+b)擬似クラス表記は、ドキュメントツリー内で正の整数に対してan+b-1siblingsの前にある要素を表しますまたはゼロのnの値で、親要素があります。

この例を考えてみましょう：

<div class="parent">
    <div>1st</div>
    <div>2nd</div>
    <div>3rd</div>
    <div class="container">4th</div>
    <div class="container">5th</div>
    <div class="container">6th</div>
    <div>7th</div>
    <div class="container">8th</div>
    <div>9th</div>
</div>

この場合、.container:nth-child(2)は2番目のdiv.container要素（5thコンテンツを含む）を選択しません。その要素は、親の子ツリーでは、親の2nd子ではないためです。

また、.container:nth-child(n+3)はすべてのdiv.container要素を選択します。これは、nが親の子ツリーの最初の要素の0から始まり、最初のdiv.containerがその親の4番目の子。

n starts from 0

n = 0: (0 + 3) = 3 => 3rd element
n = 1: (1 + 3) = 4 => 4th element
n = 2: (2 + 3) = 5 => 5th element
...

したがって、div.container:nth-child(n+3)はすべての3rd、4th、5th、... div.containerセレクターに一致する子要素。

オンラインデモ。

89
Hashem Qolami

css：

.wrapper div:nth-child(n+3) {    /* you style*/   }

理由と説明

 (0+3) = 3 = 3rd Element
 (1+3) = 4 = 4th Element
 (2+3) = 5 = 5th Element  and so on ... where n=0,1,2,3.....

実例>>

9
suraj rawat

次のコードを試してください。1と2を除くすべての.containerクラスにスタイルを適用します。

.container+.container~.container{
   /*styles*/
}

デモフィドル

3
Zword

1と2だけの場合、スタイルを適用したくない場合は、代わりに次のようなことを行うことができます。

.container {
    background: yellow;
}

.container:first-child,
.container:first-child + .container {
    background: transparent;
}

黄色の背景は、最初の子とそれに続く子を除くすべてのコンテナに適用されます。

2
pstenstrm

動的な解決策の後（列幅などをハードコードしたくない場合）、 この優れた答え に基づいて javascript solution を公開しました。

実施例

使用法：

// After including tableColumnFreeze.js
var freezer = document.getElementById('freezer');
new TableColumnFreeze(freezer);

マークアップ：

<div id="freezer">
  <table>
    <thead>
      <tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
    </thead>
    <tbody>
      <tr><th>Frozen</th><td>Not frozen</td><td>Not frozen</td></tr>
      <tr><th>Frozen</th><td>Not frozen</td><td>Not frozen</td></tr>
      <tr><th>Frozen</th><td>Not frozen</td><td>Not frozen</td></tr>
      <tr><th>Frozen</th><td>Not frozen</td><td>Not frozen</td></tr>
     </tbody>
  </table>
</div>
1
toomanyredirects