CSS

가상 클래스 선택자

소개

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

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

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

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

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

 

댓글

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

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