CSS (2) 선택자와 우선순위

1. 기본적인 선택자의 종류

 - 전체 선택자 (*)

선택자	설명
*	'*'는 존재하는 전체 요소에 사용하는 선택자로,   전체 요소에 적용시키는 만큼, 선택자들 중에 그 무엇보다도 우선하지 않는다.

 

- 후손 선택자 ( ) 와 자식 선택자 (>)

선택자	설명
ul li	ul의 후손인 li 요소를 모두 선택한다.   (띄어쓰기 공백으로 구분한다.)
ul>li	ul의 자식인 li만 선택한다.    = 자식 아래의 자손은 선택하지 않는다.

 

- 형제 선택자 (+ ~)

선택자	설명
H1 + P	인접 형제 선택자 : h1의 바로 뒤에 있는 P요소를 선택한다.   (즉, H1이후에 P요소가 아닌 SPAN요소가 있을 때는 선택하지 않는다.)
H1 ~ P	일반 형제 선택자 : h1의 바로 뒤부터 이하의 모든  P요소를 선택한다.   ( H1 이전에 존재하는 P요소는 선택하지 않음 )

 

 - 속성 선택자[ ]

선택자	설명
선택자[속성]	속성이 포함된 모든 요소를 선택한다.
선택자[속성="값"]	속성="값"인 모든 요소를 선택한다.
선택자[속성~="값"]	속성="값"이 포함되는 모든 요소를 선택한다.   (공백으로 분리된 값이 일치해야 함)
선택자[속성^="값"]	속성값에서 "값"으로 시작되는 요소를 선택한다.
선택자[속성$="값"]	속성값에서 "값"으로 끝나는 요소를 선택한다.
선택자[속성*="값"]	속성값에 "값"이 포함되는 요소를 선택한다.
선택자[속성|="값"]	속성값이 "값"과 정확하게 일치하거나,   "값"으로 시작되는 모든 요소를 선택한다.

 

2. 가상 클래스 선택자

: 특정한 상태를 선택하는 선택자. 문서 전체의 순서, 개별 요소의 상태 등을 선택할 때 사용.

 - <A>요소의 가상 클래스 선택자

선택자	설명
A:link	방문하지 않은 링크
A:vistied	방문한 링크
A:active	요소에 마우스 클릭 혹은 키보드 엔터가 눌린 동안
A:hover	요소 위에 마우스가 올라와 있는 동안   (*대부분의 요소에도 사용이 가능)
A:focus	요소 위에 포커스가 머물러 있는 동안   (*대부분의 요소에도 사용이 가능)

 

선택자	설명
#ID:target	ID가 지정된 대상이 A링크에 의해 URL을 요청했을 때 선택한다.

 

 - 구조적 가상 클래스 선택자 : 문서 구조상에서 갖는 위치를 선택

선택자	설명
:root	문서의 최상위 요소(html)를 선택할 때 사용.   항상 html 을 선택하지만, 클래스 선택자로 사용하므로   html요소 선택보다 우선한다.
선택자:nth-child(n)	앞으로부터 지정된 순서(n)와 일치하는 요소가 선택자 라면 선택   (선택자가 아닌 요소의 순서가 계산에 포함)
선택자:nth-last-child(n)	뒤로부터 지정된 순서(n)와 일치하는 요소가 선택자 라면 선택   (선택자 아닌 요소의 순서가 계산에 포함)
선택자:nth-of-type(n)	선택자 요소 중 앞으로부터 순서(n)가 일치하는 선택자 요소를 선택   (선택자 요소의 순서만 계산에 포함)
선택자:nth-last-of-type(n)	선택자 요소 중 끝으로부터 순서(n)가 일치하는 선택자 요소를 선택   (선택자 요소의 순서만 계산에 포함)
선택자:first-child	첫 번째 등장하는 요소가 선택자이면 선택   (선택자가 아닌 요소의 순서도 계산에 포함)
선택자:last-child	마지막에 등장하는 요소가 선택자이면 선택   (선택자가 아닌 요소의 순서도 계산에 포함)
선택자:first-of-type	선택자 요소 중 첫 번째 선택자 요소를 선택   (선택자 요소의 순서만 계산에 포함)
선택자:last-of-type	선택자 요소 중 마지막 선택자를 선택   (선택자 요소의 순서만 계산에 포함)
선택자:only-child	선택자 요소가 유일한 자식이면 선택   (선택자가 아닌 요소가 하나라도 포함되면 선택하지 않습니다.)
선택자:only-of-type	선택자 요소가 유일한 타입이면 선택   (선택자가 아닌 요소가 포함되어도 선택자 타입이 유일하면 선택합니다.)
선택자:empty	자식 요소가 전혀 없는 선택자 요소를 선택   (컨텐츠 영역 내에 텍스트 및 공백이 있다면 선택되지 않는다.)

 

선택자	설명
선택자1:not(선택자2)	선택자2가 아닌 선택자1 요소를 선택   *(선택자2에는 일반 선택자 및 가상 클래스 선택자도 올 수 있다.)   **(단, 선택자 2 에는 부정 선택자 혹은 가상 엘리먼츠 선택자를 넣을 수 없다.)

 

 - 그 외 기타 가상 클래스 선택자들

선택자	설명
선택자:lang(언어코드)	lang 속성이 '언어코드'으로 지정된 요소를 선택   *(예시 : <p lang="ko"></p>와 같은 형태 )   **(언어코드 예시 korean = "ko" english="en")

 

선택자	설명
선택자:enabled	enable 상태인 폼 콘트롤 요소를 선택   *폼 콘트롤 요소(input, textarea, select, button)
선택자:disabled	disable 상태인 폼 콘트롤 요소를 선택   *폼 콘트롤 요소(input, textarea, select, button)
선택자:checked	"checked"상태인 radio 또는 checkbox 타입의 input요소,    또는 <option>요소를 선택

 

3. 가상 요소(엘리먼츠)선택자

컨텐츠의 일부를 선택하거나 앞이나 뒤에 붙는 내용을 지정할 때 사용하는 선택자.

 

 - 컨텐츠 삽입 선택자

선택자		설명
::after{content:"입력값";}		대상의 뒤에 컨텐츠 삽입
::before{content:"입력값";}		대상의 앞에 컨텐츠 삽입

 

 - 컨텐츠의 일부만 선택하는 선택자

선택자		설명
::first-letter{속성:"속성값";}		대상의 첫번째 글자 선택
::first-line{속성:"속성값";}		대상의 첫 줄 선택
::selection{속성:"속성값";}		유저가 블록지정한 위치 선택

 

4. CSS의 적용 우선순위

- 순위표

순위	선택자 형태	설명	우선순위 점수표
1	!important 선언	선언시 무조건 우선함	최상위
2	INLINE CSS	html style속성으로 작성된 내용	1,000
3	#아이디	아이디 사용	100
4	.클래스 / 가상 클래스 선택자               /           속성 선택자	클래스 및 가상클래스, 속성 선택자	10
5	요소명 / 가상 요소 선택자	요소이름 혹은 가상 요소 이름	1
6	상속된 속성	부모 요소에서 상속된 속성들	- 사용자 선택불가 -
7	전체 선택자(*)	*로 선언된 내용	0

* 각 요소별 개수에 따라서 적용된다. 

** 클래스를 10개 모은다고 해서, ID보다 우선하지는 않는다.

   우선 순위는 ID>CLASS>ELEMENTS 순서이다.

 

- 다중 스타일 시트에서의 우선순위

css의 스타일시트는 세 종류로 나누어 볼 수 있으며, 각각의 우선순위에도 차이가 있다. 

 

 - User Agent 선언 : 브라우저 기본 스타일 시트 (웹 브라우저에서 가장 기본형으로 지정된 스타일시트)

 - 사용자 스타일 시트 : 사용자가 웹 브라우저로 추가한 스타일 시트( 기본서체 등 커스터마이징 스타일시트 )

 - 제작자 스타일 시트 : css 문서로 설정한 스타일 시트 (제작자가 내부,외부 스타일시트로 설정한 스타일시트)

 

우선순위	종류	설명
1(높음)	사용자 선언(중요)	사용자가 넣은 스타일 시트 중 중요(!important) 표시 속성.
2	제작자 선언(중요)	제작자가 작성한 스타일 시트 중 중요(!important) 표시 속성
3	제작자 선언(일반)	제작자가 작성한 스타일 시트
4	사용자 선언(일반)	사용자의 스타일 시트
5(낮음)	user agent 선언	브라우저 기본 스타일 시트 (default 값)