[CSS] CSS선택자란?

 CSS선택자란?

 

 - HTML문서에 CSS로 스타일을 주기 위해서는 선택자를 통해서 해당 요소를 선택한 뒤 해당 스타일을 줘야 합니다. 그런데 내가 줘야할 CSS를 누가 받을건지 어떻게 알까?? 그럴때 선택자를 통해 해당 요소에게 스타일을 적용시킬 수 있다.

 

 

 

1. 요소 선택자

 

- a, hi , div , img , p , span 등 직접 요소명을 적어서 나타내는 선택자입니다. 예를 들어서 확인하겠습니다

 

ex)

  span{

color:blue;

 }

 

 

다음과 같이 span태그에 blue라는 color를 줄수있다.

 

 

2. ID 선택자

 

 - ID 선택자는 말그대로 id 속성을 가진 요소를 선택하는 선택자입니다. 해당 요소의 id 속성 값으로 CSS를 주려면 id속성 이름 앞에 #을 붙여서 사용합니다.

 

ex) 'wrap'이라는 id 속성을 id선택자로 쓰기 위해서는 #wrap 으로 사용합니다.

 

 

3. Class 선택자

 

 - Class선택자도 ID선택자와 같이 class속성에 대한 값을 가져와서 . 를 붙여서 사용합니다

 

ex) 'wrap'라는 class 속성을 class선택자로 쓰기 위해서는 .wrap 으로 사용합니다

 

4. 선택자 중첩

 

 - span.main 처럼 하면 span태그이면서 class명이 main인 선택자들을 선택한다.

 

5. 선택자 묶음

 

 - span , img , a 처럼하면 span , img , a 선택자들을 묶어서 선택한다.

 

6. 후손 선택자

 

 - img a 띄어쓰기로 구분하면 img 태그의 자식요소인 a 선택자를 선택

 

 

■ 단일 선택자보다 id 선택자가 우선

 

■ 같은 단계의 선택자가 중복일 경우 아래쪽에 입력된 선택자가 우선

 

■ 더 많은 단계를 가진 후선 선택자가 우선