필터 선택자

 

필터선택자 : :

• 필터 선택자는 중간에 :를 삽입한다. 
• 그리고 몇번째 순서의 선택을 할 것인지 입력을 하면된다. 
• 다른 부분들은 선택자 2를 선택했지만, 필터선택자의 경우 
  선택자 1중에서 선택자 2를 선택하라라는 의미로 선택자 1을 선택하는 것이라고 볼 수 있다. 
  • tbody tr:nth-child(2n) 
    • tbody중에서 자손선택자중 tr로 되었고 2의 곱셈행들을 가르킨다. 
  • tbody td:last-child
    • tbody중에서 자손선택자중 td로 되어있고, 마지막행들을 가르킨다. 
  • li:first-chile
    
    • li중에서 첫번째 것이 찾아진다. 
    • first-chile는 장남을 찾는 것이다. 
    • li엘리먼트 중에서 부모 엘리먼트의 첫번째 자식 엘리먼트를 선택하는 것이다. 
  • .box:first-child
    • div중에서 1번을 찾는 것이 아닌, 부모를 기준으로 1번째 자식을 찾는다. 
      첫째는 h3이기 때문에 아무것도 선택되지 않는다. 
    • class box의 첫번째라는 의미지만, 첫번째는 h3이다. 
    • class="box"엘리먼트 중에서 부모엘리먼트의 첫번째 자식 엘리먼트인 것을 선택한다.
  • p:first-of-type
    • 타입중에서 첫번째를 찾는 것이다.
    • 위의 .box:first-child와 비교했을 경우 class="box"엘리먼트 중에서 첫번째 엘리먼트를 선택하는 것이다. 
    • 꼭 장남을 찾는 것이 아니다. 
    • P의 엘리먼트중에서 (부모 엘리먼트의 첫번째 자식이 아니어도 )첫번쨰 엘리먼트가 선택된다. 
  • li:last-chile
    • 맨 마지막의 막내가 선택된다. li의 엘리먼트 중에서 부모엘리먼트의 마지막 자식 엘리먼트가 선택된다. 
  • li:nts-child(2)
    •  중간 위치의 자식엘리먼트가 선택된다. 
    • li엘리먼트 중에서 부모 엘리먼트의 2번째 자식 엘리먼트를 선택한다. 
  • li:nts-child(2n+1) 
    • 홀수의 자식이 찾아진다. 
    • 2n은 짝수n에 정수 0~부터 대입되어 찾아진다. 
    • li의 엘리먼트중에서 부모엘리먼트의 홀수번째 자식 엘리먼트인것을 선택한다. 
    • n은 0부터 시작하는 정수를 입력하여, 저 공식에 해당하는 행들을 찾는 것이다.