요소들을 선택합니다. \\
\\
기본형\\
div p {
background-color: yellow;
}
\\
예제\\
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 {
background-color: yellow;
}
\\
예제\\
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** { background-color: yellow; } \\ 예제\\
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** { background-color: yellow; } \\ 예제\\
The general sibling selector (~) selects all elements that are siblings of a specified element.
Paragraph 1.
Paragraph 2
Paragraph 3.
// 배경이 yellowParagraph 4
// 배경이 yellow \\ =====CSS Combinator Selectors ===== ^ Selector ^ Example ^ Example Description ^ | element element | div p |요소들을 선택합니다. | | element>element | div > p | 부모가
요소들을 선택합니다. | | element+element | div + p |
요소를 선택합니다. | | element1~element2 | p ~ ul |
요소 다음에 오는 모든