タイプセレクタ（要素型セレクタ）

[戻る]

タイプセレクタ

      h1 { color: red; }
<h1>見出し1</h1>

見出し1

複数の要素に適用

      h1, h2 { color: orange; }
<h1>見出し1</h1>
上はh1, 次は h2
<h2>見出し2</h2>

見出し1

上はh1, 次は h2

見出し2

子要素に適用

      div > span { background-color: yellow; }

<span>ここには適用されない</span>
 <div>
   div要素の内側
   <span>ここには適用される</span>
   <p>p要素の内側
     <span>ここには適用されない</span>
   </p>
 </div>
 ここには適用されない
divの内側 ここには適用される

p要素の内側 ここには適用されない

子孫要素に適用

      div span { color: orange; }

<span>ここには適用されない</span>
 <div>
   div要素の内側
   <span>ここには適用される</span>
   <p>p要素の内側
     <span>ここには適用される</span>
   </p>
 </div>
 ここには適用されない
divの内側 ここには適用される

p要素の内側 ここには適用される

直後の要素に適用

      h1 + div { background-color: green; }

<h1>見出し</h1>
 <div>
   ここには適用される
 </div>
 <div>
   ここには適用されない
 </div>

見出し

ここには適用される
ここには適用されない

後に置かれた要素に適用

      h2 ~ div { color: indigo; background-color: pink; }

<div>
     ここには適用されない
</div>
<h2>見出し</h2>
<div>
   ここには適用される
</div>
<p>
   p要素
</p>
<div>
   ここにも適用される
</div>
ここには適用されない

見出し

ここには適用される

p要素

ここにも適用される

[戻る]