[css] (pseudo-class) 가상 클래스

CSS / PSEUDO-CLASS

Pseudo-Class

 

• 선택자에 가상 클래스를 사용하여 해당 요소의 특정 상황만을 선택할 수 있다.
  
  
• 선택자 뒤에 : 을 붙혀 원하는 상황을 선택한다.

---

가상 클래스의 종류

 

• first-child, nth-child(n/even/odd), last-child 
  -> 요소가 부모의 특정 번째 요소일 때를 선택
• first-of-type, nth-of-type(n/even/odd),last-of-type
  -> 요소가 같은 타입들 중에서 특정 번째 요소일 때를 선택

※ 둘다 동일한 방법으로 사용

예제

<span>
<div >1</div>
<div >2</div>
<div >3</div>
</span>

/* span 하위의 첫번째 div */
span > div:first-child{
  border: solid 1px;
}
/* div중 짝수만 (우선순위 낮음) */
div:nth-child(even){
  border: solid red 1px;
}
/*n*/
div:nth-child(3){
  border:  solid blue 1px;
}

 

---

• hover
  -> 요소에 마우스가 올라가 있는 상황을 선택
  
  
• link
  -> 해당 요소가 링크일 때를 선택
  
  
• active
  -> 해당 링크가 마우스로 활성화 되고 있는 상황을 선택
  
  
• visited
  -> 해당 링크가 이미 방문했던 링크일 때를 선택
  
  
• focus
  -> 해당 요소가 선택되어 있는 상태일 대

예제

<div >hover</div>
<a href="#">link</a>
<div >active</div>
<a href="#">visited</a>
<input class="red-input" value="포커스를 받으면 빨갛게 됩니다."><br>

/* 마우스 갖다대면 적용 */
div:first-child:hover{
  border: solid 1px;
}
/* 링크일경우 적용 */
a:link{
  color:darkred;
  font-weight: bolder;
  font-size: 1.5rem;
}
/* 클릭하는 시점 ~ 떼는 시점까지 적용 */
div:nth-of-type(2):active{
  font-size: 3.0rem;
}
/* 방문했던 링크일 경우 적용 */
a:nth-of-type(2):visited{
  color:coral;
}
/* 선택된 상태일 경우 적용 */
input:focus{
  background-color: red;
}