CSS selector 선택자 결합, multiple, hierarchical, combined selector

HTML은 건물의 구조를 세우는 것이라면, CSS는 인테리어를 하는 것이다.

인테리어를 할 때 가령, 아래와 같이 구체적이고 세부적으로 지정해주는 것이 좋을 것이다.

"두 번째방의 오른쪽 벽면을 빨갛게 칠해줘"

 

CSS도 마찬가지다.

특정 선택자를 지정하여 꾸며주는 속성을 적용할 때, 

구체적이고 세부적으로 어떤 선택자인지 말해줘야 한다.

 

오늘은 고급 CSS 기술인 선택자를 결합하는 방법을 이야기하고자 한다.

 

1. Multiple Selectors

여러 개의 선택자를 수평적으로 결합한다.

해당 속성을 적용하고 싶은 선택자라면 모두 결합하는 방식이다.

각각의 선택자를 ,(콤마)로 연결한다. 띄어쓰기는 해도 되고, 하지 않아도 되지만 하는 것이 가독성을 높인다.

이 방법은 코드를 그룹화하고, 단축하는 방법이다.

 

2. Hierarchical Selectors

선택자를 계층적으로 결합하는 방식이다.

계층이 있다는 것은 해당 선택자들이 Parent-child 처럼 포함관계에 있다는 의미이다. 

각각의 선택자를 띄어쓰기(공백)으로 연결한다. 여기서 띄어쓰기는 필수요소이다.

첫 번째 선택자는 부모(Parent), 두 번째 선택자는 (Child)이다.

오른쪽에서 왼쪽으로 읽는다.

.container와 .title이 부모 자식의 관계로서 계층이 존재하므로 띄어쓰기하여 선택자를 결합한다.

 

 

3. Combined Selectors

같은 요소 안에 있는 선택자를 결합한다. 여기서는 계층이 없어야 한다. 

각각의 선택자는 공백없이 붙여쓴다. 띄어쓰기를 하지 않는 것이 필수요소이다. 

왼쪽에서 오른쪽으로 읽는다.

div 와 .container가 계층적 구조 없이 동일한 HTML 요소에 있으므로 띄어쓰기 없이 선택자를 결합한다.