CSS 선택자 :first-child와 :first 차이점

CSS 선택자 `:first-child`와 `:first`의 차이에 대해 설명해 드겠습니다.

1. `:first-child` 선택자:
   - `:first-child` 선택자는 요소의 첫 번째 자식 요소를 선택합니다.
   - 이 선택자는 부모 요소의 첫 번째 자식으로 나타나는 모든 요소에 적용됩니다.
   - 예를 들어, 다음과 같이 사용할 수 있습니다:

   
     p:first-child {
       color: red;
     }

     이 코드는 첫 번째 자식으로 나타나는 모든 `<p>` 요소의 텍스트 색상을 빨간색으로 지정합니다.

 

반응형

2. `:first` 선택자:
   - `:first` 선택자는 해당 요소 집합 중 첫 번째 요소를 선택합니다.
   - 이 선택자는 특정 요소 집합에서만 사용되며, 해당 요소 집합 내에서 첫 번째 요소를 선택합니다.
   - 예를 들어, 다음과 같이 사용할 수 있습니다:
    

     p:first {
       font-weight: bold;
     }

     이 코드는 첫 번째 `<p>` 요소의 글꼴 두껍게 지정합니다.

주요 차이점:
- `:first-child`는 모든 부모 요소의 첫 번째 자식을 선택하고, 해당 자식이 특정 태그일 필요가 없습니다. 따라서 `:first-child`로 선택된 요소는 여러 태그 유형을 가질 수 있습니다.
- `:first`는 특정 요소 집합 내에서 첫 번째 요소만 선택하므로 선택된 요소는 동일한 태그 유형을 가져야 합니다.

두 선택자 모두 사용하려면 문맥에 따라 적절하게 선택하면 됩니다. `:first-child`는 부모 요소의 첫 번째 자식을 선택할 때 유용하고, `:first`는 특정 요소 집합에서 첫 번째 요소를 선택할 때 유용합니다.