[CSS] 복합 셀렉터

HTML 문서에 스타일링을 위해서는 HTML 요소( element )를 선택해야 합니다.

기본적인 element 선택 방법에는 id , class , 태그등이 있습니다.

기본 셀렉터가 아닌 좀 더 응용해서 사용할 수 있는 복합셀렉터에 대해 알아보겠습니다.

1. 자식 셀렉터 >

• 자식 셀렉터는 기호 " > "를 사용합니다.
• 위 CSS는 <div> 태그의 자식 태그 중 <p> 태그에 대해 폰트를 red 색으로 바꾸는 코드입니다.
• 결과를 보시면 <a> 태그 아래에 있는 <p>태그는 영향을 받지 않지만, <div> 밑에 있는 모든 <p> 태그는 모두 폰트 색상이 변했습니다.

2. 후손 셀렉터 - 띄어쓰기

• 후손 셀렉터는 띄어쓰기입니다.
• 위 CSS는 <div> 태그 아래에 있는 모든 <p>에 대해서 폰트를 red 색으로 바꾸는 코드입니다.
• 결과를 보시면 <a> 태그 아래에 있는 <p>태그도 영향을 받는다는 것을 확인할 수 있습니다.

3. 그룹 셀렉터 ,

• 여러 셀렉터에 대해 공통된 스타일을 주고 싶은 경우에 사용하며, " , (쉼표) " 기호를 사용합니다.
• 위 CSS는 <div>, <p>, <a> 태그 모두에 폰트를 red 색으로 바꾸는 코드입니다.
• 결과를 보시면 <div>, <p>, <a> 태그 모두 스타일이 적용된 것을 확인할 수 있습니다.

4. 특정 태그의 id값에 스타일을 주고 싶은 경우

• 위 CSS는 여러 <p> 태그 중 id값이 foo인 <p> 태그에 대해서만 스타일을 적용하는 코드입니다.
• 만약 클래스에 스타일을 부여하고 싶다면, 즉 foo가 클래스라면 CSS 셀렉터는 p.foo 가 되겠죠.

이상으로 복합 셀렉터에 대해 알아보았습니다.

더 많은 셀렉터가 있지만 제가 CSS를 잘 만지지 않아서 자주 보이는 셀렉터만 정리를 했습니다.