conbinators selectors

category

simple selectors
combinator selectors
pseudo-class selectord
pseudo-elements selectors
attribute selectors

combinators?

컴비네이터는 selector들 사이에 관계를 설명해주는 것입니다.

A combinator is something that explains the relationship between the selectors.
출처: https://www.w3schools.com/css/css_combinators.asp

combinator의 종류

descendant selector (space)

관계가 하위를 나타냅니다. 예시를 보자면

div p {
  background-color: yellow;
}

위와 같은 style에서 div보다 하위에 있는 p elemnt에 모두 style이 적용됩니다.

<div>
	<p>노란색</p>
</div>
<p>default색<p>
<div>
	<header>
    	<p>노란색</p>
    </header>
</div>

해당 결과를 보면 descendant relationship에 대하여 잘 이해할 수 있습니다.

child selector(>)

child인 관계를 설명합니다. child의 개념은 descendant이면서 depth차이가 1나는 element라할 수 있습니다. descendant예제와 비교하여 이해하면 이해하기 편합니다.

div>p{
  background-color: yellow;

}

<div>
	<p>노란색</p>
</div>
<p>default색<p>
<div>
	<header>
    	<p>노란색x default색</p>
    </header>
</div>

아래 부분은 descendant와 child의 차이를 잘 보이는 곳입니다.

<div>
	<header>
    	<p>노란색x default색</p>
    </header>
</div>

adjacent sibling selector(+)

같은 parent를 가지며(sibling,depth가 같다) 바로 붙어있는 element의 관계를 의미합니다.

div + p {
  background-color: yellow;
}

<p>default색</p>
<div>
	<p>default색</p>    ///(2)
</div>
<p>노란색</p>           ///(3)
<p>defult 색</p>       ///(4)

위의 예시에서 3에서는 노란색이 적용되고, 4에서는 적용되지 않는 것을 확인한다면 더 잘 이해할 수 있습니다.

general sibling selector(~)

같은 parent를 가지며 붙어있는 관계입니다.

div ~ p {
  background-color: yellow;
}

<p>default색</p>
<div>
	<p>default색</p>    ///(2)
</div>
<p>노란색</p>           ///(3)
<p>노란색</p>       ///(4)

adjacent sibling selector와 비교하면 더 잘 이해할 수 있습니다. descendant selector와 child selector의 차이처럼, element가 바로 뒤따르냐 아니면 바로가 아니더라도 뒤따르냐의 차이가 납니다.

what i learend

• 명확한 용어를 배웠습니다. conbinator,descendant,chil,adjacent sibling, general sibling
• 이미 적용한 selector가 있는데 모르고 썼다는 생각이든다.