[css] css 선택자, 합성자 (Selector, combinator)

선택자 

1. Universal selector (전체 선택자)

사용법: *

모든 html 요소들을 선택한다.

예시:

* {

       margin: 0;

};

 

2. Type selector (타입 선택자)

사용법: html element 이름으로 선택

특정 html element 를 선택한다.

예시:

button {

   width: 100px;

}

 

3. Class Selector (클래스 선택자)

사용법: 클래스 이름 앞에 . 을 붙여서 사용

특정 클래스 elements 를 선택한다.

예시:

.table {

               width: 200px;

               height: 200px;

};

 

4. ID Selector (아이디 선택자)

사용법: 아이디 앞에 # 을 붙여서 사용

특정 Id 의 elements 를 선택한다.

예시:

#my_id { 

                 width: 200px;

};

 

5. Attribute Selector (속성 선택자)

사용법: element 의 속성과 속성 값을 이용해서 element 를 선택한다.

예시:

a[href^="www"] {

           width: 200px;

} 

해석: a 엘리먼트 중에 href 의 속성 값이 www 로 시작하는 모든 앨리먼트들의 width 를 200px 으로 만든다.

 

attribute selector 에 관한 자세한 정보는 아래 링크에

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Attribute selectors - CSS: Cascading Style Sheets | MDN

---

합성자 (Combinators)

 

1. Descendant combinator

모든 자식 엘리먼트들 중 뒤에 있는 셀렉터에 해당하는 엘리먼트들의 css 를 변경

div p {

     width: 100px;

}

 

해석 : div 의 모든 자식 노드들 (손자 노드, 증손자 노드 등 모든 자식 노드 포함) 중 p 에 select 되는 노드들의 width 를 100px 로 한다.

 

2. Child combinator

정확히 앞의 셀렉터에 선택된 엘리먼트로부터 1단계 밑 자식들 중에 뒤에 있는 셀렉터에 해당하는 엘리먼트들의 css 를 변경

ul > li {

    width: 50px;

};

 

해석: ul 의 바로 아래 자손들 중 li 에 해당하는 엘리먼트들의 width 를 50px 로 변경

 

3. General sibling combinator

앞의 셀렉터보다 순서상 뒤에 있는 형제 엘리먼트들 중에서 뒤의 셀렉터에 해당하는 엘리먼트들의 css 를 변경

.red_list ~ li {

                width : 400px;

};

해석: red_list 라는 클래스를 가진 엘리먼트보다 뒤에 있는 엘리먼트들 중에서 li 에 해당하는 모든 엘리먼트들의 width 를 400px 로 변경

 

4. Adjacent sibling combinator

앞의 셀렉터와 바로 뒤에 붙어있는 형제, 두번째 셀렉터에 해당하는 엘리먼트들의 css 를 변경

div + p {

         width: 100px;

};

div 엘리먼트 바로 뒤에 나오는 형제 p 엘리먼트의 css 를 변경한다.