자식 필터 선택자

인덱스 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를 선택하겠다는 거임.