231012 목) CSS 선택기 Combining

1) Group

 

(복수 지정)

 

h1, h2, ...임의값 {

   background-color:blueviolet;

   color:red

}

 

2) Parent > Child

 

(내부 자식이 한 단계 아래일 때만)

 

.Parent div > Child div {

   color:firebrick;

}

 

<div class="box">

    <p class="done">ABC</p>

    <ul class="list">

        <li>ㄱ</li>

        <li>ㄴ</li>

        <li>ㄷ</li>

    </ul>

</div>

 

.box > "done" {

 

} 이나

 

.box > "list" {

 

} 로 선택가능하다

 

3) Descendant (손자선택기)

 

(하나의 최상위 항목에서 중위를 생략하고 하위 항목을 선택한다)

(이 값에 부모자식 > 를 넣어서 하면 작동되지 않는다)

 

.최상위 div li {

 color:blue;

}

 

4) Chaining (선택기 연결)

 

(모든 선택기가 참일 때 적용)

(사이 띄어쓰기가 없다)

 

element.div#id {

 color:seagreen;

}

 

5) Multiple Combiners (조합끼리 결합)

 

(상기된 combine끼리도 combine할 수 있다)

 

상위ele div.id {

 color:blueviolet;

}

 

상위ele > div.id {

 color:blueviolet;

}

 

또한 유효하다