목차

CSS :active Selector

  • description : CSS :active Selector
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-07-01


The source of this article

CSS :active Selector

Example

활성 링크를 선택하고, 스타일을 지정합니다.

<head>
    <style>
        a:active {
            background-color: yellow;
        }
    </style>
</head>
 
<body>
    <a href="https://www.w3schools.com">w3schools.com</a>
    <a href="https://www.wikipeida.org">wikipedia.org</a>
    <p><b>Note:</b> The :active selector styles the active link.</p>
</body>

Definition and Usage

:active 선택자는 활성 링크를 선택하고 스타일을 지정하는 데 사용됩니다.

링크를 클릭하면 활성화됩니다.

Tip: :active 선택자는 링크 뿐만 아니라 모든 요소에서 사용할 수 있습니다.

Tip: link 선택자를 사용하여 방문하지 않은 페이지에 대한 링크 스타일을 지정하고
:visited 선택자를 사용하여 방문한 페이지에 대한 링크 스타일을 지정하고
:hover 선택자를 사용하여 마우스를 올렸을 때의 링크에 대한 스타일을 설정합니다

Note: active가 유효하려면 CSS 정의에서 :hover (있는 경우) 뒤에 와야 합니다!

Syntax

:active {
  css declarations;

More Examples

Example

클릭할 때 <p>, <h1> 및 <a> 요소를 선택하고 스타일을 지정합니다.

<head>
  <style>
    p:active,
    h1:active,
    a:active {
      background-color: yellow;
    }
  </style>
</head>
 
<body>
  <h1>Welcome to My Homepage</h1>
  <div class="intro">
    <h2 id="firstname">My name is Donald</h2>
    <p id="hometown">I live in Duckburg</p>
    <p>My <b>best</b> friend is Mickey</p>
  </div>
  <h2>Links:</h2>
  <p>Here are my favorite websites:</p>
  <a href="https://www.w3schools.com">w3schools.com</a>
  <a href="http://www.disney.com" target="_blank">disney.com</a>
  <a href="https://www.naver.com" target="_top">naver.com</a>
  <p><b>Note:</b>Click on the paragraph, headers, and links to see what is getting a style.</p>
  <p><b>Note:</b>In IE7, this example will only work on links.</p>
</body>

Example

방문하지 않은 링크, 방문한 링크, 마우스 오버 링크 및 활성 링크를 선택하고 스타일을 지정합니다.

<head>
    <style>
        /* unvisited link */
        a:link {
            color: crimson;
        }
 
        /* visited link */
        a:visited {
            color: green;
        }
 
        /* mouse over link */
        a:hover {
            color: red;
        }
 
        /* selected link */
        a:active {
            color: dodgerblue;
        }
    </style>
</head>
 
<body>
    <p>Mouse over and click the link: <a href="https://www.w3schools.com">w3schools.com</a></p>
</body>

Example

링크를 다양한 스타일로 설정합니다.

<head>
  <style>
    a.ex1:hover,
    a.ex1:active {
      color: red;
    }
 
    a.ex2:hover,
    a.ex2:active {
      font-size: 150%;
    }
 
    a.ex3:hover,
    a.ex3:active {
      background: red;
    }
 
    a.ex4:hover,
    a.ex4:active {
      font-family: monospace;
    }
 
    a.ex5:visited,
    a.ex5:link {
      text-decoration: none;
    }
 
    a.ex5:hover,
    a.ex5:active {
      text-decoration: underline;
    }
  </style>
</head>
 
<body>
  <p>Mouse over the links to see them change layout.</p>
  <p><a class="ex1" href="default.asp">This link changes color</a></p>
  <p><a class="ex2" href="default.asp">This link changes font-size</a></p>
  <p><a class="ex3" href="default.asp">This link changes background-color</a></p>
  <p><a class="ex4" href="default.asp">This link changes font-family</a></p>
  <p><a class="ex5" href="https://www.naver.com">This link changes text-decoration</a></p>
</body>
, , ,