CSS

가상 클래스 선택자

소개

가상(pseudo) 클래스 선택자는 클래스 선택자는 아니지만 엘리먼트들의 상태에 따라서 마치 클래스 선택자처럼 여러 엘리먼트를 선택할 수 있다는 점에서 붙은 이름입니다. 여기서는 주요 클래스 선택자를 알아봅니다. 

링크와 관련된 가상 클래스 선택자

  • :link - 방문한 적이 없는 링크
  • :visited - 방문한 적이 있는 링크
  • :hover - 마우스를 롤오버 했을 때 
  • :active - 마우스를 클릭했을 때 

위의 선택자는 순서대로 지정하는 것이 좋습니다. 특히 visited의 경우는 보안상의 이유로 아래와 같은 속성만 변경이 가능합니다. 

  • color
  • background-color
  • border-color
  • outline-color
  • The color parts of the fill and stroke properties

 

댓글

댓글 본문
작성자
비밀번호
  1. <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <style>
    a:link{
    color:black;
    }
    a:visited{
    color:red;
    }
    a:hover{
    color:yellow;
    }
    a: active{
    color:green;
    }
    a:focus{
    color:white;
    }
    input:focus{
    background-color:black;
    color:white;
    }
    </style>
    </head>
    <body>
    <a href="https://opentutorials.org">방문함</a>
    <a href="a.com">방문안함</a>
    </body>
    </html>
  2. 배워시
    감사
  3. jgatsby
    수도 클래스.
    가상 클래스 선택자
    특정한 요소가 아닌 어떠한 상태를 꾸며주고자 할때 쓰는 선택자.

    TagName : Status { property }
  4. matheios
    강의 감사합니다~
  5. 임지호
    가상 클래스 선택자 : 클래스 선택자처럼 행동하지만 클래스 선택자는 아닌 선택자(엘리먼트의 특성에 따라 클래스 선택자처럼 몇몇 태그를 그룹핑한다.)
    - hover, active, link, visited등(visited는 보안상의 문제 때문에 일부 속성만 사용 가능)
    * <style>태그에서 위에 있는 것이 우선순위가 높다.
  6. 폭스킴
    focus는 우선순위를 높이기 위해 맨 마지막에 쓴다~
  7. 망고씨
    감사합니다 ㅎㅎ
  8. CSS 클릭맨
    감사합니다. 잘 봤습니다.
  9. GunLoc
    가상클래스 선택자에 클릭관련속성이 있군요.. 유용하네요
  10. Jong O Kim
    감사합니다
  11. 감사합니다!
  12. 감성팔이
    감사합니다!
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기