첫 번째 자식 요소 선택하기

Coddy HTML 여정의 CSS Mastery 섹션에 포함된 레슨 — 43개 중 13번째.

:first-child 의사 클래스는 형제 요소 그룹 중 첫 번째 요소를 대상으로 합니다.

예를 들어:

<section>
  <p>This paragraph will be blue and bold.</p>
  <p>This paragraph will have default styling.</p>
</section>

부모 요소 내에서 첫 번째 자식 요소인 모든 단락은 파란색으로 표시되고 굵은 텍스트를 갖게 됩니다.

p:first-child {
  color: blue;
  font-weight: bold;
}

하위(descendant), 자식(child) 및 기타 선택자를 결합하고 적용하여 요소를 더 구체적으로 타겟팅할 수 있습니다. 여기 또 다른 예시가 있습니다:

div:first-child h1 {
 color: red;
}

이것은 형제 요소들 중 첫 번째 div 요소를 선택하고, 그 안에 있는 <h1> 태그의 텍스트 색상을 빨간색으로 변경합니다.

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

챌린지

쉬움

모든 순서 없는 리스트(<ul>) 내의 첫 번째 리스트 항목(<li>)을 대상으로 하고 다음 스타일을 적용하는 CSS 규칙을 만드세요:

blue 텍스트 색상
lightyellow 배경색
10px의 왼쪽 패딩

치트 시트

:first-child 의사 클래스는 형제 요소 그룹 중 첫 번째 요소를 대상으로 합니다.

p:first-child {
  color: blue;
  font-weight: bold;
}

더 구체적인 타겟팅을 위해 :first-child를 다른 선택자와 결합할 수 있습니다:

div:first-child h1 {
  color: red;
}

이것은 형제 요소 중 첫 번째 div 요소를 선택한 다음, 그 안에 있는 h1 태그를 대상으로 합니다.

직접 해보기

<!DOCTYPE html>
<html>
<head>
    <title>Targeting the First Child</title>
  <style>
    /* Write your CSS rule here */
    
  </style>
</head>
<body>
  <h2>Grocery List</h2>
  <ul>
    <li>Fresh Apples</li>
    <li>Organic Bananas</li>
    <li>Whole Wheat Bread</li>
  </ul>
  
  <h2>To-Do List for the Day</h2>
  <ul>
    <li>Complete coding challenge</li>
    <li>Go for a walk in the park</li>
  </ul>
</body>
</html>

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.