마지막 자식 요소 선택하기

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

:last-child 의사 클래스는 부모 요소의 마지막 자식인 요소를 선택합니다.

예를 들어:

<div class="parent">
  <p>First paragraph</p>
  <p>Middle paragraph</p>
  <p>Last paragraph</p>
</div>

마지막 단락만 스타일을 지정하려면 :last-child 의사 클래스를 사용하세요:

p:last-child {
  color: red;
  font-weight: bold;
}

이 CSS를 적용한 후, "Last paragraph"는 부모 div의 마지막 자식 요소이기 때문에 오직 이 요소만 빨간색이고 굵게 표시됩니다.

실력 점검

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

실력 점검

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

챌린지

쉬움

문단 그룹 내의 마지막 <p> 요소를 스타일링하는 CSS 규칙을 만드세요.

이 요소를 파란색 배경색(#046ae0)과 white 텍스트로 스타일링하세요.
마지막 문단의 font weight를 bold로 설정하세요.

치트 시트

:last-child 의사 클래스는 부모 요소의 마지막 자식인 요소를 선택합니다:

p:last-child {
  color: red;
  font-weight: bold;
}

이것은 부모 컨테이너 내의 마지막 단락 요소에만 스타일을 적용합니다.

직접 해보기

<!DOCTYPE html>
<html>
<head>
    <title>Targeting the Last Child</title>
  <style>
    /* Write your CSS rule here */

  </style>
</head>
<body>
    <div> 
        <h2>Exploring the Universe</h2>
        <p>The universe is vast, with countless stars and galaxies waiting to be discovered.</p>
        <p>New technologies allow us to explore deeper into space, revealing its many secrets.</p>
        <p>We continue to learn more about distant planets and the possibility of life beyond Earth.</p> 
    </div>
    <div>
        <h2>The Deep Ocean</h2>
        <p>Our oceans are mysterious, covering most of Earth, yet we know so little about them.</p>
        <p>Many species live in extreme conditions, some of which are still being discovered today.</p>
        <p>Exploring the ocean depths gives us insights into life at the planet's most remote locations.</p> 
    </div>
</body>
</html>

실력 점검

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