<h1>CSS セレクタ</h1>
<!-- a, b -->
<h2>h2 複数セレクタ a, b</h2>
<h3>h3 h2,h3共に赤に塗られる</h3>
<!-- a b -->
<article>
  <h4>h4 子孫セレクタ a b</h4>
  <p>p 緑に塗られる</p>
  <span><p>span p ここも緑に塗られる</p></span>
</article>
<!-- a > b -->
<section>
  <h4>h4 子セレクタ a > b</h4>
  <p>p 青に塗られる</p>
  <span><p>span p ここは塗られない</p></span>
</section>

<!-- a + b -->
<h4> 隣接セレクタ a + b</h4>
<p>p ここは塗られない</p>
<p>p 黄色</p>
<p>p ここも黄色</p>

<!-- ab -->
<h4>class セレクタ, id セレクタ ab</h4>
<p class="class_name">ここは塗られない</p>
<span class="class_name">
  <p>ここはピンク</p>
</span>
/* a, b {}*/
h2, h3 {
  color: red;
}

/* a b {} */
article p{
  color: green;
}
/* a > b {} */
section > p {
  color: blue;
}

/* a + b */
p + p {
  color: yellow;
}

/* ab */
span.class_name {
  color: pink;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.