CSSの属性セレクター
特定の属性を持つHTML要素にスタイルを適用することもできます。以下のスタイルルールは、値が textのtype属性を持つすべての入力要素に一致します。 −
input[type = "text"]{ color: #000000; }
以下は、属性セレクターに適用されるルールです。
- p [lang] -lang属性を持つすべての段落要素を選択します。
- p [lang ="fr"] -lang属性の値が正確に「fr」であるすべての段落要素を選択します。
- p [lang〜="fr"] -lang属性に「fr」という単語が含まれているすべての段落要素を選択します。
- p [lang | ="en"] -lang属性に正確に「en」であるか「en-」で始まる値が含まれているすべての段落要素を選択します。
-
CSS属性セレクターを使用したフォームのスタイリング
CSSの属性セレクターを使用して、特定の属性を持つHTML要素にスタイルを適用します。属性セレクターには次のルールが適用されます。 p [lang] −lang属性を持つすべての段落要素を選択します。 p [lang =fr] −lang属性の値が正確に「fr」であるすべての段落要素を選択します。 p [lang〜=fr] −lang属性に「fr」という単語が含まれているすべての段落要素を選択します。 p [lang | =en] − lang属性に正確に「en」であるか、「en-」で始まる値が含まれているすべての段落要素を選択します。 以下は、C
-
CSSの高度なセレクター
CSSのAdvancedSelectorsには、隣接兄弟セレクター、属性セレクター、直接子セレクター、n番目のタイプセレクターなどが含まれます。また、GeneralSiblingSelectorも含まれます。例を以下に示します。 h1 ~ h3 直接子セレクターの例- div > span 以下は、CSSの高度なセレクターを示すコードです- 例 <html> <head> <style> #red { color: red; } .green { background: green; } ul:n