목차
CSS Combinators
- description : CSS Combinators
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-03-04
Source of the article
- “Do it! HTML5 + CSS3 웹표준의 정석” / 이지스 퍼블리싱 / 고경희 지음 / 개정1판 9쇄 발행 2019년 6월 3일 /
CSS 연결(자) 선택자 (Combinator or Combination Selectors)
연결선택자는 선택자들 사이의 관계를 설명해주는 것이다.
CSS 선택자는 단순 선택자 하나 이상을 포함할 수 있습니다. 단순 선택자들 사이에서 연결자를 포함시킬 수 있습니다.
CSS에는 4개의 연결자가 있습니다.
- 하위(자손, 후손) 선택자 (Descendant Selector) - (표시: space )
- 자식 선택자 (Child Selector) - (표시: > )
- 인접 형제 선택자 (Adjacent Sibling Selector) - (표시: + )
- (일반) 형제 선택자 ((General) Sibling Selector) - (표시: ~ )
하위(자손, 후손) 선택자 (Descendant Selector) - (표시 : space)
하위 선택자는 특정 요소의 하위 요소들인 모든 요소들을 연결합니다.
하기 예제는
요소 내의 모든 <p> 요소들을 선택합니다.
기본형
div p { background-color: yellow; }
예제
Descendant Selector
The Descendant selector matches all elements that are descendants of a specified element.
Paragraph 1 in the div
// 배경이 yellowParagraph 2 in the div
// 배경이 yellowParagraph 3 in the div
Paragraph 4. Not in a div
Paragraph 5. Not in a div
자식 선택자 (Child Selector) - (표시 : >)
자식 선택자는 특정 요소의 모든 자식 요소들을 선택합니다.
하기 예제는 <div>요소 내에서 자식들인 모든 <p>요소들을 선택합니다.
기본형
div > p { background-color: yellow; }
예제
Child Selector
The Child selector (>) selects all elements that are the children of a specified element.
Paragraph 1 in the div
// 배경이 yellowParagraph 2 in the div
// 배경이 yellowParagraph 3 in the div
Paragraph 4 in the div
// 배경이 yellowParagraph 5. Not in a div
Paragraph 6. Not in a div
인접 형제 선택자 (Adjacent Sibling Selector) - (표시: + )
인접 형제 선택자는 다른 특정 요소 바로 다음에 있는 요소들을 선택하기 위해 사용됩니다.
형제 요소들은 동일한 부모 요소를 가져야 하고, “인접(adjacent)“은 “즉시 연이어 나오는”것을 의미합니다.
하기 예제는 <div>요소 다음에 위치한 첫 번째 <p>요소를 선택합니다.
기본형
예제
Adjacent Sibling Selector
The + selector is used to selects an element that is directly after another specific element.
The following example selects the first p element that are placed immediately after div elements:
Paragraph 1 in the div
Paragraph 2 in the div
Paragraph 3. After a div
// 배경이 yellowParagraph 4. After a div
Paragraph 5 in the div
Paragraph 6 in the div
Paragraph 7. After a div
// 배경이 yellowParagraph 8. After a div
(일반) 형제 선택자 ((General) Sibling Selector) - (표시: ~ )
(일반) 형제 선택자는 어떤 특정 요소의 모든 형제 요소들을 선택합니다.
하기 예제는 <div>요소의 형제들인 모든 <p> 요소들을 선택합니다.
기본형
예제
General Sibling Selector
The general sibling selector (~) selects all elements that are siblings of a specified element.
Paragraph 1.
Paragraph 2
Paragraph 3.
// 배경이 yellowSome code
Paragraph 4
// 배경이 yellow
CSS Combinator Selectors
| Selector | Example | Example Description |
|---|---|---|
| element element | div p | <div> 요소들 내의 모든 <p> 요소들을 선택합니다. |
| element>element | div > p | 부모가 <div> 요소인 곳의 모든 <p> 요소들을 선택합니다. |
| element+element | div + p | <div> 요소 바로 뒤에 배치되는 첫 번째 <p> 요소를 선택합니다. |
| element1~element2 | p ~ ul | <p> 요소 다음에 오는 모든 <ul> 요소들을 선택합니다. |
