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>項目１</li>
<li>項目２</li>
</ul>
</div>


　と書けばこうなるところ

<style>
div.class1 > ul
{
	list-style: none;
}
</style>


　という CSS 定義を行って（「list-style: none;」は先頭の中点をつけない意）

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


<div class="class1" style="text-align: left;">
<ul>
<li>項目１</li>
<li>項目２</li>
</ul>
</div>


　先頭の中点がつかなくなります。