CSSセレクタ( Part - 1 )

セレクタを使用して、HTMLドキュメント内の要素を選択します.
最も使用されるCSSセレクタはclass とid , それにもかかわらず、多くのセレクタが簡単に、かなりの要素のセットにスタイルを追加するために使用することができます.
コンビネーション
属性セレクタ
擬似セレクタ
d .擬似クラス
この記事では、クラスとIDを超えた別のセレクタについて話します.
すべての属性セレクタに対してHTMLスニペットの下で使用します.

<div>
    <p>First Paragraph</p>
    <p>Second Paragraph</p>
    <span>Third Span</span>
    <p>Fourth Paragraph</p>
    <ul>
        <li>First Item</li>
        <li>Second Item</li>
    </ul>
</div>

<p>Fifth Paragraph</p>
<p>Sixth Paragraph</p>

コンビネーション

子孫セレクタ

ユニバーサルセレクター

隣接兄弟セレクタ

一般的な兄弟セレクタ

チャイルドセレクター

1️⃣ 子孫セレクタ

別の要素内の要素を選択します.これは、すべてのP要素を選択します.

div p {
    background-color: #fdc7d5;
}

出力:

2️⃣ ユニバーサルセレクター

ユニバーサルセレクタですべての要素を選択することができます.

div * {
  background-color: #fdc7d5;
}

div *すべてのdiv要素内の任意の要素を選択します.
出力:

3️⃣ 隣接兄弟セレクタ

他の要素に直接続く要素を選択します.

div + p {
  background-color: #fdc7d5;
}

divタグに直接続くp要素を選択します.別のものに続く要素は兄弟と呼ばれます.
出力:

4️⃣ 一般的な兄弟セレクタ

あなたはそれに続く要素のすべての兄弟を選択することができます.これは隣接するセレクタ(div + p)のようですが、これは1つではなく以下の要素の全てを取得します.

div ~ p {
  background-color: #fdc7d5;
}

出力:

5️⃣ チャイルドセレクター

要素の直接の子を選択します.他の要素の直接の子要素を選択できます.

div > p {
  background-color: #fdc7d5;
}

div > p すべて選択p それは直接の子供div .
出力:

属性セレクタ

それは、最後にそれを加えることによって、属性セレクタをもう一つのセレクタと結合します.

<input type="text" placeholder="Enter Input" />
<input type="text" placeholder="Disabled Input" disabled />

input[disabled] 無効な属性を持つすべての入力要素を選択します.

input[disabled] {
    background: #82ffdc;
}

出力:

属性セレクタの型:

属性値セレクタ

属性はセレクタから始まる

属性はセレクタで終了する

属性ワイルドカードセレクタ

属性セレクタのHTMLテンプレートの下で使用します.

<p class="line-first-para">First Paragraph</p>
<p class="second-para">Second Paragraph</p>
<p class="line-last">Third Paragraph</p>

1️⃣ 属性値セレクタ

input[type="checkbox"] チェックボックスの入力要素をすべて選択します.

input[type="checkbox"] {
  font-size: 18px;
  margin-top: 3rem;
}

2️⃣ 属性はセレクタから始まる

[class^="line"] クラス="line "とclass="line" or class="line-first-para" .

[class^="line"] {
    background: yellow;
}

出力:

3️⃣ 属性はセレクタで終了する

[class$="para"] で終わるすべての段落を選択しますpara .

[class$="para"] {
    background: skyblue;
}

出力:

4️⃣ 属性ワイルドカードセレクタ

[class*="-"] クラス=「第二のpara」またはクラス=「第三のpara」のようなクラスの"-"を持つすべての要素を選択します.

[class*="-"] {
    background: orangered;
    color: white;
}

出力:

リファレンス🧐

Combinators MDN

Attribute Selectors MDN

🌟
👩🏻‍💻 Suprabha.me
🌟