2. 셀렉터

CSS는 HTML 요소의 스타일을 정의하는데 그러려면 HTML이 존재하고 또한 스타일을 적용하고자 하는 HTML 요소에 특정할 필요가 있다. 이럴 때 셀렉터가 사용된다.

 

복수 개의 셀렉터를 연속하여 지정할 수 있고 쉼표로 구분한다.

 

h1, p { color: red; }

 

1. 전체 셀렉터

 

* - HTML 문서 내의 모든 요소를 선택한다. html 요소를 포함한 모든 요소가 선택된다. (head 요소도 포함)

 

* { color: red; }

 

2. 태그 셀렉터 - 지정된 태그명을 가지는 요소를 선택

 

p { color: red; }

-> 모든 p 태그 요소를 선택

 

3. ID 셀렉터

 

#id 속성 값 - id 속성 값을 지정하여 일치하는 요소를 선택. 중복될 수 없는 유일한 값

 

#p1 { color: red; }

-> id 속성 값이 p1인 요소를 선택

 

4. 클래스 셀렉터

 

.class 속성 값 - class 속성 값을 지정하여 일치하는 요소를 선택. 중복될 수 있다.

 

 

5. 속성 셀렉터

 

셀렉터[속성] - 지정된 속성을 갖는 모든 요소를 선택

 

a [href] { color: red; } -> a 요소 중에 href 속성을 갖는 모든 요소

 

셀렉터[속성 = "값"] - 지정된 속성을 가지며 지정된 값과 속성의 값이 일치하는 모든 요소를 선택

 

a[target="_blank"] { color: red; } -> a 요소 중에 target 속성의 값이 "_blank"인 모든 요소

 

셀렉터[속성~="값"] - 지정된 속성의 값이 지정된 값을 (공백으로 분리된) 단어로 포함하는 요소를 선택

 

he[title~="first"]{ color: red; } -> h1 요소 중에 title 속성 값에 "first"를 단어로 포함하는 요소

 

셀렉터[속성|="값"] - 지정된 속성의 값과 일치하거나 지정 속성 값 뒤 연이은 값-으로 시작하는 요소를 선택

 

p[lang|="en"] { color: red; } -> p 요소 중에 lang 속성 값이 "en"과 일치하거나 "en-"로 시작하는 요소

 

셀렉터[속성^="값"] - 지정된 속성 값으로 시작하는 요소를 선택

 

a[href^="https://"]{ color: red; } -> a 요소 중에 href 속성 값이 "https://"로 시작하는 요소

 

셀렉터[속성$="값"] - 지정된 속성 값으로 끝나는 요소를 선택

 

a[href$=".html"]{ color: red; }

 

셀렉터[속성*="값"] - 지정된 속성 값을 포함하는 요소를 선택

 

div[class*="test"]{ color: red; } -> div 요소 중에서 class 속성 값에 "test"를 포함하는 요소

 

6. 복합 셀렉터

 

1) 후손 셀렉터 : 셀렉터A의 모든 후손 요소 중 셀렉터B와 일치하는 요소를 선택

 

div p { color: red; } -> div 요소의 후손요소 중 p 요소

 

2) 자식 셀렉터 : 셀렉터A의 모든 자식 요소 중 셀렉터B와 일치하는 요소를 선택

 

셀렉터A > 셀렉터B

 

div > p { color: red; } -> div 요소의 자식요소 중 p 요소

 

3) 형제 셀렉터 : 형제 관계에서 뒤에 위치하는 요소를 선택할 때 사용

 

(1) 인접 형제 셀렉터 - 셀렉터A의 형제 요소 중 셀렉터A 바로 뒤에 위치하는 셀렉터B 요소를 선택, A와 B사이에 다른 요소가 존재하면 선택되지 않는다

 

셀렉터A + 셀렉터B

 

(2) 일반 형제 셀렉터 - 셀렉터A의 형제 요소 중 셀렉터A 뒤에 위치하는 셀렉터B 요소를 모두 선택

 

셀렉터A ~ 셀렉터B

 

7. 가상 클래스 셀렉터 : 요소의 특정 상태에 따라 스타일을 정의할 때 사용

 

( 특정상태  - 마우스가 올라와 있을때, 링크를 방문했을 때와 아직 방문하지 않았을 때, 포커스가 들어와 있을 때)

 

이러한 특정 상태에는 원래 클래스가 존재하지 않지만 가상 클래스를 임의로 지정하여 선택하는 방법

 

가상클래스는 . 대신 : 을 사용

 

a: hover { color: red; } -> a 요소가 hover 상태(마우스가 올라와 있을 때)일 때

input: focus { background-color: yellow; } -> input 요소가 focus 상태일 때

 

1) 링크 셀렉터, 동적 셀렉터

:link - 셀렉터가 방문하지 않은 링크일 때

:visited - 셀렉터가 방문한 링크일 때

:hover - 셀렉터에 마우스가 올라와 있을 때

:active - 셀렉터가 클릭된 상태일 때

:focuse - 셀렉터에 포커스가 들어와 있을 때

 

2) UI 요소 상태 셀렉터

:checked - 셀렉터가 체크 상태일 때

:enabled - 셀렉터가 사용 가능한 상태일 때

:disabled - 셀렉터가 사용 불가능한 상태일 때

 

3) 구조 가상 클래스 셀렉터

:first-child - 셀렉터에 해당하는 모든 요소 중 첫번째 자식인 요소를 선택

:last-child - 셀렉터에 해당하는 모든 요소 중 마지막 자식인 요소를 선택

 

4) 부정 셀렉터

:not(셀렉터) - 셀렉터에 해당하지 않는 모든 요소를 선택

 

5) 정합성 체크 셀렉터

:valid(셀렉터) - 정합성 검증이 성공한 input 요소 또는 form 요소를 선택한다.

:invalid(셀렉터) - 정합성 검증이 실패한 input 요소 또는 form 요소를 선택한다.

 

8. 가상 요소 셀렉터 - 가상 요소는 요소의 특정 부분에 스타일을 적용하기 위해 사용된다.

 

특정 부분(요소 컨텐츠의 첫글자 또는 첫줄, 요소 컨텐츠의 앞 또는 뒤)

 

가상 요소에는 두 개의 콜론(::)을 사용

CSS 표준에 의해 미리 정의된 이름이 있기 때문에 임의의 이름 사용 X

 

::first-letter - 컨텐츠의 첫글자를 선택

::first-line - 컨텐츠의 첫줄을 선택, 블록 요소에만 적용 가능

::after - 컨텐츠의 뒤에 위치하는 공간을 선택, 보통 content 속성과 함께 사용

::before - 컨텐츠의 앞에 위치하는 공간을 선택, 보통 content 속성과 함께 사용

::selection - 드래그한 컨텐츠를 선택