CSS擬似セレクタでの選択

導入

Web devの最初の本能は、特定の要素を選択する必要がある場合は、しばしばHTMLマークアップにクラスを追加することです.しかし、多くの場合、これは必要でありません、そして、我々がCMS生成されたHTMLマークアップに対処しているならば、これは全く可能でさえありません.この記事では、これらの特定の選択を行うのに役立つCSS擬似クラスのいくつかを紹介します.

ファーストチャイルド

CSS :最初の子擬似クラスでは、「親の最初の子であるある型の最初の要素」を選びましょう.それは後で重要になるので、この規則を思い出してください.
例えば、(unn)順序付けリストを持っているならば、以下のスニペットに示すように、最初の子擬似クラスを使用して、リスト内の最初のli要素だけを対象とすることができます.

<ul>
    <li>Lorem ipsum dolor sit.</li>
    <li>Cupiditate fugit iste voluptates!</li>
    <li>Laudantium quas saepe voluptatum.</li>
    <li>Dolorem minima officiis quis!</li>
    <li>Doloribus expedita magni quisquam.</li>
</ul>

<style>
    li {
        background: #efefef;
    }

    li:first-child {
        background-color: lightblue;
    }
</style>

最初のルールを使用すると、すべてのLi要素は、明るい灰色の背景を持つスタイルです.そして、第2の規則で、我々は最初のLiだけを目標とします.これにより、以下の画像に示すようなリストが表示されます.

最後の子

CSS :最後の子は非常によく似ています:最初の子のカウンタ部分、それを除いて、あなたはそれを右推測、それは親の最後の子である特定の型の最後の要素を選択します.

ul>
    <li>Lorem ipsum dolor sit.</li>
    <li>Cupiditate fugit iste voluptates!</li>
    <li>Laudantium quas saepe voluptatum.</li>
    <li>Dolorem minima officiis quis!</li>
    <li>Doloribus expedita magni quisquam.</li>
</ul>

<style>
    li {
        background: #efefef;
    }

    li:last-child {
        background-color: lightblue;
    }
</style>

このスニペットでは、まず、すべてのLiの光の灰色の背景を与えるために選択し、我々は、最後のLiの背景を覆うために、第2のルールを使用して、ライトブルーである.

今、論理的な仮定は、最初の子と最後の子擬似クラスを使用して記事の最初と最後の段落を選択することです.しかし、ここで我々は少しの問題に入ります.
このルールを覚えているように頼まれたことを覚えておいてください.「親の最初の子であるあるタイプの最初の要素」?多くの記事はいくつかの並べ替えの見出しタグから始まります.そして、以下の例のP要素はもはや「それの親の最初の子供」であり、したがって、我々の最初の子セレクタは最初の段落に合わないでしょう.

<article>

    <h1>Lorem ipsum dolor sit amet.</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci dignissimos dolore dolorem doloribus fugiat impedit minima quaerat, quam quia, sequi sint unde. Beatae fuga itaque nemo reiciendis rerum. Accusantium asperiores corporis debitis nihil numquam possimus quasi ratione repellat temporibus.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci dignissimos dolore dolorem doloribus fugiat impedit minima quaerat, quam quia, sequi sint unde. Beatae fuga itaque nemo reiciendis rerum. Accusantium asperiores corporis debitis nihil numquam possimus quasi ratione repellat temporibus.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci dignissimos dolore dolorem doloribus fugiat impedit minima quaerat, quam quia, sequi sint unde. Beatae fuga itaque nemo reiciendis rerum. Accusantium asperiores corporis debitis nihil numquam possimus quasi ratione repellat temporibus.</p>

</article>

<style>
    p:first-child {
        font-size: 1.1rem;
        font-weight: bold;
    }
</style>

神は私たちのためにこの小さな問題に解決策があります.入力します.

最初のタイプ

CSS :最初の型の擬似クラスは、最初の子のものと非常によく似ています.s name hit,指定した型の最初のellementを選択します.これは、記事の最初の段落を選択することができます記事の場合は、記事の最初の子要素かどうか.

<article>

    <h1>Lorem ipsum dolor sit amet.</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci dignissimos dolore dolorem doloribus fugiat impedit minima quaerat, quam quia, sequi sint unde. Beatae fuga itaque nemo reiciendis rerum. Accusantium asperiores corporis debitis nihil numquam possimus quasi ratione repellat temporibus.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci dignissimos dolore dolorem doloribus fugiat impedit minima quaerat, quam quia, sequi sint unde. Beatae fuga itaque nemo reiciendis rerum. Accusantium asperiores corporis debitis nihil numquam possimus quasi ratione repellat temporibus.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci dignissimos dolore dolorem doloribus fugiat impedit minima quaerat, quam quia, sequi sint unde. Beatae fuga itaque nemo reiciendis rerum. Accusantium asperiores corporis debitis nihil numquam possimus quasi ratione repellat temporibus.</p>

</article>

<style>
    p:first-of-type {
        font-size: 1.1rem;
        font-weight: bold;
    }
</style>

このコードでは、最初の擬似クラスを使用して記事の最初の段落を選択し、以下のイメージに示すように大きなフォントサイズとフォント重量を持つように設定します.

:最後の

CSS : Type型の擬似クラスの最後は、以下の例で示したように、指定された要素の最後の出現を選択することを除いて、その最初のタイプのカウンタ部分とほぼ同じです.

<article>

    <h1>Lorem ipsum dolor sit amet.</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci dignissimos dolore dolorem doloribus fugiat impedit minima quaerat, quam quia, sequi sint unde. Beatae fuga itaque nemo reiciendis rerum. Accusantium asperiores corporis debitis nihil numquam possimus quasi ratione repellat temporibus.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci dignissimos dolore dolorem doloribus fugiat impedit minima quaerat, quam quia, sequi sint unde. Beatae fuga itaque nemo reiciendis rerum. Accusantium asperiores corporis debitis nihil numquam possimus quasi ratione repellat temporibus.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci dignissimos dolore dolorem doloribus fugiat impedit minima quaerat, quam quia, sequi sint unde. Beatae fuga itaque nemo reiciendis rerum. Accusantium asperiores corporis debitis nihil numquam possimus quasi ratione repellat temporibus.</p>

</article>

<style>
    p:flast-of-type {
        font-size: 1.1rem;
        font-weight: bold;
    }
</style>

このコードでは、次の型を使用します.

: type ( n )

Type :擬似クラスのCSS : NTHは、次のコード例に示すように、1つのベースの整数を渡すことによって、リスト内の指定された要素の最初、2番目、3番目のETCインスタンスを選択するために使用できます.

<ul>
    <li>Lorem ipsum dolor sit.</li>
    <li>Cupiditate fugit iste voluptates!</li>
    <li>Laudantium quas saepe voluptatum.</li>
    <li>Dolorem minima officiis quis!</li>
    <li>Doloribus expedita magni quisquam.</li>
</ul>

<style>
    li {
        background: #efefef;
    }

    li:nth-of-type(2) {
        background-color: lightblue;
    }

    li:nth-of-type(3) {
        background-color: lightgreen;
    }
</style>

このコードスニペットでは、最初のルールを使用して、すべてのLI要素をライトグレーの背景でスタイルにします.私たちが使用するよりも:第2の規則の型のnthと2番目のli要素を選択するためにその引数として2を渡します.次に、3番目のルールで同じことを行い、緑色の背景を持つ3番目のLi要素を選択します.

: nth - last - type ()

CSS : Typeクラスの擬似クラスの最後のクラスは次のようになります.

<ul>
    <li>Lorem ipsum dolor sit.</li>
    <li>Cupiditate fugit iste voluptates!</li>
    <li>Laudantium quas saepe voluptatum.</li>
    <li>Dolorem minima officiis quis!</li>
    <li>Doloribus expedita magni quisquam.</li>
</ul>

<style>
    li {
        background: #efefef;
    }

    li:nth-last-of-type(2) {
        background-color: lightblue;
    }

    li:nth-last-of-type(3) {
        background-color: lightgreen;
    }
</style>

このコードスニペットでは、最初のルールを使用して、すべてのLI要素をライトグレーの背景でスタイルにします.私たちが使用するよりも:2番目のルールの型の最後の最後の最後の引数として2番目の最後のLiの要素を選択するには、ライトブルーの背景でそれをスタイルを選択します.それから、3番目の最後のLi要素を選んで、緑の背景でそれをスタイルにするために、我々は第3の規則で同じことをします.

との組み合わせ

このような指定された擬似クラスを、nottest ()の擬似クラスと組み合わせることで、効果を「逆」にすることができます.以下の例では、最後のもの以外のすべてのLiにボーダーボトムを与えるユースケースがあります.

<ul>
    <li>Lorem ipsum dolor sit.</li>
    <li>Cupiditate fugit iste voluptates!</li>
    <li>Laudantium quas saepe voluptatum.</li>
    <li>Dolorem minima officiis quis!</li>
    <li>Doloribus expedita magni quisquam.</li>
</ul>

<style>
    li:not(:last-child) {
        border-bottom: solid 1px silver;
    }
</style>

これにより、以下の画像に示すようなリストが表示されます.

購読する

読書のための感謝/見て、セーフ