nth-of-type

해결됨
gga01075 프로필

svg랑은 관계없이 nth-of-type에 대한 질문인데용.. 

각각의 눈을 선택자로 선택하실때

.face_eye:nth-of-type(2)와

.face_eye:nth-of-type(3)으로 선택하셨는데

제가 알고있던 것으로 생각했다면 

부모를 기준으로 .face_eye라는 클래스를 가진 자식요소에서 첫번째요소,두번쨰요소를 선택하려고

.face_eye:nth-of-type(1)과

.face_eye:nth-of-type(2)를 썼을것입니다.

왜 2와 3인지 잘모르겠어용ㅠㅠ

1분코딩 프로필
1분코딩 7달 전

nth-of-type은 클래스를 기준으로 하는게 아니라 html 요소의 타입으로 순서를 매깁니다.
요소의 타입인 <circle>로 따지면 .face__eye들은 2번째 circle과 3번째 circle이기 때문에
nth-of-type(2), nth-of-type(3)으로 해준거에요~

만약 .face__hair를 선택한다고 한다면, <ellipse>가 .face__hair에서 처음 나왔기때문에
말씀대로 nth-of-type(1), nth-of-type(2)로 선택할 수 있고요.

gga01075 프로필
gga01075 7달 전

아 감사합니당! 이해됐어요~

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스