CSS 선택자_기본

1. *

 

전체 선택자(Universal Selector). 모든 요소를 선택한다.

* {

    color: red;

}

이렇게 작성하면 연결된 html의 모든 태그를 선택해 내용을 적용한다.

 

 

 

2. 태그 이름

 

태그 선택자(Type Selector). 태그 이름을 작성해 선택한다. 태그 이름으로 선택하는 선택자.

li {

    color: red;

}

이렇게 작성하면 태그 이름이 <li>인 요소들을 선택한다.

태그 선택자는 태그의 종류가 모든 요소를 구분할만큼 고유한 것들이 아니기 때문에 좀 더 세세하게 구별 가능한 클래스 선택자를 사용한다.

 

 

 

3. .클래스 이름

 

클래스 선택자(Class Selector). '.abc' 형태로 작성한다. 마침표( . ) + 클래스 이름

html class 속성의 값이 abc인 요소를 선택한다.

.orange {

    color: red;

}

이렇게 작성한다면 <li class="orange">오렌지</li> 등 클래스 이름이 orange인 요소들을 선택한다.

 

 

 

4. #아이디 이름

 

아이디 선택자(ID Selector). '#orange' 형태로 작성한다. 샵(#) + 아이디 이름.

html id 속성의 값이 orange인 요소를 선택한다.

#orange {

    color: red;

}

를 작성하면 <li id="orange" class="orange">오렌지</li> 와 같이 작성된 요소를 선택한다.