CSS 선택자
가상 클래스
순서와 관련된 가상 클래스
순서와 관련된 가상 클래스
':first-child', ':last-child', ':only-child' ':first-of-type', ':last-of-type', '
:: 지금 소개하는 가상 클래스들은 목록을 표현하는 태그와 잘 어울린다.
':first-child' (MDN)
:: 함께 사용한 선택자가 첫번째 자식일 때 함께 사용한 선택자를 선택한다.
:: 형제의 수는 상관없으므로 형제가 하나만 있을 때도 선택된다.
:: 초기 정의에서는 부모가 있는 요소만 선택되었지만 현재는 그런 제한이 없다.
-- 코드펜 사이트에서는 body 태그의 자식은 선택되지 않는 것 같다.
ex) ul > li:first-child { style properties }
/* 이러면 li요소가 ul요소의 첫번째 자식일 때 스타일이 적용된다. */
':first-of-type' (MDN)
:: 함께 사용한 선택자와 일치하는 유형 중에서 제일 첫번째 요소를 선택한다.
:: 형제의 수는 상관없으므로 형제가 하나만 있을 때도 선택된다.
:: ':first-child'의 경우를 포함하고, 우선순위가 같으므로 둘을 같이 쓴다면 ':first-of-child'를 더 위에 써줘야한다.
See the Pen QWdpBqX by lypi (@Lypi) on CodePen.
':last-child' (MDN)
:: 함께 사용한 선택자가 마지막 자식일 때 함께 사용한 선택자를 선택한다.
:: 초기 정의에서는 부모가 있는 요소만 선택되었지만 현재는 그런 제한이 없다.
-- 코드펜 사이트에서는 body 태그의 자식은 선택되지 않는 것 같다.
ex) ul > li:last-child { style properties }
/* 이러면 li요소가 ul요소의 마지막 자식일 때 스타일이 적용된다. */
':last-of-type' (MDN)
:: 함께 사용한 선택자와 일치하는 유형 중에서 제일 마지막 요소를 선택한다.
:: 형제의 수는 상관없으므로 형제가 하나만 있을 때도 선택된다.
:: ':last-child'의 경우를 포함하고, 우선순위가 같으므로 둘을 같이 쓴다면 ':last-of-child'를 더 위에 써줘야한다.
See the Pen YzNZjdj by lypi (@Lypi) on CodePen.
':only-child' (MDN)
:: 함께 사용한 선택자가 유일한 자식일 때 함께 사용한 선택자를 선택한다.
:: ':first-child:last-child'나 ':nth-child(1):nth-last-child(1)'와 같은 의미지만 ':only-child'만 쓰는게 우선순위가 더 낮다.
-- 가상 클래스만 있다면 수가 많은 쪽이 우선순위(명시도)가 더 높기 때문이다.
See the Pen :only-child by lypi (@Lypi) on CodePen.
썸네일용