CSS 탐구생활 : CSS 결합자와 가상 클래스 :not

1. 결합자란?

css를 작성할 때 각 태그의 선택자를 통해 css를 적용해 줄 수 있다. 이때 하나의 선택자가 아닌 선택자와 선택자를 결합하여 좀 더 세밀하게 css를 적용해줄 수도 있다. 

 

2. 결합자의 종류

1) 자손 결합자

어떠한 태그의 자식 태그의 자식 태그의 스타일 속성을 지정해주고 싶을 때 사용한다.

선택자와 선택자 사이에 띄어쓰기를 통해 css를 적용할 수 있다.

 

2) 자식 결합자

어떠한 태그의 바로 직계 자식 태그의 스타일 속성을 지정해주고 싶을 때 사용한다. 

선택자와 선택자 사이에 ' > ' 기호를 사용하여 css를 적용할 수 있다.

 

3) 뒤따르는 형제 결합자

같은 선상에 있는 형제 태그들이 있을 때 특정한 태그 뒤에 오는 모든 형제 태그들의 스타일 속성을 지정해주고 싶을 때 사용한다. 선택자와 선택자 사이에 ' ~ ' 기호를 사용하여 css를 적용할 수 있다. 

 

4) 뒤따르는 바로 다음 형제 결합자

같은 선상에 있는 형제 태그들이 있을 때 특정한 태그 뒤에 오는 바로 다음 형제 태그의 스타일 속성을 지정해주고 싶을 때 사용한다. 선택자와 선택자 사이에 ' + ' 기호를 사용하여 css를 적용할 수 있다. 

 

<예제>

See the Pen Untitled by proccm (@proccm) on CodePen.

 

 

3. 가상 클래스 :not

가상 클래스 :not은 선택자의 css 적용시 특정한 요소는 스타일이 적용되지 않게 할 때 사용된다.

형태: 선택자:not(제외할 선택자)

 

<예제>

See the Pen Untitled by proccm (@proccm) on CodePen.