仮想クラスセレクタ

■概要

セレクタの後ろに:仮想イベントを付けるとあるイベントごとに適用するスタイルを設定することができます。それらを疑似クラスと言います。

:link – 訪問したことないリンク

:visited – 訪問したことあるリンク

:hover – マウスを上に載せた場合

:active – マウスをクリックした場合

:focus – フォーカスした場合

:first – 最初の要素

:last – 最後の要素

:first-child – 一番目の子要素

:last-child – 最後の子要素

:nth-child(2n+1) – 奇数番目の子要素

上記は代表的な仮想クラスです。定義されている仮想クラスを効果的に使うとHTML,CSS,javaScriptのコートをシンプルにすることができます。

■使用方法

.some-box:hover { background: red; }
input.no-border:focus { border: none; }
.container-box:last-child { margin-right: 0; }

■例

<html>
<head>
　<style>
　　.box{ background-color: #09c; padding: 10px; margin-bottom: 20px; }
　　.hover-box:hover{ background-color: orange; }
　　.focus-input:focus{ background: yellow; }
　　.container > div{
　　　margin-top: 20px;
　　　width: 100px;
　　　height: 100px;
　　　float: left;
　　　background-color: orange;
　　}
　　.container > div:nth-child(2n+1) { background-color: green; }
　</style>
</head>
<body>
　<div class=”box hover-box”>
　　マウスを載せてみてください。
　</div>
　<input class=”focus-input” type=”text” value=”クリックしてみて”>
　<div class=”container”>
　　<div></div>
　　<div></div>
　　<div></div>
　　<div></div>
　　<div></div>
　　<div></div>
　</div>
　<div style=”clear: both”></div>
</body>
</html>

出力結果

マウスを載せてみてください。

当サイトは広告を含めています。広告のクリックによる収益は全て当サイトの管理、維持、コンテンツ製作に使われます。