가상 요소/클래스 선택자 사용하기

 

 

 

---

 

가상 요소 선택자와 가상 클래스 선택자는 무엇인가?

 

 

---

 

 

 

 

가상 요소 선택자 (Pseudo-elements)

 

--

가상 요소 선택자는

CSS에서 특정 요소의 부분에 스타일을 적용할 때 사용한다.

 

HTML 문서에 명시적으로 작성된 구성 요소는 아니지만,

마치 존재하는 것처럼 취급하여 선택하는 선택자 지정 방법으로

"::"기호를 통해 기준 선택자와 함께 사용된다.

만약 "기준 선택자"를 생략하면 전체 선택자가 들어간 것으로 적용된다.

 

기본 형식

기준 선택자::가상 요소 선택자 { /* CSS 코드 */ }

 

일부 가상 요소 선택자 종류

 

예시 코드

<style>
   p::before{
      content:'앞앞앞';
   }
   p::after{
      content:'뒤뒤뒤';
   }
</style>

<!-- 생략 -->

<p> 안녕하십니까요. </p>

--

 

 

 

 

가상 클래스 선택자 (Pseuod-class)

 

--

가상 클래스 선택자는

요소의 특정 상태를 이용하여 선택자를 지정하는 방법으로

특정 상태에 있을 때만 요소에 스타일을 적용하기 위한 선택자다.

":" 기호를 사용하여 기준 선택자와 함께 사용된다.

(ex. 마우스가 올라갔을 때만 스타일 적용)

 

기본 형식

기준 선택자:가상 클래스 선택자{ /* CSS 코드 */ }

 

 

링크 가상 클래스 선택자

"a 태그"에서 발생할 수 있는 링크 상태를 이용하여 요소에 스타일을 적용하기 위한 선택자다.

 

대표적인 "가상 클래스 선택자" 종류

 

 

예시 코드

<style>
   a:link{
      color:orange;
   }
   a:visited{
      color:green;
   }
</style>
   
<!-- 생략 -->
   
<a href="#1"> 링크 1 </a>
<br>
<a href="#2"> 링크 2 </a>

링크 주소가 같으면 "링크 1"만 접속해도 "링크 2"까지 접속한 것으로 인식하여 둘 다 "초록"으로 변한다.

 

 

동적 가상 클래스 선택자

사용자의 어떠한 행동에 따라 동적으로 변하는 상태를 이용하여 선택자를 지정하는 방법이다.

 

대표적인 "가상 클래스 선택자" 종류

 

 

예시 코드

<style>
   p:hover{
      color:red;
   }
   button:hover{
      color:red;
   }
</style>
   
<!-- 생략 -->
   
<p> 내용 내용 내용 </p>
<br>
<button> 버튼 </button>

 

 

입력 요소 가상 클래스 선택자

입력 요소의 특정 상태를 이용하여 선택자로 지정하는 방법이다.

 

대표적인 "가상 클래스 선택자" 종류

 

 

예시 코드

<style>
   input:focus{
      color:red;
   }
   input:checked + label{  <!-- 체크박스를 클릭하면 체크된 "input태그"바로 뒤에 있는 "label태그"가 초록색으로 변함 -->
      color:green;
   }
   input:disabled, button:disabled{
      background-color:yellow;
   }
   input:enabled, button:enabled{
      background-color:purple;
   }
</style>
  
<!-- 생략 -->
  
<input type="text">
<br>
<input type="text" disabled>
<br>
<input type="checkbox">
<br>
<button disabled> 버튼 </button>
<br>
<button> 버튼 </button>

 

 

 

구조적 가상 클래스 선택자

HTML 태그의 사용 위치 또는 다른 태그와의 관계에 따라 선택자로 지정한다.

 

대표적인 "가상 클래스 선택자" 종류

 

 

예시 코드

<style>
   p:first-of-type{
      color: red;
   }
</style>
   
<!-- 생략 -->
   
<span> span 0 </span>
<p> 내용 0 </p>			<!-- body 태그의 첫 번째 자식 p태그 -->

<div>
   <span> span 1 </span>
   <p> 내용 1-1 </p>		<!-- div 태그의 첫 번째 자식 p태그 -->
   <p> 내용 1-2 </p>
</div>

<span> span 2 </span>
<span> span 3 </span>
<p> 내용 2 </p>
<p> 내용 3 </p>

 

예시 코드

<style>
   p:nth-of-type(2){
      color: red;
   }
</style>
   
<!-- 생략 -->
   
<p>내용 0</p>
<div>
   <p>내용 1</p>
   <span>span 1</span>
   <p>내용 2</p>         <!--div태그의 자식 요소 중 두 번째 p태그에 스타일 적용--> 
</div>
<div>
   <p>내용 3</p>
   <span>span 2</span>
   <span>span 3</span>
   <p>내용 4</p>        <!--div태그의 자식 요소 중 두 번째 p태그에 스타일 적용--> 
</div>

--

 

 

 

 

주요 가상 클래스 선택자 정리

 

--

동적 상태 관련 선택자

 

 

위치 관련 선택자

 

 

타입과 속성 관련 선택자

 

 

상태 및 기타 선택자

--