CSSセレクタ( Part - 1 )
セレクタを使用して、HTMLドキュメント内の要素を選択します.
最も使用されるCSSセレクタは
コンビネーション
属性セレクタ
擬似セレクタ
d .擬似クラス
この記事では、クラスとIDを超えた別のセレクタについて話します.
すべての属性セレクタに対してHTMLスニペットの下で使用します.
子孫セレクタ ユニバーサルセレクター 隣接兄弟セレクタ 一般的な兄弟セレクタ チャイルドセレクター
別の要素内の要素を選択します.これは、すべてのP要素を選択します.
ユニバーサルセレクタですべての要素を選択することができます.
出力:
他の要素に直接続く要素を選択します.
出力:
あなたはそれに続く要素のすべての兄弟を選択することができます.これは隣接するセレクタ(div + p)のようですが、これは1つではなく以下の要素の全てを取得します.
要素の直接の子を選択します.他の要素の直接の子要素を選択できます.
出力:
それは、最後にそれを加えることによって、属性セレクタをもう一つのセレクタと結合します.
属性値セレクタ 属性はセレクタから始まる 属性はセレクタで終了する 属性ワイルドカードセレクタ 属性セレクタのHTMLテンプレートの下で使用します.
Combinators MDN Attribute Selectors MDN 🌟
👩🏻💻 Suprabha.me
🌟
最も使用される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;
}
出力:
属性セレクタの型:
<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;
}
出力:
リファレンス🧐
👩🏻💻 Suprabha.me
🌟
Reference
この問題について(CSSセレクタ( Part - 1 )), 我々は、より多くの情報をここで見つけました https://dev.to/suprabhasupi/css-selectors-part-1-2g0oテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol