Frontend/CSS

14. 가상 클래스

예린lynn 2024. 7. 6. 00:36

728x90

동작 가상 클래스

:link : 아직 방문하지 않은 링크에 스타일 적용
:visited : 방문한 링크에 스타일 적용. 기본값이 보라색
:hover : 사용자가 마우스 커서를 요소 위에 올렸을 때 스타일 적용
:active : 사용자가 마우스로 요소를 클릭했을 때 스타일 적용
:focus : 요소에 초점이 맞춰졌을 때 스타일 적용

- 활용 코드

      /* a 태그에 마우스가 올라올 때 */
      a:hover {
        color: white;
        background-color: blue;
      }

      /* 방문한 적이 없는 링크 */
      a:link {
        color: blue;
      }

      /* 방문한 적이 있는 링크 */
      a:visited {
        color: green;
      }

      /* 마우스가 포커스 됐을 때 */
      input:focus {
        border: 5px solid red;
      }

상태 가상 클래스

:target : 문서 내부 링크의 대상에 스타일 적용
:not : 특정 요소를 제외하고 스타일 적용
:enabled : 해당 요소가 사용할 수 있는 상태일 때의 스타일 지정
:disabled : 해당 요소가 사용할 수 없는 상태일 때의 스타일 지정
:checked : 라디오 박스나 체크 박스에서 해당 항목을 선택했을 때의 스타일 지정

구조 가상 클래스

:root : 문서 전체에 적용
:first-child : 부모 안의 모든 요소 중 첫 번째 자식 요소 선택
:last-child : 부모 안의 모든 요소 중 마지막 자식 요소 선택
:nth-chlid(n) : 부모 안의 모든 요소 중에서 n번째 자식 요소 선택. n에 even, odd, 2n, 2n+1, an+b 등 수식 대입 가능
:nth-last-chlid(n) : 부모 안의 모든 요소 중에서 끝에서 n번째 자식 요소 선택
A:nth-of-type(n) : 부모 안에 있는 A 요소 중에서 n번째 요소 선택
A:nth-last-of-type(n) : 부모 안에 있는 A 요소 중에서 끝에서 n번째 요소 선택

- 활용 코드

      /* 2n, even: 짝수행 */
      /* 2n+1, odd: 홀수행 */
      tbody > tr:nth-child(odd) {
        background-color: greenyellow;
      }

가상 요소

::first-line : 지정한 요소의 첫 번째 줄에 스타일 적용
::first-letter : 지정한 요소의 첫 번째 글자에 스타일 적용. 첫 번째 글자는 반드시 첫 번째 줄에 있어야 한다.
::before : 지정한 요소의 내용 앞에 스타일 적용
::after : 지정한 요소의 내용 뒤에 스타일 적용

- 활용 코드

<style>
li.new::after {
        content: "New!!";
        font-size: x-small;
        padding: 2px 4px;
        margin: 0 10px;
        border-radius: 2px;
        background: #f00;
        color: #fff;
      }
    </style>

  <body>
    <div>
      <h1>제품 목록</h1>
      <ul>
        <li class="new">제품 A</li>
        <li>제품 B</li>
        <li class="new">제품 C</li>
      </ul>
    </div>
 </body>

- 실행 결과

제품 목록

제품 A
제품 B
제품 C

728x90