wiki:css:css_note:css_combinators
문서의 이전 판입니다!
목차
Document
- 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;
}
예제
<html>
<head>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Descendant Selector</h2>
<p>The Descendant selector matches all elements that are descendants of a specified element.</p>
<div>
<p>Paragraph 1 in the div</P> // 배경이 yellow
<p>Paragraph 2 in the div</P> // 배경이 yellow
<selection><p>Paragraph 3 in the div</P></selection> // 배경이 yellow
</div>
<p>Paragraph 4. Not in a div</p>
<p>Paragraph 5. Not in a div</p>
</body>
</html>
자식 선택자 (Child Selector) - (표시 : >)
자식 선택자는 특정 요소의 모든 자식 요소들을 선택합니다.
하기 예제는 <div>요소 내에서 자식들인 모든 <p>요소들을 선택합니다.
기본형
div > p {
background-color: yellow;
}
예제
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Child Selector</h2>
<p>The Child selector (>) selects all elements that are the children of a specified element.</p>
<div>
<p>Paragraph 1 in the div</P> // 배경이 yellow
<p>Paragraph 2 in the div</P> // 배경이 yellow
<selection><p>Paragraph 3 in the div</P></selection> // not child but Descendant
<p>Paragraph 4 in the div</P> // 배경이 yellow
</div>
<p>Paragraph 5. Not in a div</p>
<p>Paragraph 6. Not in a div</p>
</body>
</html>
인접 형제 선택자 (Adjacent Sibling Selector) - (표시: + )
인접 형제 선택자는 다른 특정 요소 바로 다음에 있는 요소들을 선택하기 위해 사용됩니다.
형제 요소들은 동일한 부모 요소를 가져야 하고, “인접(adjacent)“은 “즉시 연이어 나오는”것을 의미합니다.
하기 예제는 <div>요소 다음에 위치한 첫 번째 <p>요소를 선택합니다.
기본형
**div + p** {
background-color: yellow;
}
예제
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Adjacent Sibling Selector</h2>
<p>The + selector is used to selects an element that is directly after another specific element.</p>
<p>The following example selects the first p element that are placed immediately after div elements:</p>
<div>
<p>Paragraph 1 in the div</P>
<p>Paragraph 2 in the div</P>
</div>
<p>Paragraph 3. After a div</p> // 배경이 yellow
<p>Paragraph 4. After a div</p>
<div>
<p>Paragraph 5 in the div</P>
<p>Paragraph 6 in the div</P>
</div>
<p>Paragraph 7. After a div</p> // 배경이 yellow
<p>Paragraph 8. After a div</p>
</body>
</html>
(일반) 형제 선택자 ((General) Sibling Selector) - (표시: ~ )
(일반) 형제 선택자는 어떤 특정 요소의 모든 형제 요소들을 선택합니다.
하기 예제는 <div>요소의 형제들인 모든 <p> 요소들을 선택합니다.
기본형
**div ~ p** {
background-color: yellow;
}
예제
<html>
<head>
<style>
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>General Sibling Selector</h2>
<p>The general sibling selector (~) selects all elements that are siblings of a specified element.</p>
<p>Paragraph 1.</P>
<div>
<p>Paragraph 2</P>
</div>
<p>Paragraph 3.</p> // 배경이 yellow
<h4>Some code</h4>
<p>Paragraph 4</p> // 배경이 yellow
</body>
</html>
CSS Combinator Selectors
/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_combinators.1614835771.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
