CSS selector

 

CSS selector

: 문서의 대상을 선택하여 꾸밀 수 있도록 선택하는 선택자

 

 

 

 

1. 요소 (타입) 선택자  Element Type Selector

단 하나만의 요소를 선택하는

 

body {속성: 값;}

h1 {속성: 값;}

 

 

2. 그룹핑 선택자 Groupping Selector

여러개의 요소를 콤마로 구분하여 (그룹핑) 같은 속성과 값을 줄 수 있다

 

h1, h2, h3 {속성: 값;}

 

 

3. 유니버셜 선택자 Universal Selector

* (asterisk : 애스터 리스크) html 문서 모든 것을 포함하는 전체 선택자

 

*  {속성: 값;}

body * {속성: 값;}                body 아래의 모든 것을 선택함

#nav * {속성: 값;}                아이디 nav 아래의 있는 모든 것을 선택함

 

 

4. 클래스 선택자 class Selector / ( . ) 점 사용

html문서에서는 <class="">로 표시하고 css문서에서는

 

p.nav {속성: 값;}                 p(단락)내부에 있는 클래스 nav를 찾아 모두 선택함

 

 

5. 멀티 클래스 선택자 multi class Selector

다중의 클래스를 모두 선택할 수 있는 선택자.

 

p.nav.section {속성: 값;}     p(단락)내부에 위치한 클래스 nav 와 클래스 section가 모두 있는

                                        요소를 선택함

ex. <class="nav section">   nav와 section 위치가 바뀌어도 상관없음.

 

 

6. 아이디 선택자 ID Selector / (# : 샵, 해시) 사용 

클래스와 마찬가지로 html 문서의 ID를 선택하는 선택자.

 

#nav {속성: 값;}                 아이디 nav 요소를 선택함

div#nav {속성: 값;}             div 안에 위치한 아이디 nav를 선택함

 

               

7. 자손 선택자 Descendant Selector

하위 선택자. 부모를 지정해주면 그 아래있는 자손만 선택

부모를 앞에 쓰고 그 뒤에 자식을 쓰면 된다.

 

li a {속성: 값;}                   li 안에 위치한 자손 a 를 선택함

p strong {속성: 값;}           p 안에 위치한 자손 strong을 선택함

html body p {속성: 값;}       html 안에 위치한 body 안에 위치한 자손 p 를 선택함

 

 

8. 자식 선택자 child Selector / 꺾음 괄호( > )사용

자손 선택자와 비슷하게 자식 선택자로 사용하여 자식을 선택할 수 있다. 꺾음 괄호( > ) 사용

어느 부모의 어느 자식인지 정확히 지정할 수 있는 선택자.

 

#nav>p                           아이디 nav (부모)의 자식 p를 모두 선택함

p>strong                         p(단락:부모)내부의 자식 strong을 모두 선택함

 

 

9. 인접 형제 선택자 / ( + ) 플러스 기호 사용

부모의 가장 가까운(인접한) 형제를 찾는 선택자.

 

h1 + p                            h1(부모)의 가장 가까운 자식 p 를 선택함

                                    (h1 아래 자식 p가 많을 경우 가장 h1에 인접한 단 하나의 p만 선택됌)

 

 

10. 일반 형제 선택자 / ( ~ ) 물결 기호 사용

위의 인접 형제에서는 h1에 가장 인접한 단하나의 자식 p만 찾는 반면에,

이 일반 형제 선택자는 h1의 자식들 p를 모두 선택한다.

 

h1 ~ p                           h1 자식의 p를 모두 선택