본문 바로가기

HTML & CSS

자식태그 호출 사용법 nth-child(n), nth-of-type(n)

*첫번째 자식, 마지막 자식 호출
-대상요소:last-child
-대상요소:first-child

 

*부모의 몇번째 자식 호출

-대상요소:nth-child(n)

 

*부모의 특정한 요소 중 몇번째 자식 호출

-대상요소:nth-of-type(3)

<dl>
  <dt></dt><!-- dt:nth-child(1) -->
  <dd></dd><!-- dd:nth-child(2) >>dd기준말고 dl의 자식기준으로 2번째 -->
  <dd></dd><!-- dd:nth-child(3) -->
  <dd></dd><!-- dd:nth-of-type(3) -->
  <dt></dt><!-- dt:nth-of-type(2) -->
</dl>
 
 

*홀수, 짝수의 배수 호출

nth-child(3n) >3의 배수 (3,6,9..) 
nth-child(3n-1)? >3x0-1=0 3x1-1=2 이런식으로 짝수의 배수

 

 
*참고
ex: /* 몇번째자식호출할때 ,근데 사실 확장성때문에 child보다 클래스 쓰는게 대부분이라곤 함(순서바뀌거나 수정할때 힘드니까)*/
/* .free-bbs th.last{border-right:none;} */
.free-bbs th:last-child{border-right:none;}

'HTML & CSS' 카테고리의 다른 글

메뉴에 hover시 글자 아래에 밑줄 생기기(transition)  (0) 2022.05.16
1depth와 2depth 메뉴 만들기  (0) 2022.05.16
table 표 작성법  (0) 2022.05.09
배경 이미지 사용법  (0) 2022.05.06
태그 호출 사용법  (0) 2022.05.06