CSS

가상 클래스 선택자

소개

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

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

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

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

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

 

댓글

댓글 본문
작성자
비밀번호
  1. 푸른하늘
    9일차 공부 감사합니다
  2. 이경일
    link
    visited
    hover
    focus
    가상선택자는 지시대상의 행위에 대한
    반응을 설정할 수 있게 한다.
  3. Noel J Park
    가상 클라스 선택자가 있다는 것을 기억만 하고 넘어기가 왠지 불안하지만 완료요 ㅋ
  4. 밤토리맘
    ㅜㅜ 왜 저는 링크에서 포커스가 안먹히는지 탭을 눌러도 박스로 보여지지가 않고 탭을 누르면 자꾸 웹페이지 url이 선택되어지네요.. ㅠㅠ흑
  5. 오빠는다르다
    감사합니다~!!!!
  6. 프로그래밍초보
    ㅋㅋㅋㅋ hover랑 active설명하실때 우왕자왕하시는 모습 웃기네요 ㅋㅋㅋ
  7. 풋사과
    ???
  8. 강지후
    강의 완료 20170713
  9. focus
    hover
    vistied
    가상선택자 개념 존재
  10. 쿠쿠다스
    감사합니다
  11. 하드레인
    감사합니다 ^^ 열심히 공부할겠습니다
  12. 14번째
    5.6.
  13. php가 첫취업?
    css부터...어려움이 느껴집니다 ㅜㅜ
  14. <!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>
  15. 배워시
    감사
  16. jgatsby
    수도 클래스.
    가상 클래스 선택자
    특정한 요소가 아닌 어떠한 상태를 꾸며주고자 할때 쓰는 선택자.

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