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

728x90

선택자(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-of-type( )	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	동일한 부모 요소 안에서 유일한 자식 요소인 경우에 스타일 적용
요소명:only-child	first-child, nth-child(1), nth-last-child(1), last-child와 동일합니다.
요소명:only-of-type	동일한 부모 요소를 갖는 형제들 중 지정한 요소가 하나밖에 없는 경우에 스타일 적용
요소명:only-of-type	first-of-type, last-of-type, nth-of-type(1), nth-last-of-type(1)과 동일합니다.
요소명:empty	자식요소나 요소 내용을 갖지 않는 요소에 스타일을 적용합니다.
요소명:empty	셀의 내용이 공백인 경우 ex) td:empty { background:gray; }
요소명:not( )	괄호 안에 지정된 셀렉터와는 일치하지 않는 요소에 스타일을 적용한다.
요소명: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

728x90

저작자표시

'📌 Front End > └ CSS3' 카테고리의 다른 글

[CSS] 스크롤 바(Scrollbar) 스타일 커스텀하기 (0)	2024.05.22
[CSS] CSS 애니메이션 - transform, transition, animation (0)	2024.05.22
[CSS] CSS 미디어쿼리(Media Query) 기본 사용법 (0)	2024.05.20
[CSS] CSS Flex 완벽 가이드 (0)	2024.05.20
[CSS] CSS Flex(display: flex) 레이아웃 구성과 정렬 (0)	2024.05.13

사용자 중심의 서비스를 만들 때까지 🐇

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

선택자(Selecotr) 작성방법

1. 태그 선택자

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

3. 속성 선택자

4. 고급 선택자

1. 그룹 선택자 (,)

2. 하위 선택자 (공백)

3. 자식 선택자 (>)

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

5. 형제 선택자 (~)

5. 가상클래스 선택자

:nth-child(n)

:nth-of-type(n)

수열 선택자 추가활용 +

상태 선택자

6. 가상요소 선택자

::selection

::before

::after

👉 CSS 선택자 모음

'📌 Front End > └ CSS3' 카테고리의 다른 글

티스토리툴바

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

선택자(Selecotr) 작성방법

1. 태그 선택자

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

3. 속성 선택자

4. 고급 선택자

1. 그룹 선택자 (,)

2. 하위 선택자 (공백)

3. 자식 선택자 (>)

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

5. 형제 선택자 (~)

5. 가상클래스 선택자

:nth-child(n)

:nth-of-type(n)

수열 선택자 추가활용 +

상태 선택자

6. 가상요소 선택자

::selection

::before

::after

👉 CSS 선택자 모음

'📌 Front End > └ CSS3' 카테고리의 다른 글

관련글

티스토리툴바