결합 선택자(Combining Seletor)

 앞서 저희는 3개의 선택자(Seletor)를 살펴 보았는데요. CSS의 진정한 힘은 바로 여기서 나옵니다. 

 

 선택자를 결합 할 수 있다는 것입니다. 어떻게 할지는 이제부터 알아 보겠습니다.

 1. 엘리먼트와 클래스 선택자의 결합 (Element With Class Selector)

- 말 그대로 엘리먼트 선택자와 클래스 선택자를 결합한 형태 인데요, 좀 더 세세한 스타일링이 가능합니다.

 보시다 싶이 <p> 태그를 가진 엘리먼트 중에서 "big" 이라는 클래스를 가지고 있는 요소들에 스타일을 적용했습니다.  

 공백 없이 바로 두 엘리먼트를 적어 주면 됩니다.

 

 결과는 같은 클래스를 가지고 있더라도 다른 엘리먼트에는 스타일이 적용이 안되는 것을 볼 수가 있습니다.

 2. 자식 선택자( Child Selector )

- 한 엘리먼트를 기준으로 그 자식 엘리먼트에 스타일을 적용하는 방식입니다. 

 단, 이 방식은 부모 엘리먼트에 바로 밑의 자식 엘리먼트에만 적용이 된다는 특징을 가지고 있습니다. ( 헷갈리니 중요 합니다! )

 보시다 싶이 <article> 태그의 자식인 <p> 엘리먼트에 스타일을 적용한 모습입니다. 

 

 두 엘리먼트 사이에 ">" 를 적어주면 됩니다. 

 

 위 스타일을 적용했을 때 실제로 HTML 문서 상에서 <article> 태그 바로 밑에 있는 <p> 태그에는 스타일이 적용이 됬지만

 

 그 이외에는 적용이 되지 않은 모습을 볼 수가 있습니다.

 3. 자손 선택자 ( Descendant Selector )

- 한 엘리먼트를 기준으로 그 속해 속한 엘리먼트에는 어디 있던 간에 스타일을 적용하는 방식입니다.

 쉽게 말해 자식 선택자는 자식 엘리먼트가 부모 엘리먼트의 바로 밑에 존재해야 했지만

 자손 선택자는 어디든 간에 조상 엘리먼트 안에만 속해있으면 된다는 말 입니다.    

 <article>이 조상 엘리먼트가 되고 <p> 가 자손 엘리먼트가 됩니다. 

 두 엘리먼트 사이에는 공백을 적어주면 됩니다.

 실제로 위 그림을 보면 알수 있듯이 <p> 태그가 조상 엘리먼트인 <article> 사이에 <div> 태그가 있어도

 스타일이 적용 됨을 알 수가 있습니다.

* 제한 없는 엘리먼트 선택자

1. "colored" 라는 클래스를 가지고 있는 <p> 엘리먼트에 적용됩니다. 

 2. <article> 의 자식 엘리먼트 중에서 "colored"라는 클래스를 가지고 있는 엘리먼트에 적용이 됩니다.

* 단, 이 경우는 해당이 되지 않습니다.

출처 ㅣ https://www.coursera.org/learn/html-css-javascript-for-web-developers/home/week/2