인덱스 1번부터 시작.
근데 child는 종류 상관없이 다 인덱스에 들어감.
<p>Lorem, ipsum dolor.1</p>
<p>Lorem, ipsum dolor.2</p>
<p>Lorem, ipsum dolor.3</p>
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem, ipsum dolor.5</p>
<p>Lorem, ipsum dolor.6</p>
이거면
h3:nth-child(4){background-color: blue;}
이렇게 해야 가능.
p:nth-child(4){background-color: blue;}
이거 해도 lorem 5 안가리킴
같은 타입끼리만 하려면
p:nth-of-type(4){background-color: aqua;}
이렇게 하면 p 태그만 인덱스에 들어감.
이것도 첫번째, 마지막 번째, 마지막에서 몇번째 있음.
p:first-child{}
p:last-child{}
얘네는 못잡을 때가 있음. 중간에 다른 타입이 껴있으면 안됨
퍼스트나 last가 p라면 잡을수도?
p:first-of-type{}
p:last-of-type{}
이게 더 쓰기 편하긴 할 듯..
p:nth-last-child{}
뒤에서
div>span:only-child{}
div 자식 중 span 하나만 가지고 있는 요소 선택
<div>
<p>
<span></span>
</p>
</div>
여기서 span를 선택하겠다는 거임.
'프론트엔드-코드 > JQuery' 카테고리의 다른 글
가시성 필터 (0) | 2023.07.17 |
---|---|
toggleClass (0) | 2023.07.14 |
콘텐츠 필터 선택자 (0) | 2023.07.14 |
필터 선택자 (0) | 2023.07.14 |
속성 선택자 (0) | 2023.07.12 |