CSS

5.5

다양한 선택자 조합하기

지금까지 배운 것처럼 선택자의 목적은 스타일을 지정할 대상 요소를 선택하는 것이고, 선택자를 지정하는 방법도 상당히 많습니다. 아직 배우는 단계라서 다양한 선택자를 종류별로 나눠서 다루었지만, 원래는 서로 조합해서 사용할 수 있습니다.

다음과 같은 선택자 조합은 실무에서도 흔하게 사용하며 문법적으로도 허용됩니다.

div.box{} /* class 속성값이 box인 div 태그 */
section#main /* id 속성값이 main인 section 태그 */

일반적이진 않지만, 다음과 같은 형태도 가능합니다.

#main.box{} /* id 속성값이 main이고, class 속성값이 box인 요소 */

또는 가상 클래스와 하위 선택자, 자식 선택자를 조합한 형태도 가능합니다.

div:hover button{} /* div 태그에 마우스를 올린(hover) 상태일 때, 해당 div 태그 하위에 있는 button 태그 선택 */
div:hover > button{} /* div 태그에 마우스를 올린(hover) 상태일 때, 해당 div 태그와 자식 관계에 있는 button 태그 선택 */

이처럼 선택자를 조합하는 방법은 무척 다양합니다. 앞으로 CSS를 사용하는 데 익숙해지면 자연스럽게 여러 선택자를 조합해 사용할 수 있을 겁니다. 일단은 선택자를 다양하게 조합해 사용할 수 있다는 점만 알아 두고 넘어가겠습니다.