복합 선택자(Combinators)
CSS에서는 선택자를 사용하여 요소를 특정하는데, 이 선택자들을 조합하여 원하는 요소를 정확하게 선택하는 방법이 있다. 이러한 선택자의 조합을 복합 선택자(Combinators)라고 한다. 복합 선택자는 일치 선택자, 자식 선택자, 후손 선택자, 인접 형제 선택자, 일반 형제 선택자로 구성된다.
일치 선택자 (Descendant selector)
일치 선택자는 가장 기본적인 형태의 선택자로, 요소의 이름을 이용하여 선택한다. 예를 들어, 모든 div 요소를 선택하고 싶다면 다음과 같이 사용할 수 있다.
div {
color: red;
}위의 코드는 HTML 문서 내의 모든 div 요소의 텍스트 색상을 빨간색으로 지정한다.
자식 선택자 (Child selector)
자식 선택자는 부모 요소의 바로 아래에 위치한 자식 요소들을 선택한다. 선택자 간에는 > 기호를 사용한다. 예를 들어, div 요소의 직계 자식인 p 요소를 선택하고 싶다면 다음과 같이 사용할 수 있다.
div > p {
font-weight: bold;
}위의 코드는 div 요소 내의 직계 자식으로 있는 p 요소의 텍스트를 굵게(weight: bold) 설정한다.
후손 선택자 (Descendant combinator)
후손 선택자는 부모 요소 아래에 위치한 모든 자식 요소들을 선택한다. 선택자 간에는 공백을 사용한다. 예를 들어, div 요소 내에 위치한 모든 span 요소를 선택하고 싶다면 다음과 같이 사용할 수 있다.
div span {
text-decoration: underline;
}위의 코드는 div 요소 내에 위치한 span 요소의 텍스트에 밑줄을 추가한다.
인접 형제 선택자 (Adjacent sibling selector)
인접 형제 선택자는 형제 요소 중에서 현재 요소의 다음에 위치한 형제 요소를 선택한다. 선택자 간에는 + 기호를 사용한다. 예를 들어, h1 요소의 인접한 형제인 p 요소를 선택하고 싶다면 다음과 같이 사용할 수 있다.
h1 + p {
margin-top: 20px;
}위의 코드는 h1 요소 바로 다음에 위치한 p 요소의 위쪽 여백을 20px으로 지정한다.
일반 형제 선택자 (General sibling selector)
일반 형제 선택자는 형제 요소 중에서 현재 요소 이후에 위치한 모든 형제 요소들을 선택한다. 선택자 간에는 ~ 기호를 사용한다. 예를 들어, h2 요소 이후에 위치한 모든 p 요소를 선택하고 싶다면 다음과 같이 사용할 수 있다.
h2 ~ p {
color: blue;
}위의 코드는 h2 요소 뒤에 위치한 모든 p 요소의 텍스트 색상을 파란색으로 지정한다.
마무리
복합 선택자는 CSS에서 요소를 더 세밀하게 선택하는 방법 중 하나로, 다양한 상황에서 유용하게 사용될 수 있다. 일치 선택자는 요소의 태그 이름을 이용하여 선택하며, 자식 선택자는 부모 요소의 직계 자식 요소를 선택한다. 후손 선택자는 부모 요소의 모든 자식 요소를 선택하며, 인접 형제 선택자는 현재 요소의 다음 형제 요소를 선택한다. 일반 형제 선택자는 현재 요소 이후의 모든 형제 요소를 선택한다.
복합 선택자를 적재적소에 사용하여 원하는 요소를 선택하고 스타일을 적용함으로써 웹 페이지의 모양과 레이아웃을 자유롭게 조작할 수 있다.
댓글