HTML & CSS (nth-child의 이해)

2탄은 아니지만 계속 연결되는 html css

nth-child 의 이해

사실... 아직도 이해가 잘 되는 것은 아닙니다. 하지만 제가 엄청난 블로그를 하나 보고 글을 써봅니다.

 

:nth-child 는 현제 요소 중에서 n번째 형제를 선택합니다.

 

.parents라는 부모 div 안에 p 3개, div 2개가 서로 형제이며 nth-child는 이들 중에서 n번째를 선택합니다.

뭔가 말이 이상하지만 첫번째 부모 2번째 부모이고 형제가 다른 것이다....

 

.parents div:nth-child(2) 가 가르키는 것은 각각 .parents div 안의 두번째 줄 , 

입니다.

.parents div:nth-child(4) 가 가리키는 것은

이것이 되는 것입니다.

 

사실, 저도 이것을 믿을 수 없어 직접 확인해 봤지만.... 엄청난 블로그의 말 그대로 입니다...

몇번째 아이인지 사용한 태그가 무엇인지 정확히 줘야만 css가 구현이 됩니다.

 

위아래 따로 몇번째 부모인지도 지정을 해줘야 정확한 곳에 css가 구현이 됩니다.

.parents:first-child p:nth-child(3) 이 무엇을 의미하는지 생각해 보세요 ㅎㅎ

 

---

https://velog.io/@1703979/TIL-07

TIL 07 | nth-child가 안 먹히는 이유, span과 i태그