[CSS] ⭐ CSS Selectors (2) | Persudo Classes (가상 클래스)

Pseudo Classes (가상 클래스)

➡️ 선택자 끝에 붙여 상태를 특정하는 키워드

이것을 통해 체크된 체크박스나 커서를 올려둔 요소  등을 선택한다.  

모디파이어 혹은 키워드는 :로 시작한다. 가상 클래스를 사용한다는 걸 알려면 :를 입력해야한다. 

 

 

하이퍼링크 스타일링

/* Styling links */
a {
  color: #3a86ff;
}

단순히 앵커 태그를 지정해서 하면 안된다. 대신에 앵커의 가상 클래스를 지정해서 하면 된다.  그래야 다른 상태를 타겟팅할 수 있기 때문이다.

 

스타일을 지정하려면 3가지 방법

• link pseudo class (링크 가상 클래스)

a:link {
  color: #3a86ff;
}

기본적으로 모든 앵커 요소를 대상으로 한다. href 속성을 가지고 있다. 실제로 앵커를 지정할 수 있다는 점이 중요하다. 따라서 href 속성이 없는 요소이다. 따라서 링크 가상 클래스를 지정하면 실제 링크만 타겟팅된다. 

• visited pseudo class(방문한 가상 클래스)

a:visited {
  color: #f5b700;
}

방문했던 링크에만 색상이 다르게 표시된다. 

• hover pseudo class (호버 가상 클래스)

a:hover {
  color: ##8338ec;
}

마우스를 가리키면 스타일 효과있다. (밑에 자세한 설명있다.)

• active pseudo class( 활성 가상 클래스)

a:active {
  font-style: italic;
}

(밑에 자세한 설명있다.)

 

4가지의 순서가 중요하다. 항상 링크 > 방문 > 호버 > 활성 순서이다. LVHA로 암기하면 쉽다.

---

:hover 

선택지를 바꿔준다.

➡️ 모든 앵커 태그를 선택한 뒤 커서가 올려있는 특정 상황에서의 효과를 설명해준다. 

커서를 올려 두었을 때 특정한 반응이 아닌 다른 시각적 효과를 통해 상호작용할 수 있는 방식으로 널리 사용된다.

button:hover {
    background-color: #e85a4f;
    color:white;
}

.post button:hover {
   color: white; 
   background-color: #cc5612;
}

두번째의 코드블럭의 .post button:hover처럼 작성할 경우 클래스 포스트와 같이 있는 포스트 안에 있는 버튼 ㅜ이에 커서를 두면 작동하지만 다른 버튼에서는 작동하지 않는다. 앵커태그에서도 적용가능하다.

↓

:active 

➡️ 활성화되었을 때 다른 색이나 상태를 부여하는 것

.post button:active {
    background-color: 540b0e;
}

:nth-of-type()

➡️ 형제 그룹 내 위치에 따라 선택할 수 있게 하는 것

()안에 몇번째 변수가 선택될지 적어야한다. 6개의 섹션이 있으면 그 중 3번째를 택하고 싶다. 그러면 nth-of-type(3)을 입력하면 된다. 괄호 안에 3n을 적으면 매 3번째를 선택하게 된다.

.post:nth-of-type(3) {
    background-color: #540b0e;
}