ホームページ > 記事 > ウェブフロントエンド > CSS nth-child で要素の範囲を選択するにはどうすればよいですか?
CSS の n 番目の子セレクターを使用すると、親要素内の位置に基づいて要素を正確に選択できます。ただし、特定の数値で定義されていない範囲にこのセレクターを適用するのは難しい場合があります。
次の CSS セレクターを検討してください:
<code class="css">.myTableRow td:nth-child(?){ background-color: #FFFFCC; }</code>
このセレクターは、
このセレクターを
<code class="css">.myTableRow td:nth-child(n+2):nth-child(-n+4){ background-color: #FFFFCC; }
このセレクターは、2 つの追加の n 番目の子サブセレクターを使用します:
これら 2 つのサブセレクターを組み合わせることで、2 番目から 4 番目の位置までの要素を含む範囲を効果的に作成します。
次の HTML テーブルを考えてみましょう。
column 1
column 2
column 3
column 4
column 5
強化された CSS セレクターをこのテーブルに適用すると、背景色が 2 番目、3 番目、および 4 番目の
に適用されます。 「myTableRow」 内の要素。これは、これらの要素が 2 ~ 4 の定義された範囲内にあるためです。以上がCSS nth-child で要素の範囲を選択するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明:この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。前の記事:質問の形式と、CSS の「not」セレクターに焦点を当てた記事を念頭に置いて、タイトルのオプションをいくつか示します。
短くて直接的次の記事:質問の形式と、CSS の「not」セレクターに焦点を当てた記事を念頭に置いて、タイトルのオプションをいくつか示します。
短くて直接的関連記事
続きを見る- ネイティブ サポートのないブラウザで CSS バックドロップ フィルターをエミュレートするにはどうすればよいですか?
- 記事の内容に適した質問ベースのタイトルをいくつか紹介します。
* CSS の二重枠線: 望ましくない効果を回避するには?
* CSS レイアウトの問題: 隣接する Div 間の二重境界線の処理
*
- Express-EJS アプリケーションでの CSS ファイルの読み込みの問題を修正する方法: CSS が読み込まれないのはなぜですか?
- WebKit ブラウザに HTML ページネーションを実装する方法: 画面サイズのテキストの塊を確保するには?
- IE7 でブートストラップ ドロップダウンが他のコンテンツの背後に表示されるのはなぜですか?