복합 선택자 - 바로 실행해보면서 배우는 HTML5/CSS3
복합 선택자
learn
Practice
learn
10 선택자(Selector)
복합 선택자

단순 선택자는 아주 쉽고 직관적으로 이해할 수 있었지만 복합 선택자는 조금 복잡합니다. 복합 선택자에 들어가기에 앞서 우리는 HTML 요소 사이에 존재하는 부모와 자식이라는 개념에 대한 이해가 필요합니다.

부모 - 자식 - 후손 요소


부모(article)와 나(div), 자식(p)이란 연결 관계를 가지는 요소들이 존재한다고 가정해봅시다. <div>를 기준으로 <div> 안에 포함되는 하위 요소인 <p><div>의 자식 요소(Child Element)이고, <div>의 상위 요소인 article<div>의 부모 요소(Parent Element)입니다.

코드로 나타내면 다음과 같습니다. 부모 - 자식 관계는 상대적입니다. <p>를 기준으로 하면 <div>가 부모 요소가 되겠죠.

남매가 모두 부모님의 자식인 것처럼, 나에 해당하는 <div>의 하위에 있는 <div>, <p>는 모두 자식 요소입니다. 

그리고 그 자식 요소와 그 아래에 포함된 모든 태그들을 아울러 후손 요소(Descendant Element)라고 부릅니다. 즉, 부모 아래의 모든 하위 요소들은 후손 요소인 셈이죠.

자식, 후손 요소 모두 단어 뜻 그대로 생각하면 됩니다. '이런 설명이 왜 필요하지?'라고 의문이 들 수 있습니다. 그 이유는 다음과 같습니다.

HTML에 이러한 부모 - 자식 - 후손 관계에 따라 CSS에서 또한 자식과 후손과 연관된 선택자인 자식 선택자, 후손 선택자를 사용하게 되는데 이 두 선택자가 복합 선택자의 대표적인 예입니다.


자식 선택자(Child Selector)


자식 선택자(Child Selector)는 선택자 A의 모든 자식 중 선택자 B와 일치하는 요소를 선택합니다. 자식 선택자는 복합 선택자이기 때문에 선택자를 두 개 사용하며 중간에 >(꺽쇠)를 써줍니다.

아래 예시를 직접 작성하여 실행해봅시다. 후손 요소에 해당하는 <p> 태그는 색이 변하지 않고 #me의 바로 하위인 <p>자식 요소 2</p>만 색이 변할겁니다. 이처럼 바로 하위에 해당하는 자식 요소에만 스타일을 적용하고 싶을 때 자식 선택자를 사용합니다. (font와 관련된 스타일은 상속에 의해 후손 요소들에도 스타일이 적용 될 수 있습니다. 이는 후에 스타일 상속에 대해 배우고 나면 이해될 겁니다.)

자식 선택자를 사용할 때 한 가지 주의해야 할 점이 있습니다. 다음과 같은 구조에 코드를 적용한다고 가정해봅시다.

위와 같은 구조에서 자식 선택자를 div > p라고 사용하면 div > p라는 구조를 가진 모든 요소에 스타일이 적용됩니다. 즉, div 바로 아래에 위치한 모든 p에 동일한 스타일이 적용됩니다.


후손 선택자(Descendant Selector)


후손 선택자(Descendant Selector)는 선택자 A의 모든 후손 중 선택자 B와 일치하는 요소를 선택합니다. 후손 선택자 역시 복합 선택자이기 때문에 선택자를 두 개 사용하며 중간에 띄어쓰기를 사용합니다.

아래와 같이 CSS 코드를 수정하여 실행해봅시다. 이전에 자식 선택자를 이용했을 때는, <p>자식 요소 2</p>만 색이 바뀌었던 것을 기억하시나요? 하지만 후손 선택자를 사용하면 #me의 하위에 있는 모든 <p> 태그가 선택되는 것을 확인할 수 있습니다.

Practice

이론에서 살펴본 코드를 직접 작성하여 결과를 확인한 뒤, 구성 요소를 변경하며 어떤 변화가 일어나는지 확인해봅시다.

learn
Practice
Q & A
Q&A forum that anyone can ask and answer.
Share your questions and answers with other students and grow together!
Registered Questions(0)