WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > セレクタ一覧 > 動的疑似クラス セレクタ

動的疑似クラス指定方法

動的疑似クラスを使用するとマウスやキーボードの操作などの操作により要素に適用されるスタイルシートを動的に切り替え可能となります。
一般的には<a>要素(タグ)に指定されますが、<a>要素(タグ)以外でも利用可能です。

cssセレクタの書き方左記例の意味
.cl1:link { colore: red; }未訪問のリンクは赤色の文字にする
.cl2:visited { color: blue; }訪問済みのリンクは青色の文字にする
.cl3:active { color: green; }クリック中は緑色の文字にする
.cl4:hover { font-size: 200%; }マウスオーバー時はフォントサイズを大きくする
.cl5:focus{ border: 1px solid red; }フォーカスがある場合は赤色の枠線とする
« 疑似要素セレクタ
主要セレクタ一覧
ターゲット疑似クラス »
広告

「:link」「:visited」「:active」は<a>タグで利用されます。
「リンク色」や「下線(アンダーライン)を消す」などで多く利用されます。


<style type="text/css">
  a:link    { color: red; }    /* 未訪問リンクは赤色文字にする       */
  a:visited { color: blue; }   /* 訪問済みのリンクは青色の文字にする */
  a:active  { color: green; }  /* クリック中は緑色の文字にする       */
  .cl1:link { text-decoration: none; } /* cl1クラスのリンクは下線を付けない */
</style>

<body>
<p><a href="https://www.cman.jp/" target="_blank">リンク</a></p>
<p><a href="http://www.cman.co.jp/" target="_blank" class="cl1">リンク(下線なし)</a></p>
</body>
ページTOP

動的疑似クラス[:hover][:focus]

「:hover」「:focus」はマウスオーバー、フォーカス取得で適用するスタイルシートを適用できます。


<style type="text/css">
  .cl1:hover { color: red; }              /* マウスオーバーで赤文字にする   */
  .cl2:hover { background-color: blue; }  /* マウスオーバーで背景を青にする */
  .cl3:focus { background-color: #00ffff; } /* フォーカスで背景を薄青にする   */
</style>

<body>
<p class="cl1">マウスを合すと赤文字に変わります</p>
<p class="cl2">マウスを合すと背景が青に変わります</p>
<p class="cl1 cl2">マウスを合すと赤文字で背景が青に変わります</p>
<p><input type="text" value="フォーカスで背景色が薄青になります" class="cl3"></p>
</body>
ページTOP

動的疑似クラスを組み合わせると・・・

<a>要素(リンク)をボタンのように見せたりすることもできます。


<style type="text/css">
  .cl1 {
     display: inline-block;
     padding: 10px;
     text-decoration: none;
  }
  .cl1:hover { 
     box-shadow: none;
  }
  .cl1:link {
     background-color: azure;
     box-shadow: 5px 5px;
  }
  .cl1:visited {
     background-color: pink;
     box-shadow: 5px 5px rgb(204, 51, 51);
  }
</style>

<body>
<p><a href="./dummy1.html?xx" target="_blank" class="cl1">ここは&lt;a&gt;タグです。訪問すると色が変わります</a></p>
<p><a href="./dummy2.html?xx" target="_blank" class="cl1">ここは&lt;a&gt;タグです。訪問すると色が変わります</a></p>
</body>
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン