HTML - CSS - セレクタ - 子セレクタ(>)

 
1. 概要
2. 親セレクタ > 子セレクタ
3. タグを使ってもいいのだ

1. 概要

 あるセレクタの直接の子となるセレクタを意味します。

2. 親セレクタ > 子セレクタ

 表題のとおり

親セレクタ > 子セレクタ
{
	プロパティ名: 値;
}
 の形式で指定します。  孫には継承されないそうで・・・。

.class1 > #id1
{
	color: red;
}
 というスタイルと

<span class="class1">
親
<span id="id1">子</span>
<span class="class2">孫
<span id="id1">ひ孫</span>
孫</span>
<span id="id1">子</span>
親
</span>
 というドキュメントを書きましたらば、以下のように表示されます。

  親
  
  孫
  ひ孫
  孫
  
  親

 なるほど直接の子にのみ適用されています。

3. タグを使ってもいいのだ

 そもそも、最初のところに書くべきであったのだな・・・。  セレクタにタグを使ってもいいわけで・・・。

<div style="text-align: left;">
<ul>
<li>項目1</li>
<li>項目2</li>
</ul>
</div>
 と書けばこうなるところ
  • 項目1
  • 項目2



<style>
div.class1 > ul
{
	list-style: none;
}
</style>
 という CSS 定義を行って(「list-style: none;」は先頭の中点をつけない意)

 クラス名をつけて記述すると


<div class="class1" style="text-align: left;">
<ul>
<li>項目1</li>
<li>項目2</li>
</ul>
</div>
 先頭の中点がつかなくなります。
  • 項目1
  • 項目2