<a>タグ

HTMLでは要素のネスト（入れ子）がよく使われています。
入れ子とは要素の中に要素が入っている状態、マトリョーシカのような状態で設定されています。

入れ子構造では、外側を囲む要素が親、内側の要素が子という親子関係のような構造になっています。

ネストと親子関係のイメージ

入れ子構造のタグに対しては、子セレクタ・子孫セレクタによるCSSの記述がとても便利です。

子セレクタ

子セレクタは、親要素の中にある子要素に対しスタイルを適用します。
セレクタ部分に「>」を使って「親要素A > 子要素B」のように繋ぎます。

▼CSS

section > p{
color:red;
}

▼HTML

<section>
  <p>sectionの子要素です</p>
  <p>sectionの子要素です
  <p>sectionの孫要素です</p>
</section>

子セレクタの場合、子要素の子要素、つまり孫要素には適用されません。

セレクタ部分にはもちろんクラスや属性（id）で設定することも可能です。

▼CSS

section > .exsample{
color:red;
}

と記述した場合は、

▼HTML

<section>
  <p class="exsample">sectionの子要素です</p>
  <p>sectionの子要素です
  <p>sectionの孫要素です</p>
</section>
<p class="exsample">class="exsample"は適用されません</p>

子孫セレクタ

要素セレクタに半角スペースを区切って、設定すると、親要素内の子要素に対して、スタイルを適用することができます。

子孫セレクタは、親要素の中にある全ての要素Bに対しスタイルを適用します。
セレクタ部分で「親要素A 子要素B」と半角スペースで繋ぎます。

クラスセレクタの場合

▼CSS

.example2 p {
color: red;
}

▼HTML

<div class="example">
<p>このテキストにスタイルが適用されます</p>
<p>このテキストにスタイルが適用されます</p>
</div>

属性（id）セレクタの場合

▼CSS

p #example {
color: red;
}

▼HTML

<div id="example">
<p>このテキストにスタイルが適用されます</p>
<p>このテキストにスタイルが適用されます</p>
</div>