CSS.03. 선택자(Selectors)

전체 선택자

스타일을 문서의 모든 요소에 적용할 때 사용

별(*)사용

주로 웹 브라우저의 기본 스타일(마진/패딩)을 초기화할때 사용

 

타입 선택자

특정 태그를 사용한 모든 요소에 스타일 적용

태그명{ 스타일 규칙 }

클래스 선택자

특정 부분에 스타일 적용

클래스 이름을 사용해 다른 선택자와 구별하며, 클래스 이름 앞에 반드시 마침표(.)을 붙여야 함

.클래스명{ 스타일 규칙 }

>>태그 안에 class="클래스명" 을 지정해 준 것에만 지정됨

 

id 선택자

특정 부분에 스타일을 한 번만 적용

아이디 이름을 사용해 다른 선택자와 구별하며,id 이름 앞에 반드시 #을 붙여야 함

#아이디명{ 스타일 규칙 }

>>id선택자는 문서에서 단 한번만 적용 가능함(id는 중복 불가)

 

그룹 선택자

같은 스타일 규칙을 공유하는 요소를 묶어서 적용

선택자1, 선택자2 { 스타일 규칙 }

 

연결 선택자

선택자와 선택자를 연결해 적용 대상을 제한하는 선택자

1) 자손 선택자

부모 요소에 포함된 모든 하위 요소에 적용

선택자 a와 b 사이에 공백을 두어 사용

div p {...}

 

2) 자식 선택자

자식 요소에 스타일을 적용하는 선택자

a의 자식인 b에만 적용

a > b {...}

 

3) 인접 형제 선택자

같은 부모를 가진 형제 요소 중 첫 번째 요소에만 스타일 적용

a + b {...}

 

4) 형제 선택자

같은 부모를 가진 형제 요소들에 스타일 적용

a ~ b

 

속성 선택자

HTML요소의 특정 속성을 기반으로 스타일을 적용

>> 특정 요소를 가지거나, 특정 값이나 값의 일부를 가진 속성을 포함한 요소를 선택

 

1) [속성] 선택자

해당 속성(명)을 가진 모든 요소를 선택

요소선택자[속성명]

 

2) [속성="값"]선택자

주어진 속성과 속성 값이 일치하는 요소를 선택

요소선택자[속성명="값"]

 

3) [속성~="값"] 선택자

여러 속성 값 중에 해당 값이 포함되어 있는 요소를 선택

요소선택자 [속성명~="값"] 

 

4) [속성|="값"] 선택자

특정 값이 포함된 속성을 가진 요소를 선택

하이픈으로 연결해 한 단어 값을 이루는 요소에도 적용가능

요소선택자 [속성명|="값"] 

 

5) [속성^="값"] 선택자

특정 값으로 시작하는 요소를 선택

요소 선택자 [속성명^="값"]

 

6) [속성$="값"] 선택자

특정 값으로 끝나는 요소를 선택

>>주로 파일 경로, url에 사용

요소 선택자  [속성명$="값"] 

 

7) [속성*="값"] 선택자

값의 일부가 일치하는 속성을 가진 요소를 선택

요소선택자 [속성*="값"] 

 

가상 클래스

특정 상태의 HTML요소에 스타일을 적용하기 위해 사용

>> 요소의 상태, 사용자의 동작, 문서 구조에 따라 구분

 

1. 사용자의 동작에 반응하는 가상 클래스 선택자

:link

-방문하지 않은 링크에 스타일 적용

:visited

- 방문한 링크에 스타일 적용

:active

- 웹 요소를 활성화/클릭 했을때 스타일 적용

:hover

- 웹 요소에 마우스 커서를 올렸을때 스타일 적용

:focus

-요소가 포커스를 받을때 스타일 적용

가상 클래스의 우선순위 

: link > :visited > :hover > :active

 

2. 요소의 상태에 따른 가상 클래스 선택자

:checked

-체크박스 또는 라디오 버튼 같은 입력 요소가 선택되었을 때 적용

:enabled, :disabled

-요소의 사용 여부에 따라 스타일 적용

:target

-url에 특정 id가 포함되어 있을때 그 id를 가진 요소에 스타일 적용

- a요소로 연결된 부분에 스타일 적용

 

:enabled, :disabled

- 입력 필드의 활성화 상태에 따라 스타일 적용

 

가상 요소

화면 꾸미기용 요소를 웹 문서에 포합시키지 않기 위해 가상 요소 사용

:first-child - 부모 요소의 첫 번째 자식 요소
:last-child - 부모 요소의 마지막 자식 요소
:nth-child('n') - 부모 요소의 'n'번째 자식 요소
:nth-of-type('n') - 특정 유형의 n번째 요소
:not(selector) - 지정된 선택자에 해당하지 않는 모든 요소를 선택
ex) :not(.class) - class 속성이 없는 모든 요소