# _section.scss死んでる問題

この表記は間違い

@media screen and (max-width:764px) and (min-width:481px){

    > *:nth-of-type(odd) {
      h3 {
        font-size: 30px;
        padding-bottom: 15px;
      }

      p {
        font-size: 20px;
      }
  }
}

`>`ってのは`ある要素の子要素を表す`ものなので、その対象がいないと動作しない。

## 子要素と子孫要素について

例えば以下のようなHTMLがあるとする

<section class="root">
    <h1>子要素</h1>
    <div>
        <h1>子孫要素</h1>
    </div>
</section>

この時、例えばCSSで下記のような指定をしたとする

section > h1{
    font-size: 24px;
}

section h1{
    color: red;
}

この時、子要素と書かれたh1は文字が24pxの大きさになり、色が赤色になるが、子孫要素と書かれたh1は色が赤色になるだけである。

<section>
    <h1>子要素、子孫要素が適用される</h1>
    <div>
        <h1>子孫要素のみ適用される</h1>
        <aside>
            <h1>子孫要素が適用される</h1>
        </aside>
    </div>
</section>
<h1>どちらも適用されない</h1>

要するに、ある要素に対して子供の位置にあるもののみに対して指定するCSSは`section > h1`のように表記され、ある要素の中に入っているもの全てに対して指定するCSSは`section h1`のように表記される。

つまりは、`>`を指定する以上は`どこに対しての子供か`を明記する必要があるということ。

section > h1{
    //わかる
}

.title > h1{
    //わかる
}

section.hoge > h1 {
    //わかる
}

* > h1{
    //わかる
}

* > section > h1{
    //わかる
}

> h1{
    //わからん
}