CSS : 선택자(selector) 종류와 사용법(css3포함)
   CSS & SCSS

CSS : 선택자(selector) 종류와 사용법

 

 

★선택자 기본 작성방법

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

 

 

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. 자식 선택자

* 특정 태그에 묶인 자식 요소를 선택 시 사용합니다.

* > (꺽쇠)로 표현합니다.

h1 > em { background-color:yellow; }
<h1>
	<em>em</em><!--적용대상-->
</h1>

4. 자손 선택자

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

* 한 칸 공백으로 표현합니다.

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>

 

5. 인접형제 선택자

* 특정 태그의 다음 형제 요소를 선택합니다.

* +(더하기)로 표시합니다.

h1+p { background-color:yellow; }
<h1>h1</h1>
<p>selector</p><!--적용대상-->
<p>selector</p>
<p>selector</p>

 

6. 형제선택자

* 특정태그에 다음에 오는 모든 형제들을 선택합니다.

* ~(물결)로 표시합니다.

h1 ~ p { background-color:yellow; }
<h1>h1</h1>
<p>selector</p><!--적용대상-->
<p>selector</p><!--적용대상-->
<p>selector</p><!--적용대상-->

 

 

 

7. 그룹선택자

* 2개 이상의 선택자를 묶을 때 사용합니다.

* ,(콤마)로 표시합니다.

.box p,
.box h2, 
.box a {
	background-color:yellow;
}
<div class="box">
  <p>1</p><!--적용대상-->
  <h2>2</h2><!--적용대상-->
  <a href="#">3</a><!--적용대상-->
</div>

 

 

8. 가상클래스선택자

 

8-1. 수열선택자 nth-child

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

<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; }

 

 

8-2. 수열선택자 nth-of-type

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

<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; }

 

 

8-3. 수열선택자 추가활용 +

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

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

* :nth-last-child , :nth-last-of-type 특정 부모의 마지막에서 n번째 대상을 선택합니다.

* (odd) , (even) , (2n) , (2n+1)

nth-뒤 괄호에 들어가는 값 입니다.

특정 부모의 홀수, 짝수 또는 n의 배수에 해당하는 대상을 선택합니다.

 

 

 

8-4 상태선택자

* 주로 a, button, input 등에 사용하는 선택자입니다.

* :hover 마우스 올렸을 때

* :active 활성화했을 때

* :visited (링크) 방문했을 때

* :focus 커서를 놓았을 때(input 활성화)

a:hover {background-color:yellow;}
button:active {background-color:pink;}
input:focus {background-color:beige;}
<a href="#">link</a>
<button type="button">button</button>
<input type="text">

 

8-5. 그 외

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

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

 

 

* ::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>

 

 

* ::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>

 

9. 속성선택자

* 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">

 

 

 

 

 

CSS 선택자 모음

CSS 선택자 의미 적용 예시
h1 태그선택자 ex) h1 { color:blue; }
* 전체 선택자 (애스터리스크) ex) * { color:blue; }
h1[title] 속성선택자 ex) h1[title] { color:blue; }
span[class="ex"] 속성 값선택자 ex) span[class="ex"] { color:blue; }
* [ lang^="en"] 속성 값 시작선택자 ex) span[class^="e"] { color:blue; }
* [ lang$="php"] 속성 값 종료선택자 ex) span[class$="h"] { color:blue; }
* [ lang*="hello"] 속성 값 전체선택자 ex) span[class*="hello"] { color:blue; }
.class 클래스선택자 ex) .class { color:blue; }
#id 아이디 선택자 ex) #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></td> td:empty { background:gray; }  
요소명:not( )

 괄호 안에 지정된 셀렉터와는 일치하지 않는 요소에 스타일을 적용한다.  
class="sample"이 지정되어 있지 않은 p에 스타일을 적용하는 예시) p:not(.sample) { color:navy; }  
요소명::first-line 지정한 요소의 맨 첫 줄에 스타일을 적용합니다.  
요소명::first-letter 지정한 요소의 맨 첫 문자에 스타일을 적용합니다.  
요소명::before 요소명::after  
선택자 선택자 부모 요소에 포함되는 자식 요소에 스타일을 적용합니다.  
선택자 > 선택자 부모 요소 직후에 자식 요소에 스타일을 적용합니다.  
선택자 + 선택자 동일한 부모를 가지는 형제 관계에 요소(직접 동생 요소)에 스타일을 적용합니다.  
선택자~선택자

 동일한 부모를 갖는 형제관계에 요소 중 어떤 요소의 다음에 나타나는 요소들에 스타일을 적용합니다.  
바로 다음에 나타나는 요소(직접 동생 요소)인지 아닌지는 묻지 않습니다.  

 

  Comments,     Trackbacks
TODAY TOTAL
WEB'sYN's Blog : Powered by and Designed by Lawlite

티스토리툴바