CSS 유사클래스(pseudo-class)

유사클래스란?

- 특정 조건이 발생했을 때 마크업에 추가하는 가상의 클래스

- 가리키거나 or 클릭하는 사용자 행동에 반응해서 적용

 

<a> : 앵커링크

:link : 기본적으로 {color:blue;, text-decoration:under-line;) 글자 파란색, 밑줄이 그어져있다.

:visited : link를 방문하고나서, 변경되는 클래스, (사이트 방문기록, 쿠키를 지우면 다시 원상태로 되돌아온다.)

:hover : 마우스를 올려놨을 때, 반응해서 동작하는 클래스 (마우스가 빠져나오면, 다시 원상태로 되돌아온다.)

              (다른 태그에서도 자주 쓰이는 것이기에 꼭 알아두기!)

:hover {color: green}

:active : 활성화가 됐을 때(=마우스를 클릭하고 있을 때) 반응하는 클래스

:focus : 키보드 tab키 or 마우스로 클릭해서 활성화 된 상태일 때 반응하는 클래스 (*일반적으로 input 태그)

:first-child : 태그가 여러개가 한 태그로 묶여있을 때 첫번째 태그 요소에 적용되는 클래스

:last-child : first-child와 같이 마지막 태그 요소에 적용되는 클래스

 

ex)

li:first-child{font-weight:bold; font-size:30px;}
li:last-child{color:red;}

 

 

 

:first-letter : <p>태그와 같이 첫단어를 항상 대문자로 하고 싶을 때 등 가장 먼저 오는 글자에 적용되는 클래스

:first-line : 가장 첫 번째 줄에 해당하는 부분에 적용되는 클래스 (*줄의 길이가 달라져도 1줄 적용)

:before(=::before) : 문장의 시작전에 오는 클래스 주로 content가 속성을 사용

:after(=::after) : 문장의 끝에 오는 클래스 before와 동일

 

예시)

div::before{
  content: "«";
  color: blue;
}

div::after {
  content: "»";
  color: red;
}

<div>안녕하세요</dlv>