CSS セレクタについて

セレクタの書き方にはいくつか種類がある。

シンプルセレクタ
要素のみ、classのみ、idのみのように単一に使用するセレクタ。
例

h1{color:red;}
#aaa{color:red;}
.aaa{color:red;}

グループセレクタ
複数のセレクタをカンマでつなぐことで、まとめて指定することができるセレクタ。

h1,h2,h3{color:red;}

子孫セレクタ
親→子→孫のように絞り込む形で指定するセレクタ。

<div id = "aaa">
  <ul>
    <li>てすと</li>
  </ul>
</div>

#aaa ul li{color:red;}

子セレクタ
親要素と子要素の間を「>」で繋いで特定の親の特定の要素といったように直接指定するセレクタ。

<ul id = "aaa">
  <li>てすと</li>
</ul>

#aaa > li{color:red;}

隣接セレクタ
指定した要素の次に続く要素を「+」でつなぐセレクタ。
以下の例ではh1の次のp要素。

<h1>あああ</h1>
<p>いいい</p>

h1 + p2 {color:red;}

思考停止するな