CSS에서 HTML태그를 선택하는 방법으로 태그와 태그 사이의 관계를 이용하여 선택하는 방법은 아주 다양하다.
클래스, ID를 남발하지 말고 깔끔하게 선택하는 방법을 연구해보자.
:
부모태그 자식태그 {}
부모태그 자식태그.클래스이름 {}
부모태그 > Direct자식태그 {}
부모태그 * {}
부모태그 자식
부모태그 :only-child {}
자식태그:only-child {}
띄어쓰기
로 자식태그를 선택하는 경우 가장 먼저 발견한 자식 태그를 선택한다.>
로 자식태그를 선택하는 경우 바로 아래 자식 이어야 한다.*
로 부모 속 다양한 태그를 모두 선택할 수도 있다.only-child
는 띄어쓰기 유무가 중요: 두가지 이상의 element 및 class, ID를 선택할 수 있는 selector
첫번째, 두번째 {}
시작태그 ~ 마지막태그 {}
,
쉼표를 이용하여 여러개의 태그를 동시에 선택할 수 있다.~
를 이용하면 시작점과 끝점에 있는 모든 태그를 선택할 수 있다.: 동일한 태그속의 동일한 클래스명만 고를 수 있다.
태그이름.클래스명 {}
: 선택하고자 하는 이전 태그와 +
관계로 묶어 찾을 수 있다.
이전태그 + 선택할 태그 {}
: 동일하게 반복되는 태그 중 첫번째 위치에 있는 태그를 선택하는 방법이다.
선택할태그:first-child {}
선택할태그:last-child {}
선택할태그의부모태그 :first-child {}
선택할태그의부모태그 :last-child {}
선택할 태그
인지 그 부모 태그
인지가 결정된다.: 동일하게 반복되는 태그 중 순서를 찾아 선택하는 방법이다.
선택할태그:nth-child(순서)
선택할태그:nth-last-child(순서)