1. 기본 선택자 사용하기

전체 선택자 : * { }

태그 선택자 : h1 { }

아이디 선택자 : html 태그에 있는 id 속성값을 이용한 것. #id { }

클래스 선택자 : html 태그에 있는 class 속성값을 이요한 것. .class { }

기본 속성 선택자 : html 태그에 있는 속성값을 사용한 것. a[href=”_blank”] { }.
[class=”red”] { }, [id=”title”] { } 처럼 class 속성과 id 속성값을 선택자로 지정할 수도 있다.

2. 조합 선택자 사용하기

1. 그룹 선택자

여러 선택자를 하나로 그룹 지을 때 사용. 선택자와 선택자는 콤마(,)로 구분한다.

h1, h2, h3 { color:red;  }

2. 자식 선택자

부모 선택자 > 자식 선택자 { }

.box > p { color:red;}

3. 하위 선택자

선택자의 범위를 특정 부모 요소의 자손 요소로 한정하는 방법. 2개 이상의 선택자를 사용하고 선택자와 선택자는 공백으로 구분

div p { color: red; } 

4. 인접 형제 선택자

이전 선택자 + 대상 선택자.

5. 일반 형제 선택자

이전 선택자 뒤에 오는 형제 관계 요소를 “모두” 선택자로 지정. 선택자와 선택자 사이는 ~로 구분.

3. 가상 요소 선택자 사용하기

html에 지정된 구성 요소는 아님. 기준 선택자::가상 요소 선택자 { }

p::before { content: '입력하기'; } 

/* before는 콘텐츠 앞의 공간을 선택하여 '입력하기'라는 텍스트를 추가. */
/* content는 새로운 콘텐츠를 생성할 때 사용하는 속성 */

4. 가상 클래스 선택자 사용하기

1. 링크 가상 클래스 선택자

기준 요소:가상 클래스 선택자 { }

a:link { color: orange; } /* :link는 한 번도 방문하지 않은 링크 일 때 */
a:visited { color: green; } /* :visited 한 번이라도 방문한 적이 있는 링크일 때 */

2. 동적 가상 클래스 선택자

사용자의 어떤 행동에 따라 동적으로 변하는 상태 이용.

:hover –> 마우스 올렸을 때
:active –> 마우스를 클릭할 때

3. 입력 요소 가상 클래스 선택자

입력 요소의 특정 상태를 이용

:focus –> 입력 요소의 커서가 활성화 되었을 때
:cheched –> 체크박스가 표시되어 있을 때
:disabled –> 상호 작용 요소가 비활성화될 때
:enabled –> 상호 작용 요소가 활성화 될 때

4. 구조적 가상 클래스