- 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>
先頭の中点がつかなくなります。
|
|
