CSS 연결자(Combinators)

« Previous Next Chapter »

CSS Combinators

연결자(combinators)는 선택자(selectors)들 사이의 관계를 설명하는 무엇이다.

CSS 선택자는 하나 이상의 단순 셀랙터를 포함 할 수 있다. 단순 셀랙터 사이에, 우리는 연결자(combinator)를 포함 할 수 있습니다.

CSS 에는 네 가지 연결자가 있습니다 :

자손 선택자(descendant selector) (space)
자식 선택자(child selector) ( > )
인접 형제 선택자(adjacent sibling selector) ( + )
일반 형제 선택자(general sibling selector) ( ~ )

자손(Descendant) Selector

자손(descendant) 선택은 지정된 요소의 자손인 모든 요소와 일치합니다.

다음은 <div> 요소 내부의 모든 <p> 요소를 선택합니다 :

Example

div p {
background-color: yellow;
}

Try it yourself »

자녀(Child) Selector

자녀 선택은 지정된 요소의 직접적인 자녀인 모든 요소를선택합니다.

다음의 예는 <div> 요소의 직계 자식 인 모든 <p> 요소를 선택합니다 :

Example

div > p {
background-color: yellow;
}

Try it yourself »

인접 형제(Adjacent Sibling) Selector

인접 형제 선택은 지정된 요소의 인접 형제인 모든 요소를선택합니다.

형제자매 요소는 같은 부모 요소를 가져야 하며, "adjacent" 는 "immediately following"를 의미한다.

다음 예는 <div> 요소 바로 뒤에 놓인 모든 <p> 요소를 선택합니다 :

Example

div + p {
background-color: yellow;
}

Try it yourself »

일반 형제(General Sibling) Selector

일반 형제 선택은 지정된 요소의 형제인 모든 요소를선택합니다.

다음은 <div> 요소의 형제인 모든 <p> 요소를 선택합니다 :

Example

div ~ p {
background-color: yellow;
}

Try it yourself »

Test Yourself with Exercises!

Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »

All 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> 요소를 선택합니다 t

« Previous Next Chapter »