[CSS] その他の疑似選択子 - link, visited, target, enabled, disabled, not, active, hover, focus

Study / Javascript, Jquery, Css    作成日付 : 2019/12/10 07:31:28   修正日付 : 2019/12/10 07:32:01

こんにちは。明月です。


今回でCSS選択子の整理が全て終わると思います。今日、紹介する選択子の使用頻度はよく使いますが、よく使わない。つまり、ウェブサービスのスタイルよって違いますが、よく使うところには使いますが、使わないところは全然使わない、その選択子です。

<!DOCTYPE>
<html>
  <head></head>
  <body>
    <a href="#one">選択１</a><br />
    <a href="#two">選択２</a><br />
    <a href="#three">選択３</a><br />
    <div id="one">選択１</div><br />
    <div id="two">選択２</div><br />
    <div id="three">選択３</div><br />
    <input type="text"><br />
    <input type="text" disabled="disabled"><br />
    <input type="checkbox" checked="checked"><br />
    <input type="text" value="hover"><br />
    <input type="text" value="focus"><br />
  </body>
</html>

a:link {
  color:red;
}
a:visited {
  color:pink;
}
:target {
  color:blue;
  background-color:red;
}
input:enabled {
  background-color:blue;
}
input:disabled {
  background-color:red;
}
input:hover {
  color:white;
}
input:focus {
  color:yellow;
}

上の例をみれば、３つの「a」タグと「div」タグ、そして５つの「input」タグがあります。

先、「a」タグの「link」、「visited」は「link」タグによっては一回もクリックしなかった場合の「a」タグを選択、「visited」は一回以上にクリックした場合の「a」タグを選択することです。

つまり、初めは赤色の「a」タグが３つありますが、「選択１」をクリックしてしまうと「選択１」の「a」タグはピンク色になりますね。


「:target」は「a」タグで「id」によってフォーカスされたものを選択するものです。つまり、ブラウザのアドレスに「#id」名が指しているものが選択されます。

「:enable」と「:disabled」は「input」タグで「diabled」属性が「disabled」か「none」かの選択子です。タグの属性で「enabled="enabled"」とはありませんので、「disabled="disabled"」がなければ、「:enabled」の対象、あれば「:disabled」の対象になります。


「hover」はマウスのイベントによって選択するものです。「hover」は要素でマウスが上にあると選択されます。つまり、テキストボックスの上にマウスを置くとテキストが白色になりますね。

「focus」の場合はテキストボックスの場合、キーボードのカーソルがテキストボックスにあると選択する選択子です。テキストで入力がおわり、他のことを選択するとこの選択子は解除してしまいます。

ここまでCSSの選択子に関してほとんど纏めて説明しました。

CSSの選択子はJavascriptやJqueryでも同じ形式で選択子を使うので「CSS選択子」はウェブで重要な部分だと思います。

◀前の投稿[CSS] 疑似要素選択子 - fist-line, first-letter, before, after
次の投稿▶[CSS] 文字スタイル
#css,#selector
「Study / Javascript, Jquery, Css」の他投稿
最新投稿