[CSS] 선택자(Selector) 문법

자주 쓰다보면 익숙해지겠지만.. 아직은 조금 헷갈려서 CSS 선택자 문법을 정리해보았다.

작성한 것들 외에도 더 활용할 수 있는 것들이 있다!

 

기본 선택자

자식 선택자

선택자의 직계 자식들을 선택하여 스타일을 적용한다.

.container > * { }  // .container의 직계 자식 전체를 선택
.container > div { }  // .container의 직계 자식인 div만 선택한다. 자식 요소의 자식 중에 div가 있는 경우 해당하지 않음

 

 

자손 선택자

선택자의 직계 자식을 포함하여 모든 하위 요소들을 선택한다.

즉, 자식의 자식의 자식까지도 포함된다.

.container div { }  // .container 하위의 모든 div를 선택

 

 

인접 형제 선택자

선택자의 바로 다음 형제 요소를 선택한다.

같은 부모 요소를 가진 형제 요소지만, 인접하지 않은 경우는 해당하지 않는다.

.container + div { }

 

 

일반 형제 선택자

선택자와 같은 부모를 가진 형제 요소들을 모두 선택한다.

.container ~ div { }

 

 

그룹 선택자

여러 선택자를 한번에 선택하여 스타일을 적용할 때 쉼표로 그문하여 연결한다.

.container1, .container2, .container3 { }

 

 

의사 요소 (pseudo-element, 가상 요소)

실제 HTML 구조에 포함된 요소는 아니지만, 선택한 요소의 특정 부분에만 스타일을 입힐 때 사용할 수 있다.

 

1) ::first-letter 콘텐츠의 첫 글자를 선택한다.

2) ::first-line 블록 요소에서 콘텐츠의 첫 줄을 선택한다.

3) ::selection 드래그한 콘텐츠를 선택한다.

4) ::after, ::before

https://nninyeong.tistory.com/22

[CSS] 가상요소로 체크박스 커스텀하기 (::after, ::before)

 

 

의사 클래스 (pseudo-class)

HTML 요소의 특별한 상태를 명시할 때 사용하는 선택자다.

 

동적 의사 클래스

1) :link

방문하지 않은 링크일 때

 

2) :visited

방문한 링크일 때

 

3) :hover

마우스가 선택자에 올라와 있을 때

 

4) :active

선택자가 클릭된 상태일 때

 

5) :focus

선택자에 포커스가 들어와있을 때

 

상태 의사 클래스

1) :checked

선택자가 체크된 상태일 때

 

2) :enabled

선택자가 사용 가능한 상태일 때

 

3) :disabled

선택자가 사용 불가능한 상태일 때

 

 

구조 의사 클래스

1) :first-child

형제 요소 중 첫번째 요소와 선택한 타입이 일치하면 선택

p:first-child { }  // p가 첫번째 형제 요소인 경우 스타일 적용

 

2) :last-child

형제 요소 중 마지막 요소와 선택한 타입이 일치하면 선택

 

3) :nth-child

형제요소 중 n번째 요소와 선택한 타입이 일치할 때 선택

div:nth-child(1) { }  // 첫번째 자식일 때 선택
div:nth-child(2n) { }  // 짝수번째 자식일 때 선택
div:nth-child(2n + 1) { }  // 홀수번째 자식일 때 선택
div:nth-child(n + 5) { }  // 다섯번째 자식 이후로 모두 선택

 

4) :first-of-type

선택자 타입 중 형제 요소에서 첫번째인 것을 선택

 

5) :last-of-type

선택자 타입 중 형제 요소에서 마지막인 것을 선택

 

 

속성 선택자

태그에 특정 속성 혹은 속성값을 갖고있는 요소를 선택한다.

 

div[attr] { }  // attr 속성을 갖고있는 div 선택
div[attr=value] { }  // attr 속성이 value인 div 선택