CSS 선택자_복합

1. 일치 선택자(Basic Combinator)

 

제시한 선택자 두 개를 동시에 만족하는 요소를 선택함.

span.orange {

    color: red;

}

이렇게 작성하면 제시된 선택자는 span 태그와 orange 클래스이고 이 두개를 만족하는 요소를 선택하게 된다.

<span class="orange">오렌지</span> 과 같이 작성된 요소를 선택한다.

따로 사용하는 기호가 없기에 .orangespan 처럼 작성하면 orangespan이라는 클래스를 찾게 된다. 태그 선택자와 클래스 선택자를 같이 찾고 싶다면 클래스 선택자를 앞으로 보내야한다.

 

 

 

2. 자식 선택자(Child Combinator)

 

ABC > XYZ 라고 작성한다면 선택자 ABC의 자식 요소 XYZ를 선택한다.

좀 더 특정한 요소를 선택할 수 있는 선택자.

ul > .orange {

    color: red;

}

처럼 작성하면

<ul>

    <li class="orange">오렌지</li>

</ul>

위의 ul 태그 밑에 있는 요소를 선택하게 된다.

 

 

 

3. 하위(후손) 선택자 (Descendant Combinator)

 

ABC XYZ 처럼 작성하면 선택자 ABC의 하위요소 XYZ를 선택한다.

띄어쓰기도 선택자의 기호니까 함부로 사용하면 안된다!

div .orange {

    color: red;

}

처럼 작성하게 되면 <div>태그 밑의 orange클래스의 요소들이 전부 선택된다.

 

 

 

4. 인접 형제 선택자 (Adjacent Sibling Combinator)

 

ABC + XYZ 처럼 작성하면 선택자 ABC의 다음(아래쪽) 형제 요소 XYZ '하나'를 선택.

 

여기서 '형제'란 같은 부모요소를 공유하는 요소들을 총칭함

 

.orange + li {

    color: red;

}

 

라고 작성하면 

 

<ul>

    <li>딸기</li>

    <li class="orange">오렌지</li>

    <li>망고</li> ------>선택된 요소

    <li>사과</li>

</ul>

 

 

 

5. 일반 형제 선택자 (Generla Sibling Combinator)

 

ABC ~ XYZ 처럼 작성하면 선택자 ABC의 다음 형제 요소 XYZ를 '모두' 선택한다.

.orange + li {

    color: red;

}

 

라고 작성하면 

 

<ul>

    <li>딸기</li>

    <li class="orange">오렌지</li>

    <li>망고</li> 

    <li>사과</li> 

</ul>

 

.orange 클래스 밑의 형제요소를 전부 선택한다.