CSS :first-child와 :last-child 사용법

💬 최근 <ul>과 <li> 태그를 사용해 토글 버튼을 만들었는데, 버튼의 테두리를 둥글게 만들어야 하는 상황이 있었다. 처음에는 <li> 태그에 각각 left와 right하는 클래스를 추가하고 border-radius 속성을 적용했다.

하지만 이후 상태가 3개 이상으로 확장될 가능성을 고려하면, 클래스 이름을 지정하기보다 :first-child와 :last-child 의사 클래스를 사용하는 것이 더 나을 것 같다는 리뷰를 받았다. 의사 클래스를 활용해 본건 처음이라 정리해 보기로 했다.🏃‍♀️

---

의사 클래스(Pseudo-Class)란 무엇일까? 🤔

의사 클래스는 CSS에서 HTML 요소의 특정 상태를 선택해 스타일을 적용할 수 있는 기능이다. 내가 지금까지 써본 의사 클래스는 :hover, :active, :focus, :disabled 정도였다.

이런 의사 클래스를 사용하는 이유는 요소의 특정 상태를 구체적으로 선택해 스타일을 줄 수 있기 때문이다. 예를 들어, 버튼에 마우스를 올렸을 때(:hover)와 눌렀을 때(:active)를 다르게 스타일링할 수 있다.

의사 클래스의 종류는 매우 다양하며, 더 많은 내용은 링크를 참고하면 좋다.

코딩교육 티씨피스쿨

---

:first-child와 :last-child란?

1. :first-child

부모 요소 내에서 첫 번째 자식 요소를 선택하는 선택자다.

ul li:last-child {
  border-radius: 0 10px 10px 0;
}

 

2. :last-child

부모 요소 내에서 마지막 자식 요소를 선택하는 선택자다.

ul li:last-child {
  border-radius: 0 10px 10px 0;
}

---

의사 클래스를 활용한 코드 수정 ✨

처음에는 클래스 이름 left와 right를 직접 <li> 태그에 추가했지만, 이를 제거하고 의사 클래스를 활용해 코드를 더 깔끔하게 바꿨다.

 

수정 전

<ul>
  <li class="left">Option 1</li>
  <li>Option 2</li>
  <li class="right">Option 3</li>
</ul>

 

수정 후

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

ul li:first-child {
  border-radius: 10px 0 0 10px;
}

ul li:last-child {
  border-radius: 0 10px 10px 0;
}

 

이제 상태가 3개 이상으로 늘어나더라도 별도로 클래스를 추가할 필요 없이, 부모 요소 내 자식 요소의 위치만으로 스타일을 관리할 수 있다. 🎉

---

컴포넌트화로 확장성 고려

코드 리뷰에서는 토글 상태가 추가될 가능성도 언급되었다. 이를 반영해 토글 버튼을 컴포넌트화해 재사용성을 높였다. 컴포넌트 코드도 넣으려다가 글이 너무 길어질 것 같아 패스한다. 🤐

---

정리하자면!

:first-child와 :last-child를 사용하면 별도의 클래스 없이 HTML 구조만으로도 효율적으로 스타일을 관리할 수 있다. 특히, 상태가 늘어날 가능성이 있는 상황에서 더 깔끔하고 확장 가능한 코드를 작성할 수 있다.

앞으로 더 많은 의사 클래스를 활용해 효율적인 CSS 작성에 도전해볼거다! 🚀