CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの高度なセレクター

CSSのAdvancedSelectorsには、隣接兄弟セレクター、属性セレクター、直接子セレクター、n番目のタイプセレクターなどが含まれます。また、GeneralSiblingSelectorも含まれます。例を以下に示します。

h1 ~ h3

直接子セレクターの例-

div > span

以下は、CSSの高度なセレクターを示すコードです-

例

<html>
<head>
<style>
#red {
   color: red;
}
.green {
   background: green;
}
ul:nth-of-type(1) {
   background: rgb(0, 174, 255);
}
ul + h3 {
   border: 4px solid rgb(19, 0, 128);
}
a[href="https://www.wikipedia.org"] {
   font-size: 25px;
}
h1 ~ h3 {
   font-size: 40px;
}
div > span {
   background-color: DodgerBlue;
}
</style>
</head>
<body>
<h1>Advanced Selectors Example</h1>
<ul>
<li>Cow</li>
<li>Dog</li>
<li>Cat</li>
</ul>
<ul>
<li>Puma</li>
<li>Leopard</li>
<li>Cheetah</li>
</ul>
<h3>Animals</h3>
<div>
<span>Text sample</span>
<p>
Paragraph Text
<span>span text</span>
</p>
<p class="green">Paragraph Text</p>
<p id="red">Paragraph Text.</p>
<p class="green">Paragraph Text</p>
</div>
<a href="https://www.google.com">www.google.com</a>
<a href="https://www.wikipedia.org" target="_blank">www.wikipedia.org</a>
</body>
</html>

出力

上記のコードは次の出力を生成します-

CSSの高度なセレクター


  1. CSSでセレクターをグループ化する

    CSSグループ化セレクターは、複数の要素を選択し、それらを一緒にスタイル設定するために使用されます。これにより、各要素に共通のスタイルを宣言するためのコードと余分な労力が削減されます。セレクターをグループ化するには、各セレクターをスペースで区切ります。 構文 CSSグループ化セレクターの構文は次のとおりです- element, element {    /*declarations*/ } 次の例は、CSSグループ化セレクター-を示しています。 例 <!DOCTYPE html> <html> <head> <style>

  2. CSS属性セレクターを使用したフォームのスタイリング

    CSSの属性セレクターを使用して、特定の属性を持つHTML要素にスタイルを適用します。属性セレクターには次のルールが適用されます。 p [lang] −lang属性を持つすべての段落要素を選択します。 p [lang =fr] −lang属性の値が正確に「fr」であるすべての段落要素を選択します。 p [lang〜=fr] −lang属性に「fr」という単語が含まれているすべての段落要素を選択します。 p [lang | =en] − lang属性に正確に「en」であるか、「en-」で始まる値が含まれているすべての段落要素を選択します。 以下は、C