2022 IT 鐵人賽 [ Day 5 ] [ CSS ] — Pseudo-classes 偽類 (1)

今天是第五天，翻了一下我的最愛，其中有個書籤存了 Pseudo-classes 偽類，所以今天來整理有哪些 Pseudo-classes 偽類囉！

Pseudo-classes 偽類

是用來表示元素的特殊狀態，以一個冒號 “ : ” 為開頭，後面加上名稱。例如 a:hover ，來表示當滑鼠滑過 a 元素的狀態。
有一些偽類是互斥的，而有一些是可以同時應用在同一個元素。

以下是以 W3C 的分類依序介紹

Dynamic pseudo-classes

Dynamic pseudo-classes 是根據元素的名稱、屬性或內容以外的特徵來對元素進行分類，原則上這些特徵不能從 document tree 中推導出來，也不會出現在 document source 或 document tree。

The link pseudo-classes
- :link
該連結尚未被訪問過，a:link
- :visited
該連結已經被訪問過，a:visited

一段時間後，瀏覽器可能會將已被訪問過的連結重設回未訪問過。
這兩個偽類是互斥的。

The user action pseudo-classes
- :hover
當滑鼠懸浮在元素上時
- :active
當滑鼠按下元素時，常用於 <a>
- :focus
當滑鼠聚焦在元素時，常用於表單元素

這些偽類不互斥。
元素可以同時應用 :visited、:active 或是 :link、:active。

.user-action:hover {
 background-color: blue;
}
.user-action:active {
 background-color: yellow;
}
.dynamic-pseudo input:focus {
 background-color: red;
}

:hover

:active

:focus

The target pseudo-class

- :target
在 URL 最後帶有 # anchor identifier，這個 anchor identifier 會連結到文件中的元素，而這個元素便是目標元素

// HTML
<div class=”target-pseudo”>
 <h3>The target pseudo-class</h3>
 <a href=”#box1">to box1</a>
 <a href=”#box2">to box2</a>
 <div id=”box1">This is box1.</div>
 <div id=”box2">This is box2.</div>
</div>
// CSS
:target {
 background-color: orange;
}

點選 to box1，會連結到文件中的 id 為 box1 的元素，該元素為 target

點選 to box2，會連結到文件中的 id 為 box2 的元素，該元素為 target

The language pseudo-class

- :lang(language code)
選擇為該語系的元素，例如 :lang(en)

The UI element states pseudo-classes

- :enabled
表示處於啟用狀態的元素，主要用於表單的元素
- :disabled
表示處於禁用狀態的元素，主要用於表單的元素
- :checked
被選取的表單元素，用於 <input> 元素的 radio、checkbox 以及 <option> 元素
- :indeterminate
不確定狀態的表單元素

.UI-pseudo input:enabled {
 background-color: yellow;
}
.UI-pseudo input:disabled {
 background-color: gray;
}
.UI-pseudo input[type=”radio”]:checked {
 width: 30px;
 height: 30px;
}
.UI-pseudo option:checked {
 background-color: green;
}

Codepen

明天接續 Structural pseudo-classes ~

參考資料：
W3C — Pseudo-classes
W3schools — Pseudo-classes
MDN — Pseudo-classes

文章同步更新於 2022 IT鐵人賽