TOP ＞ スタイルシート基本知識 ＞ ある要素の子要素だけにスタイルシートを適用する。
ある要素の子要素だけにスタイルシートを適用する。
HTML文書は多数の要素で構成されています。要素Aの中に、別の要素Bを入れ込んだ場合、AとBは親子関係にあるといいます。
この時、特定の子孫要素にだけスタイルシートを適用したいことがあります。
こんな時は、セレクタ指定の部分で、親になるセレクタと子孫にしたいセレクタをスペースで区切って書くと、 特定の子孫要素に好みのスタイルシートを適用できます。これを「子孫セレクタ」といいます。 P要素の中の子孫要素であるstrong要素にだけ、スタイルシートを適用する場合、「p strong{...}」と記述します。
親セレクタや子孫セレクタにクラスやIDを付けて、より細かい設定も可能です。
ある要素の子要素だけにスタイルシートを適用する
【スタイルシート】
親セレクタ 子孫セレクタ｛プロパティ：値; プロパティ：値; ・・・・｝
"ある要素の子要素だけにスタイルシートを適用する。 "のサンプルはコチラをクリック
- サンプルページのコードは以下の通りです。
|
<html> <head> <title>ある要素の子要素だけにスタイルシートを適用するサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- p strong{ background-color: yellow; border-bottom: 3px solid; } .c1 strong{ background-color: #ffaaaa; } p.c2 em{ background-color: #aaffaa; } p#c3 .c4{ background-color: #000000; color: #ffffff; } --> </style> </head> <body> <p>HTML文書の子孫要素に特定のスタイルシートを適用することが出来ます。</p> <br><br> <strong>普通に<strong>タグで囲んでも太字になるだけです。</strong> <p>ところが、<p>要素のなかで、<strong><strong>要素を使用する</strong>とスタイルシートが適用され、背景色が黄色になり下線がひかれます。</p> <div class="c1">クラスc1の中の<strong><strong>要素</strong>も個別に設定できます。背景色を薄い赤色にしてみました。</div> <p class="c2">クラスc2を設定した<p>要素の中の<em><em>要素</em>に、薄い緑色の背景色を設定してみました。</p> <p id="c3">IDがc3の<p>要素の中で<span class="c4">c4クラスを指定するような</span>複雑な設定も出来ます。背景色を黒・文字色を白にしています。</p> </body> </html> |
[
スタイルシート基本知識 ]
