📌 CSS 가상 선택자와 기타 요소 정리!

사용자 동작에 반응하는 가상 클래스

:link - 방문하지 않은 링크에 스타일 적용

기본적으로 a 태그에서는 파란 글자와 밑줄 적용 이를 바꿀 수 있음

 

:visited - 방문한 링크에 스타일 적용

기본적으로 a 태그에서는 보라 글자와 밑줄 적용 이를 바꿀 수 있음

 

:hover - 웹 요소에 마우스 커서를 올려 놓을 때의 스타일 적용

롤오버 효과(rollover), 스포일러

 

:active - 웹 요소를 활성화했을 때의 스타일 적용

누르고 있을 때의 스타일을 지정(링크 클릭)

 

:focus - 웹 요소에 초점이 맞추어졌을 때의 스타일 적용

아이디를 입력하기 위해 텍스트 필드 안에 마우스 커서를 갖다 놓거나 tap을 눌러 초점을 이동했을 때의 스타일을 지정

 

⭐ 정의 순서

무조건 link visited hover active 순서대로 정의해야함.

 

UI 요소 상태에 따른 가상 클래스

:enabled 과 :disabled - 요소를 사용할 수 있을 때와 없을 때의 스타일 지정

 택스트 영역 필드 입력 가능할 떄는 enabled 불가능할때는 disabled

 

:checked - 라디오 박스나 체크 박스에서 해당 항목을 선택했을 때의 스타일 지정

 

구조 가상 클래스

 웹 문서 구조를 기준으로 특정 위치에 잇는 요소를 찾아 스타일을 지정할 때 사용하는 가상 클래스 선택자

 

:root - 문서 전체에 적용하기

html에 적용됨

 

:nth-child(n)와 :nth-last-child(n) - 자식 요소의 위치에 따라 스타일 적용하기

• :nth-child(n) : 앞에서 n번째 자식 요소에 스타일 적용
• :nth-last-child(n) : 끝에서부터 n번째인 자식 요소에 스타일 적용

an+b처럼 수식을 사용할 수도 있는데 이 때 n값은 0부터 차례대로 정수를 대입해 계산

ex) 2n, 2n+1 : 짝수 홀수

 

:nth-of-type(n), :nth-last-of-type(n) - 특정 태그 위치에 스타일 적용하기

•  태그에 따라 앞에서부터 n번째, 뒤에서 부터 n번째
•  <p> 나 <li> 에 좋을지도 모른다

 

:first-child, :last-child - 첫번째, 마지막 자식 요소에 스타일 적용하기

:first-of-type, :last-of-type - 형제 관계 요소의 위치에 따라 스타일 적용

p:first-of-type

 

:only-child, :only-of-type - 하나뿐인 자식 요소에 스타일 적용하기

• :only-child : 부모 요소 안의 자식 요소가 유일하게 하나일 때
• :only-of-type : 자식 요소중 해당 요소가 유일한 요소일 때

 

그 외 가상 클래스

 :target - 앵커 목적지에 스타일 적용하기

 #intro:target{...}

 

:not - 특정 요소가 아닐 때 스타일 적용

p:not(#ex){...}

 

 

가상 요소

내용의 일부만 선택해 스타일을 적용할 때 사용, 콜론 2개 ::

 

::first-line, ::first-letter - 첫 번째 줄, 첫 번째 글자에 스타일 적용하기

첫 번째 글자는 반드시 첫 번째 줄에 있어야함. <br>이 있어 첫 번째 글자가 첫 번째 줄에 없을 경우, 적용할 수 없음

 

::before, ::after - 내용의 앞뒤에 콘텐츠 추가하기

새 글에 new! 박아주는거

<style>
  ul li{
    margin:15px;
  }
  li.hot::after{
    content:"NEW!!";
    font-size:x-small;
    padding:2px 4px;
    margin:0 10px;
    border-radius:2px;
    background:#f00;
    color:#fff;
  }
</style>
<ul>
  <li class="hot">제품A</li>
  <li>제품B</li>
</ul>