概念

分成以下這幾類

1. Interactive states

和使用者即時互動相關的

• :hover
• :active
• :focus、:foucus-within、:focus-visible
• :target：找出 id 屬性和 URL fragment 相同的元素

<article id="content">
    …
</article>

/* 當 url 包含 #content 時，以上元素會套用以下樣式 */
#content:target {
    background: yellow;
}

2. Historic states

和過去紀錄相關

• :link：套用在還沒被造訪過的 a 元素
• :visited：套用已被造訪過的 a 元素

＊避免超連結 pseudo-classes 被覆蓋，建議寫的順序為 LVHA：:link -> :visited -> :hover -> :active

3. Form states

和表單元素有關的

• :disabled、:enabled
• :checked、:indeterminate
• :placeholder-shown：當 placeholder 有值顯示時，選取當下的整個 field 欄位，而不是只有 placeholder 文字本身
• 驗證類：
  • :valid、:invalid
  • :in-range
  • :required、:optional

4. Index & order & occurrence

• :first-child、:last-child
• :only-child
• :first-of-type、:last-of-type
• :nth-child、:nth-of-type
• :only-of-type

5. Finding elements

• :empty：沒有 children 的元素，空格也算是 children
• :is()：符合 selector 的元素
• :not()：排除 selector 中的元素

補充

::placeholder-shown 和 ::placeholder 的差異

圖取自 CSS TRICKS - ::placeholder