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 –> 상호 작용 요소가 활성화 될 때