가상클래스 선택자 (Prseudo-Class Selector)

selector:___ {
  property: value;
}

가상클래스선택자는 다른 선택자들 보다 더 디테일하고 작은 범위를 선택할 때 사용할 수 있습니다. selector에 의해 선택된 요소들 중에서 ___조건에 해당하는 요소들로 범위를 좁혀줍니다.

1. nth-child

  <h2>Movie List</h2>
    <ul>
      <li class="movie">Toy Story</li>
      <li class="movie">Zootopia</li>
      <li class="movie">Inside Out</li>
      <li class="movie">Coco</li>
      <li class="movie">Finding Nemo</li>
    </ul>

  <ol>
    <li>Americano</li>
    <li>Latte</li>
    <li>Hot Choco</li>
  </ol>

1-1. :first-child

selector에 의해 선택된 요소들의 형제 요소 중에서 맨 앞에 위치하는 자식(child) 요소를 선택합니다.

li:first-child {  
  color: green;
}

.movie:first-child { 
  font-size: 42px;
}

Movie List

• Toy Story
• Zootopia
• Inside Out
• Coco
• Finding Nemo

1. Americano
2. Latte
3. Hot Choco

---

주의해야할 스타일 적용

아래 코드의 경우 어떤 요소에도 스타일링이 적용되지 않습니다. 많은 분들이 실수를 하는 부분으로, first-child의 경우 고른 것들 중에 첫번째라는 뜻이 아니라 셀렉터에 의해 선택된 부모 요소안에 있는 형제 요소들 중에 첫 번째 자식을 나타냅니다.

즉, li 태그의 부모요소인 ul태그의 첫번째 자식을 먼저 찾습니다. 첫번째 자식인 toystory가 movie라는 클래스를 가지고 있지 않기 때문에 스타일링이 적용될 수 없습니다.

  <h2>List1</h2>
  <ul>
    <li>Toy Story</li>
    <li class="movie">Zootopia</li>
    <li class="movie">Inside Out</li>
    <li class="movie">Finding Nemo</li>
  </ul>

.movie:first-child {
  font-size: 32px;
}

1-2 :last-child

selector에 의해 선택된 요소들의 형제 요소 중에서 맨 마지막에 위치하는 자식(child) 요소를 선택합니다.

li:last-child {   //li요소이면서 (&) 마지막 자식 요소
  color: tomato;
}

.movie:last-child { //
  font-size: 42px;
}

3. :nth-child()

selector에 의해 선택된 요소들의 형제 요소 중에서 앞에서부터 (n)번째에 위치하는 자식(child) 요소를 모두 선택합니다. ()안에는 꼭 자연수가 아니라 2n, 2n+1,n+1 등 특정 매게변수를 이용해 함수를 이용할 수도 있습니다. 또한 odd나 even도 사용할 수 있습니다.

li:nth-child(even) {  //even:짝수만 선택(↔odd)
  color: hotpink;
}

Movie List

• Toy Story
• Zootopia
• Inside Out
• Coco
• Finding Nemo

1. Americano
2. Latte
3. Hot Choco

2. first-of-type, last-of-type, nth-of-type

first-child와 first-of-type은 매우 유사하지만 동작하는데 있어 중요한 차이점이 있습니다.

2-1. first-of-type

first-child는 말그대로 형제들 중에 첫번째이었다면, first-of-type은 타입들 중에 첫번째를 찾습니다. first-child와 비교를 하며 설명을 해보도록 하겠습니다.

<h2>Movie List</h2>
<section>
  <div class="movie">Toy Story</div>
  <p class="movie">Zootopia</p>
  <p class="movie">Inside Out</p>
  <div class="movie">Coco</div>
  <p class="movie">Finding Nemo</p>
</section>

p:first-child {
  color: red;
}

현재 위 코드의 경우 스타일링에 아무런 변화가 없습니다. p의 형제 요소들 중의 첫 번째 요소가 p가 아닌 div이기 때문입니다. 그렇지만 first-child대신 first-of-type을 이용하게 되면 p타입들 중의 첫번째 형제인 Zootopia에 스타일링이 적용되게 됩니다.

즉, first-of-type을 이용하면 특정 타입만 쭉 모아서 세고 그중에서 첫번째를 고를 수 있게 되는 것입니다.

p:first-of-type {
  color: red;
}

---

주의해야할 스타일 적용

아래 예시의 경우 Toy Story만 스타일링이 적용되지 않을까라고 생각하기 쉽지만 실제로는 Toy Story와 Zootopia 스타일링이 적용되게 됩니다. first-of-type은 타입들 중에 첫번째 입니다. class가 movie인 요소들을 고르고 보니 div인 부분도 있고 p인 부분도 있는 것입니다. 이런 경우 div들 중에 첫번째와 p들 중에 첫번째인 부분이 선택되게 됩니다.

  <h2>Movie List</h2>
    <section>
      <div class="movie">Toy Story</div>
      <p class="movie">Zootopia</p>
      <p class="movie">Inside Out</p>
      <div class="movie">Coco</div>
      <p class="movie">Finding Nemo</p>
    </section>

.movie:first-of-type {
  color: red;
}

Movie List

Zootopia

Inside Out

Finding Nemo