【CSS】擬似クラス「構造擬似クラス以外」の使い方の覚書

ニワカが個人的に使いこなせていないCSSを覚えるための個人的メモです。
擬似クラスの「構造擬似クラス以外」の覚書。
「擬似クラス「構造擬似クラス」の使い方の覚書」はこちら

擬似クラス(Pseudo-classes)の概要

擬似クラスは要素内全体に対してスタイルを適用する。

擬似クラスは擬似的にクラスを追加（生成）していると個人的には理解してます。
「擬似要素と擬似クラスの違いの覚書」参照。

CSS3までで勧告されている「構造擬似クラス以外」の擬似クラス。

• リンク擬似クラス (:link,:visited)
• ユーザーアクション擬似クラス (:active,:hover,:focus)
• ターゲット擬似クラス（:target）
• 言語情報擬似クラス（:lang）
• UI要素状態擬似クラス (:enabled,:disabled,:checked, :indeterminate)
• 否定擬似クラス(:not)

リンク擬似クラス (:link,:visited)

リンク疑似クラスは、:linkが未訪問リンクに適用され、:visitedが訪問済みリンクに適用されます。
テキストリンクの色の指定とかによく使うやつです。

要素名:link {
  プロパティ: 値;
}
要素名:visited {
  プロパティ: 値;
}

リンク擬似クラス (:link,:visited)の使用例

リンク擬似クラス (:link,:visited)の使用例をhtmlとcssと共に紹介。

html

<a href="https://www.yahoo.co.jp" target="_blank">YAHOO</a><br />
<a href="https://www.google.co.jp/" target="_blank">Google</a>

css

a:link {
  color:blue;
}
a:visited {
  color:red;
}

実際の表示

上記の例は、未訪問なら青文字、訪問済みなら赤文字で表示されます。

ユーザーアクション擬似クラス (:hover,:active,:focus)の概要

ユーザーアクション擬似クラスは、ユーザーが特定のアクションをしている時に指定した要素に適用されます
:hoverは、ユーザーがポインティングデバイスで示した要素に（指定した要素にカーソルを重ねた時など）に適用される。
:activeは、ユーザーによって実行された要素に（指定した要素にカーソルを重ねて、マウスボタンを押して離すまでの間など）適用される。
:focusは、フォーカスを持つ要素に適用される。入力フォームでカーソルを合わせてテキスト入力できるようになった状態など

要素名:hover {
  プロパティ: 値;
}
要素名:active {
  プロパティ: 値;
}
要素名:focus {
  プロパティ: 値;
}

ユーザーアクション擬似クラス (:hover,:active,:focus)の使用例

ユーザーアクション擬似クラス (:hover,:active,:focus)をhtmlとcssと共に紹介。

html

<a href="#">ダミーテキスト</a><br />
<input type="text" size="20">

css

a:hover {
  color:red;
}
a:active {
  color:green;
}
input:focus {
  background-color: yellow;
}

実際の表示

リンクの上にカーソルを持っていくと赤文字に、リンクを押している間は、緑文字になります。
また、入力欄にカーソルを持っていきクリックすると（入力可能状態）背景が黄色になります。
:hoverはテキストだけでなく、リンク全体に使用したり頻繁に使います。
:focusもあまり使用したことはありませんでしたが、入力している箇所が明示できるので使用すると入力がわかりやすいかもしれませんね。

ターゲット擬似クラス（:target）の概要

アンカーリンクで飛んだ先の要素にスタイルが適用されます。
:nth-last-child(1) と同じ扱い。

要素名:target {
  プロパティ: 値;
}

ターゲット擬似クラス（:target）の使用例

ターゲット擬似クラス（:target）の使用例をhtmlとcssと共に紹介。

html

<a href="#change">ダミーテキスト</a>
<h2 id="change">タイトル</h2>

<!-- 下記リンクを押すとリンク先が非表示に -->
<a href="#invisible">下部を非表示</a>
<h2 id="invisible">タイトル</h2>

css

#change:target {
  background-color: red;
}
#invisible:target {
  display:none;
}

実際の表示

実際にリンクを押すとアンカーリンクの指定先の要素にスタイルが適用される。
上記の例は、最初のはリンクを押すとリンクの指定先の背景が赤に、下の例はリンクの指定先が非表示になります。
上記の例が二つとも同時に適用されないので、二つ目のリンクで非表示にした後に一番目のリンクを押すとテキストはまた表示されます。
アンカーリンクなのでアドレスが変化する点に注意。前のページに戻るつもりが2回以上押さないと戻れないとかになるので。
参照したサイトではアコーディオンのようにコンテンツを表示・非表示されている例もありました。

言語情報擬似クラス（:lang）の概要

言語情報擬似クラス（:lang）は、特定の言語が指定されている要素を対象にスタイルが適用されます。
言語コードは、ja（日本語）、en（英語）、zh（中国語）などがあります。
言語コードは、前方一致なのでen（英語）としてしてもen-US（アメリカ英語）にもスタイルは適用されます。

要素名:lang(言語コード) {
  プロパティ: 値;
}

言語情報擬似クラス（:lang）の使用例

:言語情報擬似クラス（:lang）の使用例をhtmlとcssと共に紹介。

html

<p lang="ja">日本語です。</p>
<p lang="en">英語です。</p>
<p lang="eん-US">アメリカ英語です。</p>

css

p:lang(en) {
  color:red;
}

実際の表示

なかなか、使いどころがわかりませんが多言語サイトなどに使うのでしょうかね。。

UI要素状態擬似クラス (:enabled,:disabled,:checked)の概要

UI要素状態擬似クラス (:enabled,:disabled,:checked)は、ユーザーインターフェース要素にスタイルを適用します。
:enabled擬似クラスは、有効状態にあるユーザーインターフェース要素に。
:disabled擬似クラスは、無効状態にあるユーザーインターフェース要素に。
:checked擬似クラスは、チェックされているユーザーインターフェース要素に。（チェックボックスやラジオボタンがチェックされている状態など）
:indeterminate擬似クラスというのもあり、こちらはユーザーインターフェース要素が不確定の状態の時に（ラジオボタンが一つもチェックされていない状態など）。CSSモジュールではなくHTML5仕様で定義されているということもあり、よくわからないので割愛します。

要素名:enabled {
  プロパティ: 値;
}
要素名:disabled {
  プロパティ: 値;
}
要素名:checked {
  プロパティ: 値;
}

UI要素状態擬似クラス (:enabled,:disabled,:checked)の使用例

UI要素状態擬似クラス (:enabled,:disabled,:checked)の使用例をhtmlとcssと共に紹介。

html

<input type="text" value="有効な入力欄"><br>
<input type="text" value="無効な入力欄" disabled><br>

<input type="checkbox">
<label>チェックボックスです</label>
<input type="checkbox" checked="checked">
<label>チェックボックスです</label>

css

input:enabled {
  color: red;
}
input:disabled {
  background-color: yellow;
}

input[type="checkbox"]:checked + label {
  background-color: red;
}

実際の表示

通常の有効のテキストボックスは赤文字に。disabledで入力無効のテキストボックスは背景を黄色にしています。
また、チェックボックスはチェックを外すとスタイルは適用されません。
input:checkedだとチェックボタン自身にスタイルが適用されるので、例ではラベルにスタイルが適用されるようにしています。

否定擬似クラス(:not)の概要

特定のセレクタ以外のセレクタに適用されるセレクタ。
E:not(s)。sでないセレクタを持つE要素に適用される。

要素名:not(セレクタ) {
  プロパティ: 値;
}

否定擬似クラス(:not)の使用例

否定擬似クラス(:not)をhtmlとcssと共に紹介。

html

<ul>
  <li>ダミーテキスト</li>
  <li>ダミーテキスト</li>
  <li>ダミーテキスト</li>
  <li>ダミーテキスト</li>
</ul>

css

li:not(:first-of-type) {
  border-top: 1px solid #000;
}

ul {
  list-style:none;
  padding: 0;
  margin: 0;
}
li {
  padding: 10px;
}

実際の表示

最初以外のリストの上部に線を入れた例。
:not擬似クラスを使用しなくても実装可能ですが、使用することでシンプルになっています。
基本的には:not擬似クラスは、使用することでよりCSSをシンプルに出来る場面があるようです。

参照ページ

記事にする際に参考にさせていただいたページ。