[CSS] :nth-child 활용하여 개별 css 적용 (feat.테이블 색상 꾸미기)

개요

• 엑셀로 관리하고 있던 문서를 이제 웹에서도 관리하고 싶다는 A 부서
• 임의의 화면설계서를 넘겨받았는데, 테이블 색상이 알록달록하였다.
• 전문적으로 CSS를 해본적이 없기에, '범위 설정해서 스타일 적용할 수 없을까?' 는 생각을 가지고 검색
• nth-child 속성으로 화려하게 범위 지정이 가능하다는 것을 알게 되어 공부한 내용 기록

오늘도 개미는 열심히 일을 하네 (뚠뚠)

테이블 예시

:nth-child 속성 활용

:nth-child(n)

• 원하는 n 번째에 dom component 대해서만 스타일 적용 가능
• 문제) 이미지 ① 의 경우 3번째 td 제외한 나머지는 가운데 정렬 처리를 해야 했음

// not 속성을 활용하여 3번째 td 를 제외하고 전부 가운데 정렬 처리 👍
table thead tr td, table thead tr th,
table tbody tr td:not(:nth-child(3)), table thead tr th:not(:nth-child(3)),
table tfoot tr td, table tfoot tr th{
    text-align: center;
}

• 이미지 ③ 의 경우 tfoot의 tr별로 다른 색상 적용해야 했음

// tfoot 첫번째 tr👍
table tfoot tr:nth-child(1) {
      background-color : #fffade;
}
// tfoot 두번째 tr 👍        
table tfoot tr:nth-child(2) {
    background-color: #f0f0f0;
}     

:nth-child(범위지정)

• A부터 B까지 원하는 범위 지정하고 처리하는 것 또한 가능
• 문제) 이미지 ② 의 경우 thead의 th 1/3/5/6/7번과 tbody의 td 4/6/8 , 그리고 td 10/12 번에 색상 적용해야 했음

/*
  :nth-child(n + 숫자)   1(처음)부터 -> 지정 숫자까지  
  :nth-child(-n + 숫자)  지정 숫자 부터 -> 1(처음)까지 
  :nth-child(odd) 홀수번째 지정 
  :nth-child(even) 짝수번째 지정

  💡이 표현방식을 응용해서 A~B 사이에 홀/짝번째에 대한 CSS 지정 가능함

  [아래 Selector 해석]
  table > thead > tr:last-child th:nth-child(-n+5):nth-child(odd) 👉 thead의 5번째 th부터 1번까지 홀수만
  table > thead > tr:last-child th:nth-child(n+6):nth-child(even) 👉 thead의 6번째 th부터 짝수만 
  table > tbody > tr td:nth-child(n+4):nth-child(even):nth-child(-n+8) 👉 tbody의 td 4번째~8번째 사이에 짝수만
  table > tbody > tr td:nth-child(n+10):nth-child(even):nth-child(-n+12) 👉 tbody의 td 10번째~12번째 사이에 짝수만

*/
table > thead > tr:last-child th:nth-child(-n+5):nth-child(odd),
table > thead > tr:last-child th:nth-child(n+6):nth-child(even),
table > tbody > tr td:nth-child(n+4):nth-child(even):nth-child(-n+8),
table > tbody > tr td:nth-child(n+10):nth-child(even):nth-child(-n+12){
    background-color : #f0f0f0
}

실제 코드

selector만 잘 지정하면 쉽게 풀리는 문제였구나 ! 이렇게 또 하나 지식을 얻는다.👨‍💻

참고 기술 블로그

https://velog.io/@seob/CSS-%EC%95%8C%EC%95%84%EB%91%90%EB%A9%B4-%EC%9C%A0%EC%9A%A9%ED%95%9C-nth-child-%EC%A0%95%EB%B3%B5%ED%95%98%EA%B8%B0-feat.-nth-of-type