虛擬類別選擇器 ( 其他、語系 )

這篇教學會介紹一些比較少用的虛擬類別選擇器，例如 :dir()、:lang()、:modal、:scope 等，這些選擇器通常是針對瀏覽器語系、文字對齊方向或一些其他不常出現的元素而設計，對於正規的顯示樣式沒有太大影響，通常都直接使用預設值，不會特別去使用這些選擇器。

「其他、語系」虛擬類別選擇器

下方列出和「其他、語系」有關的虛擬類別選擇器 ( 支援度 All 表示主流瀏覽器都支援 )：

:dir()

「:dir()」表示「文字對齊方向」，使用方式有兩個，分別是「:dir(ltr)」靠左對齊，以及「:dir(rtl)」靠右對齊，預設值使用電腦語系的對齊設定 ( 絕大多數語系都使用 ltr )，使用後會對應到「所有」對齊方式的元素。

下方的範例執行後，上半部設定為 rtl，就會呈現紅色文字，下半部使用預設值 ltr，就會是綠色文字。

線上展示：https://codepen.io/oxxo/pen/pombwQz

<!-- HTML 程式碼 -->
<div dir="rtl">
  CSS 選擇器 ( Selector ) 是 CSS 的核心功能，也是使用或學習 CSS 時最重要的技巧。
  <ul>
    <li>oxxo</li>
    <li>apple</li>
    <li>banana</li>
  </ul> 
</div>
  
<div dir="ltr">
  CSS 選擇器 ( Selector ) 是 CSS 的核心功能，也是使用或學習 CSS 時最重要的技巧。
  <ul>
    <li>oxxo</li>
    <li>apple</li>
    <li>banana</li>
  </ul> 
</div>

<!-- CSS 程式碼 -->
<style>
  body *:dir(rtl) {color: red;}
  body *:dir(ltr) {color: green;}
  /* 效果等同 body * {color: green;} */
</style>

由於 :dir() 是根據元素的 dir 屬性來決定是否套用樣式，所以與 [dir="ltr"] 或 [dir="rtl"] 有著非常類似的效果 ( 連權重都相同 )，不過兩著卻有一個顯著的差異：:dir() 會選擇「所有指定對齊方式的元素」，而 [dir] 則「只會選擇具有 dir 屬性的元素」。

下方的範例執行後，設定 :dir(rtl) 的選擇器不只會選擇 div，還會一起選擇子元素 ul，所以文字都會變成紅色，但如果使用 [dir="rtl"] 就只會選擇 div，內層子元素 ul 則不會被影響 ( 因為 ul 沒有 dir 屬性 )。

線上展示：https://codepen.io/oxxo/pen/ExzyXdg

<!-- HTML 程式碼 -->
<div dir="rtl">
  CSS 選擇器 ( Selector ) 是 CSS 的核心功能，也是使用或學習 CSS 時最重要的技巧。
  <ul>
    <li>oxxo</li>
    <li>apple</li>
    <li>banana</li>
  </ul> 
</div>
  
<div dir="ltr">
  CSS 選擇器 ( Selector ) 是 CSS 的核心功能，也是使用或學習 CSS 時最重要的技巧。
  <ul>
    <li>oxxo</li>
    <li>apple</li>
    <li>banana</li>
  </ul> 
</div>

<!-- CSS 程式碼 -->
<style>
  body * {background: yellow;}          /* 所有元素背景：黃色 */
  body *:dir(rtl) {color: red;}         /* 靠右對齊的所有元素：紅色文字 */
  body *[dir="rtl"] {background: pink;} /* 具有 dir="rtl 屬性的元素：粉色背景 */
  body *:dir(ltr) {
    color: red;                         /* 靠左對齊的所有元素：紅色文字 */
    background: pink;                   /* 靠左對齊的所有元素：粉色背景 */
  }
</style>

:lang()

「:lang()」表示「語系」，使用方式為「:lang(語系)」，語系名稱不區分大小寫，例如 en 和 EN 和 En 都會指向 lang="en" 的元素，當 HTML 元素套用了 lang 屬性後，內容子元素會全部都套用同樣屬性。下方列出常見的語系名稱：

舉例來說，語系 en 的 div 區塊會呈現粉色，語系 ja 的 div 區塊呈現青色，語系 zh-Hant-TW 區塊呈現橘色。

線上展示：https://codepen.io/oxxo/pen/OJYXjvL

<!-- HTML 程式碼 -->
<div lang="en">
  CSS 選擇器 ( Selector ) 是 CSS 的核心功能，也是使用或學習 CSS 時最重要的技巧。
</div>
<div lang="ja">
  CSS 選擇器 ( Selector ) 是 CSS 的核心功能，也是使用或學習 CSS 時最重要的技巧。
</div> 
<div lang="zh-Hant-TW">
  CSS 選擇器 ( Selector ) 是 CSS 的核心功能，也是使用或學習 CSS 時最重要的技巧。
</div>

<!-- CSS 程式碼 -->
<style>
  div:lang(en) {background: pink;}
  div:lang(ja) {background: cyan;}
  div:lang(zh-Hant-TW) {background: orange;}
</style>

除了單純套用語系樣式，有時也會應用到 q 元素，讓不同語系的 q 元素會產生不同嵌套的「標點符號」，下方的例子執行後，英文語系會使用「'、"、<>」互相嵌套，日文語系會使用「{}、[] 和 ()」，繁體中文語系則是「「」、 『』、【】」。

線上展示：https://codepen.io/oxxo/pen/WNBxEKw

<!-- HTML 程式碼 -->
<div lang="en">
  <q>第一層<q>第二層<q>第三層</q>第二層</q>第一層</q>
</div>
  
<div lang="ja">
  <q>第一層<q>第二層<q>第三層</q>第二層</q>第一層</q>
</div>
  
<div lang="zh-Hant-TW">
  <q>第一層<q>第二層<q>第三層</q>第二層</q>第一層</q>
</div>

<!-- CSS 程式碼 -->
<style>
  div:lang(en) q {
    quotes: "\"" "\"" "\'" "\'" "<" ">";
  }
  div:lang(ja) q {
    quotes: "{" "}" "[" "]" "(" ")";
  }
  div:lang(zh-Hant-TW) q {
    quotes: "「"  "」" "『" "』" "【" "】";
  }
</style>

:modal

「:modal」表示「dialog 元素樣式」，主要針對 dialog 類型的表單元素，舉例來說，點擊按鈕後會開啟 dialog 對話視窗，而 :modal 就能設定相關樣式。

線上展示：https://codepen.io/oxxo/pen/mdYEMZb

<!-- HTML 程式碼 -->
<button onclick="favDialog.showModal();">開啟對話視窗</button>
<dialog id="favDialog">
  <form method="dialog">
    <p>OXXO.STUDIO</p>
    <button>關閉</button>
  </form>
</dialog>

<!-- CSS 程式碼 -->
<style>
  :modal {
    background: orange;
    border: 2px solid black;
    color: red;
  }
</style>

:scope

「:scope」表示「指定作用域」，大多數的狀況都與 :root 相同，但因為 :scope 具有不支援 IE 的特性，有時會用來區分 IE 和其他瀏覽器，下方的範例在 IE 執行時背景會是橘色，在其他瀏覽器執行時則是青色。

線上展示：https://codepen.io/oxxo/pen/eYazGYV

<!-- HTML 程式碼 -->
<ul>
  <li>oxxo</li>
  <li>apple</li>
  <li>banana</li>
  <li>orange</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  ul {background: orange;}      /* IE 會執行 */
  :scope ul {background: cyan;} /* IE 不會執行 */
</style>

:first、:right、:left

「:first、:right、:left」表示「列印的頁面設定」，使用時需要搭配 @page 使用，可使用的樣式屬性只有 margin、padding、border，如果列印的書寫方向是從左到右，那第一頁為 :right，如果方向是從右到左，那第一頁為 :left，用法如下：

@page :right {
  margin: 2in 3in;
}
@page :left {
  margin: 2in 3in;
}
@page :first {
  margin: 2in 3in;
}

小結

這篇教學所介紹的虛擬類別選擇器，都是屬於比較「冷門」的選擇器，當中最實用的可能就是「語系相關」的選擇器，如果有多語系的需求，不妨可以使用看看，其他還有 :fullscreen、:future、:local-link 或 :paused 等更冷門的虛擬類別選擇器，甚至連瀏覽器都還不支援，期望不久的將來可以陸續支援囉～

• W3C 官方參考：https://www.w3.org/TR/2018/SPSD-html5-20180327/disabled-elements.html
• MDN 文件參考：https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～