# 結合子

前セクションにて基本的なセレクタに関して説明しましたが、**結合子**という応用的な方法を説明します。

例えば以下のようなHTMLの構造があったとします。

```html
    <section>
      <p>sectionの直接的な子要素です</p>
      <div>
        <p>sectionの子要素です、divの直接的な子要素です</p>
      </div>
      <p>sectionの直接的な子要素です</p>
    </section>
```

この時divタグの子要素のpタグのみにcssを当てたい場合に、`親要素 子要素`と指定することで、実現することができます。これを**子孫結合子**と言います。

```css
div p {
    color: red;
}
```

<figure><img src="https://1869761657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcUBbYqol4PMzZJggiMqV%2Fuploads%2FHlSSFaNuIwtMHrmVilFG%2F12131113.png?alt=media&#x26;token=a04cbcf8-fb24-4756-a43a-cf0c5c54831e" alt=""><figcaption></figcaption></figure>

次に、sectionの直接的な子要素のpタグにのみcssを当てたい場合は、`親要素 > 子要素`と指定することで、実現することができます。これを**子結合子**と言います。

```css
section　> p {
  font-size: 30px;
}
```

<figure><img src="https://1869761657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcUBbYqol4PMzZJggiMqV%2Fuploads%2FbICVuq8VTLGucyk92sp8%2F12131117.png?alt=media&#x26;token=b52e5d11-8d50-4b06-8b7f-947406dda0e7" alt=""><figcaption></figcaption></figure>

次に、並列に並んでいるタグ（兄弟というのですが）に関して、例えば、divタグと並列に並んでいて、次にあるpタグのみに適応したい場合は、`兄弟要素 + 兄弟要素`と指定することで、実現することができます。これを**隣接兄弟結合子**と言います。

```css
div + p {
    color: blue;
}
```

<figure><img src="https://1869761657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcUBbYqol4PMzZJggiMqV%2Fuploads%2FQ36XVv9WA4Fn2LdJD6BC%2Fgazou12131122.png?alt=media&#x26;token=f2ea69d4-4d56-4c3a-b11e-623a32698352" alt=""><figcaption></figcaption></figure>

他にも結合子はありますが、実務でよく使う結合しのみ紹介しました。