[CSS] CSS 속성 선택자(Selector) 종류

선택자(Selecotr) 작성방법

선택자 { 속성:값; 속성:값; }

---

1. 태그 선택자

HTML의 특정 태그 선택합니다.

h1 { background-color:yellow; }

<h1>h1</h1><!--적용대상-->

---

2. 클래스, 아이디 선택자 (. #)

클래스는 반복적인 디자인 요소를 적용 시 사용 ▶ .(점)
아이디는 단독으로 사용하는 디자인 요소 적용 시 사용 ▶ #(샵)

h1.title1 { background-color:yellow; }
.title2 { background-color:pink; }

h3#title3 { background-color:blue; }
#title4 { background-color:green; }

<h1 class="title1">h1</h1><!--적용대상-->
<h2 class="title2">h2</h2><!--적용대상-->
<h3 id="title3">h3</h3><!--적용대상-->
<h4 id="title4">h4</h4><!--적용대상-->

---

3. 속성 선택자

form 관련 대상을 선택 시 주로 사용합니다.
선택자[속성=값]  속성의 값이 모두 일치할 때 선택합니다.
선택자[속성^=값] 속성의 값이 이것으로 시작할 때 선택합니다.
선택자[속성$=값] 속성의 값이 이것으로 끝날 때 선택합니다.
선택자[속성*=값] 속성의 값에 이것이 포함되었을 때 선택합니다.

input[type=text] {background-color:yellow;}
input[type^=t] {background-color:yellow;}
input[type$=xt] {background-color:yellow;}
input[type*=ex] {background-color:yellow;}

<input type="text">

---

4. 고급 선택자

1. 그룹 선택자 (,)

2개 이상의 선택자를 묶을 때 사용합니다.
,(콤마)

.box p,
.box h2, 
.box a {
	background-color:yellow;
}

<div class="box">
  <p>1</p><!--적용대상-->
  <h2>2</h2><!--적용대상-->
  <a href="#">3</a><!--적용대상-->
</div>

 

2. 하위 선택자 (공백)

특정 태그에 묶인 자식 안 자손 요소를 선택 시 사용합니다.
한 칸 공백

div p a { background-color:yellow; }
/* or */
div a { background-color:yellow; }
/* or */
p a { background-color:yellow; }

<div>
	<p>
    		<a href="#">link</a><!--적용대상-->
    	</p>
</div>

 

3. 자식 선택자 (>)

특정 태그에 묶인 자식 요소를 선택 시 사용합니다.
> (꺽쇠)

h1 > em { background-color:yellow; }

<h1>
	<em>em</em><!--적용대상-->
</h1>

 

4. 인접형제 선택자 (+)

특정 태그의 다음 형제 요소 선택합니다.
+(더하기)

h1+p { background-color:yellow; }

<h1>h1</h1>
<p>selector</p><!--적용대상-->
<p>selector</p>
<p>selector</p>

 

5. 형제 선택자 (~)

특정태그에 다음에 오는 모든 형제들 선택합니다.
~(물결)

h1 ~ p { background-color:yellow; }

<h1>h1</h1>
<p>selector</p><!--적용대상-->
<p>selector</p><!--적용대상-->
<p>selector</p><!--적용대상-->

 

---

5. 가상클래스 선택자

선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며,
이를 가상 (추상)클래스라 합니다.
선언 방법은 :(콜론) 기호를 사용합니다.

CSS 선택자	의미
:link	방문한 적이 없는 링크
:visited	방문한 적이 있는 링크
:hover	마우스를 롤오버 했을 때
:active	마우스를 클릭했을 때
:focus	포커스 되었을 때 (input 태그 등)
:first	첫번째 요소
:last	마지막 요소
:first-child	첫번째 자식
:last-child	마지막 자식
:nth-child(n)	부모안에 모든 요소 중 N번째 요소 (odd 홀수 | even 짝수)
:not(selector)	소괄호()안에 작성한 선택자를 제외한 모든 선택자를 선택

 

---

예시

:nth-child(N)	부모안에 모든 요소 중 N번째 요소
A:nth-of-type(N)	부모안에 A라는 요소 중 N번째 요소
:first-child	부모안에 모든 요소 중 첫번째 요소
:last-child	부모안에 모든 요소 중 마지막 요소
A:first-of-type	부모안에 A라는 요소 중 첫번째 요소
A:last-of-type	부모안에 A라는 요소 중 마지막 요소

 

---

:nth-child(n)

특정 부모의 배치된 형제 순서에 따라 대상을 선택합니다.

<div class="box">
  <h1>h1</h1>
  <p>selector1</p><!--적용대상-->
  <p>selector2</p>
  <p>selector3</p>
</div>

위 태그에서 selector1을 선택한다면?

.box p:nth-child(2) { background-color:yellow; }

 

:nth-of-type(n)

형제 그룹 사이에서 자신과 동일한 요소만을 보고 해당 요소 순서에 따라 대상 선택합니다.

<div class="box">
  <h1>h1</h1>
  <p>selector1</p><!--적용대상-->
  <p>selector2</p>
  <p>selector3</p>
</div>

위 태그에서 selector1를 선택한다면?

.box p:nth-of-type(1) { background-color:yellow; }

---

수열 선택자 추가활용 +

:first-child , :first-of-type 특정 부모의 첫 째 형제를 선택합니다.
:last-child , :last-of-type 특정 부모의 마지막 형제를 선택합니다.

:nth-last-child(n) , :nth-last-of-type(n) 특정 부모의 마지막에서 n번째 대상을 선택합니다.
(odd) , (even) , (2n) , (2n+1)
특정 부모의 홀수, 짝수 또는 n의 배수에 해당하는 대상을 선택합니다.

 

상태 선택자

주로 a, button, input 등에 사용하는 선택자입니다.
:hover 마우스 올렸을 때
:active 활성화했을 때
:visited (링크) 방문했을 때
:focus 커서를 놓았을 때 (input 활성화)

 

---

6. 가상요소 선택자

가상 요소는 HTML 코드에 존재하지 않는 구조 요소에 스타일을 부여할 수가 있습니다.
가상 요소도 가상 클래스처럼 문서 내에 보이지 않지만, 미리 정의한 위치에 삽입되도록 약속이 되어있습니다.
선언 방법은 ::(더블 콜론) 기호를 사용합니다.

CSS 선택자	의미
::before	특정 요소의 내용(content) 부분 바로 앞에 다른 요소를 삽입합니다.
::after	특정 요소의 내용(content) 부분 바로 뒤에 다른 요소를 삽입합니다.
::first-letter	각 요소의 첫 글자를 선택합니다. (블록요소에만 사용가능)
::first-line	각 요소의 첫 번째 줄을 선택합니다. (블록요소에만 사용가능)
::marker	marker 목록 항목의 마커를 선택합니다.
::selection	드래그하여 선택되는 영역을 지정
::placeholder	Input 필드 안 힌트 텍스트에 스타일을 적용합니다.

---

::selection

웹사이트를 드래그 선택했을 때 (ie 적용안됨)

body *::selection { background-color:yellow; color:red; }

::before

요소의 자식 기준 시작 위치에 새로운 내용을 추가합니다.

.box li:last-child::before { 
  content:'위치 추가';
  background-color:yellow;
  display:block;
}

<ol class="box">
  <li>list</li>
  <li>list</li>
  <li>
    <!--before삽입위치-->
    list
  </li>
</ol>

::after

요소의 자식 기준 마지막 위치에 내용을 추가합니다.

.box li:first-child::after { 
  content:'위치 추가';
  background-color:yellow;
  display:block;
}

<ol class="box">
  <li>list
  	<!--after삽입위치-->
  </li>
  <li>list</li>
  <li>list</li>
</ol>

 

---

👉 CSS 선택자 모음

CSS 선택자	의미	적용 예시
h1	태그선택자	h1 { color:blue; }
*	전체 선택자 (애스터리스크)	* { color:blue; }
h1[title]	속성선택자	h1[title] { color:blue; }
span[class="ex"]	속성 값선택자	span[class="ex"] { color:blue; }
* [ lang^="en"]	속성 값 시작선택자	span[class^="e"] { color:blue; }
* [ lang$="php"]	속성 값 종료선택자	span[class$="h"] { color:blue; }
* [ lang*="hello"]	속성 값 전체선택자	span[class*="hello"] { color:blue; }
.class	클래스선택자	.class { color:blue; }
#id	아이디 선택자	#id { color:blue; }
:link	접속되지 않은 상태	:visited 접속한 상태
:hover	요소에 포인팅을 올려 놓았을 때 적용	:active 요소를 클릭했을 때 적용
:focus	요소에 포커스가 이동했을때 적용
요소명:checked	라디오 버튼 및 체크상자가 선택되었을 때
요소명:nth-child( )	동일한 부모 요소 안에서 n번째 자식 요소 스타일 적용 odd(홀수) even(짝수)
	an+b 서식에서 n은 0 이상의 정수로 지정하고 a와 b는 임의의 정수(0, 양수, 음수)를 지정합니다.
	ex) odd 의 경우 2n + 1 , even은 2n과 같은 뜻이 됩니다. tr:nth-child(2n+1){ background:#9999ff; }
요소명:nth-last-child( )	동일한 부모 요소 안에서 뒤에서 n번째 자식 요소 스타일 적용
요소명:nth-of-type( )	동일한 부모 요소 안에서 n번째 자식 요소 스타일 적용
	nth-child와 달리 다른 종류의 형제가 있어도 요소명에 지정된 요소만을 셉니다.
요소명:nth-last-of-type( )	동일한 부모 요소 안에서 뒤에서 n번째 자식 요소 스타일 적용
요소명:first-child	지정한 요소가 부모 요소 안에서 맨 처음 자식 요소인 경우에 스타일 적용 nth-child(1)과 동일
요소명:last-child	지정한 요소가 부모 요소 안에서 맨 마지막 자식 요소인 경우에 스타일 적용 nth-last-child(1)과 동일
요소명:first-of-type	동일한 부모 요소 안에서 맨 처음 자식 요소 스타일 적용(다른 종류형제 무시, 지정된 요소만을 인식합니다.)
요소명:last-of-type	동일한 부모 요소 안에서 마지막 자식 요소 스타일 적용(다른 종류형제 무시, 지정된 요소만을 인식합니다.)
요소명:only-child	동일한 부모 요소 안에서 유일한 자식 요소인 경우에 스타일 적용
	first-child, nth-child(1), nth-last-child(1), last-child와 동일합니다.
요소명:only-of-type	동일한 부모 요소를 갖는 형제들 중 지정한 요소가 하나밖에 없는 경우에 스타일 적용
	first-of-type, last-of-type, nth-of-type(1), nth-last-of-type(1)과 동일합니다.
요소명:empty	자식요소나 요소 내용을 갖지 않는 요소에 스타일을 적용합니다.
	셀의 내용이 공백인 경우 ex) td:empty { background:gray; }
요소명:not( )	괄호 안에 지정된 셀렉터와는 일치하지 않는 요소에 스타일을 적용한다.
	class="sample"이 지정되어 있지 않은 p에 스타일을 적용하는 예시) p:not(.sample) { color:navy; }
요소명::first-line	지정한 요소의 맨 첫 줄에 스타일을 적용합니다.
요소명::first-letter	지정한 요소의 맨 첫 문자에 스타일을 적용합니다.
요소명::before	요소명::after
선택자 선택자	부모 요소에 포함되는 자식 요소에 스타일을 적용합니다.
선택자 > 선택자	부모 요소 직후에 자식 요소에 스타일을 적용합니다.
선택자 + 선택자	동일한 부모를 가지는 형제 관계에 요소(직접 동생 요소)에 스타일을 적용합니다.
선택자~선택자	동일한 부모를 갖는 형제관계에 요소 중 어떤 요소의 다음에 나타나는 요소들에 스타일을 적용합니다.
	바로 다음에 나타나는 요소(직접 동생 요소)인지 아닌지는 묻지 않습니다.

 

 

참고 : https://webty.tistory.com/60 https://lalacode.tistory.com/6