[CSS] 마지막 요소만 스타일 지정

소요 시간: 2분 조회수: 203

마지막 요소만 스타일을 지정하는 방법은 CSS의 :last-child 또는 :last-of-type 선택자를 사용하는 것입니다. 다음은 각각의 선택자를 사용하는 방법에 대한 예시입니다.


:last-child 선택자

이 선택자는 부모 요소의 마지막 자식 요소를 선택합니다.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Item 3만 스타일을 변경하고 싶다면

li:last-child {
  color: red;
}

위의 예시에서 li:last-child는 마지막 <li> 요소인 "Item 3"에만 스타일을 적용합니다.


또 다른 예로 만약 댓글 리스트에서 마지막 댓글만 여백을 없애고 싶다면,

①

#comment-list li:not(:last-child) {
    margin-bottom: 4px;
}

②

#comment-list li:last-child {
    margin-bottom: 0px;
}


:last-of-type 선택자

이 선택자는 특정 타입의 마지막 요소를 선택합니다. 예를 들어, 마지막 <p> 또는 마지막 <div>를 선택할 수 있습니다.

<div>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <span>Span 1</span>
  <p>Paragraph 3</p>
</div>

리스트의 마지막 텍스트인 Paragraph 3를 파란색으로 변경하려면, 다음과 같이 스타일을 설정합니다.

p:last-of-type {
  color: blue;
}

위의 예시에서 p:last-of-type는 마지막 <p> 요소인 "Paragraph 3"에만 스타일을 적용합니다.


사용 예시

예시로 이해해보자.

리스트의 마지막 항목 스타일링

다음 리스트에서 마지막 항목을 굵게 변경하세요.

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

답:

ul li:last-child {
  font-weight: bold;
}

위의 예시에서 "Cherry" 항목이 굵게 표시됩니다.

섹션의 마지막 단락 스타일링

다음 html 코드에서 마지막 단락을 초록색으로 변경하세요.

<section>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
  <p>Third paragraph.</p>
</section>

답:

section p:last-of-type {
  color: green;
}

위의 예시에서 "Third paragraph."가 녹색으로 표시됩니다.


정리

이번 포스팅에서는 CSS 선택자인 :last-child와 :last-of-type을 사용하여 HTML 요소 중 마지막 요소에 스타일을 지정하는 방법을 알아보았습니다.

위에서 배운 선택자를 적절히 활용하면, HTML 요소 중 마지막 요소에 원하는 스타일을 손쉽게 적용할 수 있습니다. 이를 통해 웹 페이지의 디자인을 더욱 정교하게 조정할 수 있습니다.

추가로, 다른 선택자들과 함께 사용하여 보다 복잡한 스타일링 규칙을 만들어 나갈 수도 있습니다. 예를 들어, :nth-child 또는 :nth-of-type와 함께 사용하여 특정 순서의 요소에 스타일을 적용할 수 있습니다.

여러분의 웹 개발 프로젝트에서 이 선택자들을 활용해 보세요. 더 나은 스타일링과 사용자 경험을 제공하는 데 큰 도움이 될 것입니다.

인기글

CSS 리스트