cssの小さな知識

1.非選択者
not選択者は、*(一般的な選択者、すべてを選択する)とは逆の性格と言える.例外のセレクタを定義します.例を見てみましょう.

<section>
      <div class="client">
        <div class="client__category">
          <span>Event</span>
        </div>
        <span class="client__name">
          잠비나이
        </span>
        <div class="client__btns">
            <span class="client__description">
              Music Band
            </span>
            <span class="client__btn">2015 &rarr; Present</span>
        </div>
      </div>
      <div class="client">
        <div class="client__category">
          <span>Event</span>
        </div>
        <span class="client__name">
          잠비나이
        </span>
        <div class="client__btns">
            <span class="client__description">
              Music Band
            </span>
            <span class="client__btn">2015 &rarr; Present</span>
        </div>
      </div>

.client {
  color:#FF0400;
  border:2px solid #FF0400;
  display: grid;
  grid-template-columns: 50px 5fr 1.5fr;
}

.client:first-child {
  border-top-width:2px;
}

.client:not(:last-child){
  border-bottom:0px;
}

cssではborderがclientクラスに適用されます.しかしborder-topとborder-bottomは重なっているのでborder-bottomを外して維持したい.
この場合nth-child()を用いて一つ一つ応用できるが,開発者は重複を非常に嫌う.そこで、すべてのclientクラスに適用されるborder-bottomを一度に解消したいと思います.
ただし、最後のclient cellのborder-bottomは保持する必要があります.その時は選択者を使わない.
意味はnot()括弧のほか、すべて適用されます..client:not(:last-child) {code}といえば、「clientクラスのlast-childを削除し、すべてのclientクラスにコードを適用する」ことを意味します.
2-1. 直系の子孫
直系の子孫だけを選ぶ方法を理解してみましょう.

  <header>
        <h1>HOME</h1>
        <span>
          <h1>THINK</h1>
          <h1>INSIDE</h1>
          <h1>BOX</h1>
          <h1>WAIT.. WHAT?</h1>
        </span>
        <p>Furnishing your room<br>will make you happy</p>
        
        <p>We can help you achive the happiness💖😍😍💖</p>
      </header>

header {
    border-bottom: 2px solid;
    > h1:first-of-type {
        font-size: 12px;
        font-weight: 100;
        margin-bottom: 27px;
        padding: 8px;
        }

頭の直系子孫ではh 1のみが選択され、font-sizeは12 pxである.使いたい.このとき

header {
  h1 {
    font-size:12px;
  }
}

これにより,頭の直系子孫h 1およびspan中のh 1に12 pxが適用される.したがって、この場合は>選択者を使用します.> h1:first-of-typeと言えば、「頭の直系子孫h 1を選択し、直系子孫h 1の中で最初の(より明確にするために)」を選択します.意味は.
2-2 nth-of-type() vs nth-child()
似たように見える2つのセレクタ.いったいどんな違いがあるのだろうか.

<section>
   <h1>Words</h1>
   <p>Little</p>
   <p>Piggy</p>    <!-- Want this one -->
</section>

p:nth-child(2) { color: red; } /* Now incorrect "Little"이 선택됨 */
p:nth-of-type(2) { color: red; } /* Still works "Piggy"가 선택됨*/

だからsectionで2番目のchild(1番目のp)「Piggy」を選びたいときはどうすればいいのでしょうか?結論から言えばp:nth-of-type(2)です.
p型の中で2つ目を選ぶと、もっと理解しやすくなります.
linkにおいて、p:nth-of-type(2)は、pタグの2番目のpタグを選択する.p:nth-child(2)はpタグで、親の子孫の中から2番目を選択します.(すなわち、sectionのサブタブで2番目の完全なサブタブを選択する)
v
したがって、p:nth-child(2)で「Little」が選択されます.