チャイルドセレクタ基本

今日はいくつかのCSSの基本に戻るつもりです.私は、私の記事で第th子セレクタを使う傾向があります.
しかし、それは私が本当に私は本当に第th子セレクタを使用しての基礎を超えていない実現しました.
今日、この強力なCSSセレクターといくつかの例のオプションを探ります.

ベーシックセレクター

いくつかの基本的なセレクタを使用して起動しましょう.
どの要素を選択するかを定義できます.
だから、3番目の項目を選択したいと言うことができます.

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

li:nth-child(3) {
    color: green;
}

結果:

奇数セレクタ

これらの属性を使用して、すべての奇数または偶数のコードを選択することができます.

li:nth-child(odd) {
    color: red;
}

結果:

li:nth-child(even) {
    color: blue;
}

結果:

あらゆるxセレクタ

何かクールなのは、すべてのX要素を選択することです.

    li:nth-child(4n) {
    color: purple;
}

結果:

または最初のものを含める場合は

li:nth-child(4n+1) {
    color: purple;
}

結果:

2番目の例から始めることもできます.

li:nth-child(4n+2) {
    color: purple;
}

結果:

第1のセレクタ以外のすべて

我々は、すべての選択が最初の3つの要素を選択するセレクタを持つこともできます.

li:nth-child(n+4) {
    color: teal;
}

結果:

最初の数セレクタのみ

私たちがそれを行うことができます別のクールなことは、最初のX量だけを選択します.
最初の3つを得ましょう

li:nth-child(-n+3) {
    color: teal;
}

結果:

最後の要素の選択

我々も、最後の要素を選択することができます.

li:last-child {
    color: orange;
}

結果:

これにより、2番目のものを最後まで取得することもできます.

li:nth-last-child(2) {
    color: orange;
}

結果:

結合セレクタ

我々も、セレクタを組み合わせることができます!
のは、奇妙なリスト量からすべての偶数を取得したいとしましょう.

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

ul:nth-child(odd) li:nth-child(even) {
    color: orange;
}

これは、すべての奇妙なulし、それらのすべての偶数liを取得します.
結果:

このcodepenで遊びをして、何が起こるかについて見るために若干のセレクターを変えてください!

ブラウザサポート

n番目の子セレクタは本当に良いサポートしており、ブラウザのほとんどで使用することができます.
彼らを利用するのをためらうな.

読んでいただきありがとうございます、接続しましょう！

私のブログを読んでくれてありがとう.私の電子メール会報を購読して、Facebook