CSS 결합기
CSS 결합기
결합자는 선택자 간의 관계를 설명하는 것입니다.
CSS 선택기는 둘 이상의 단순 선택기를 포함할 수 있습니다. 단순 선택자 사이에 결합자를 포함할 수 있습니다.
CSS에는 네 가지 다른 결합자가 있습니다.
- 자손 선택자(공백)
- 자식 선택자(>)
- 인접한 형제 선택자(+)
- 일반 형제 선택자(~)
하위 선택자
자손 선택자는 지정된 요소의 자손인 모든 요소와 일치합니다.
다음 예제에서는 <div> 요소 내의 모든 <p> 요소를 선택합니다.
예시
div p {
background-color: yellow;
}
자식 선택기(>)
자식 선택자는 지정된 요소의 자식인 모든 요소를 선택합니다.
다음 예는 <div> 요소의 자식인 모든 <p> 요소를 선택합니다.
예시
div > p {
background-color: yellow;
}
인접 형제 선택자(+)
인접한 형제 선택자는 다른 특정 요소 바로 뒤에 있는 요소를 선택하는 데 사용됩니다.
형제 요소는 동일한 부모 요소를 가져야 하며 "인접"은 "바로 뒤따르는"을 의미합니다.
다음 예는 <div> 요소 바로 뒤에 배치되는 첫 번째 <p> 요소를 선택합니다.
예시
div + p {
background-color: yellow;
}
일반 형제자매 선택자(~)
일반 형제 선택자는 지정된 요소의 다음 형제인 모든 요소를 선택합니다.
다음 예는 <div> 요소의 다음 형제인 모든 <p> 요소를 선택합니다.
예시
div ~ p {
background-color: yellow;
}
모든 CSS 조합기 선택기
Selector | Example | Example description |
---|---|---|
element element | div p | Selects all <p> elements inside <div> elements |
element>element | div > p | Selects all <p> elements where the parent is a <div> element |
element+element | div + p | Selects the first <p> element that are placed immediately after <div> elements |
element1~element2 | p ~ ul | Selects every <ul> element that are preceded by a <p> element |