【CSS FAQ】偽元素 (pseudo element) 和偽類 (pseudo class) 差在哪？

有時候 CSS 裡會出現單冒號 (:) 和雙冒號 (::)
單冒號 (:) 是用在偽類
雙冒號 (::) 則是用在偽元素
而我們也把偽類和偽元素默默背起來
直到有一天，突然被問了一個問題
偽類和偽元素到底差別在哪？
又怎麼去做區分呢？
才發現好像講不太出來耶 XD

在開始之前… 請看這裡

在開始進入很容易看不懂的世界前，我想要先訴說我理解的方式。

• 偽類 (pseudo class) 就是在選已經存在的東西，比方說 a:hover 就是選了已經存在的 <a> 的某一個狀態
• 偽元素 (pseudo element) 就是在創造一個新的假元素，因為他不在 DOM 裡面，而是創造的了一個我們看不見的元素。比如說 ::first-line，第一行並沒有被任何的 tag 包住，所以在選取的過程就像是用了一個看不到的 tag 把第一行包起來，所以才選得到這行。

See the Pen CSS FAQ pseudo element by Candy (@stringpiggy) on CodePen.

偽類 (Pseudo Class)

W3C 百科裡面提到

Pseudo-classes are used to provide styles not for elements, but for various states of elements.

舉例來說一個超連結會有很多狀態像是滑鼠移到上面的 :hover，點下去的 :active 等，這些都是表示這個連結的狀態。前面這裡很好懂，至於 :nth-child() 等等不太像選取狀態樣子的選擇器怎麼也被歸類到偽類裡面來呢？

這時候就要看 W3C 的定義了

The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.

表示狀態的偽類我們應該很好理解，反正這個狀態不存在 DOM 裡面～
那後面的 “simple selectors” 到底再說啥！？所以首先要先知道哪些東西是 “simple selectors”，根據 W3C 我們得知有以下這幾種

• type selector (h1, p, div)
• universal selector (*)
• attribute selector (img[alt])
• class selector (.class)
• ID selector (#id)
• pseudo-class (:)

所以說只要是前面那幾種都選不到的東西，就是 pseudo-class 要去解決的問題。

偽元素 (Pseudo Element)

W3C 百科裡面提到

Pseudo elements differ from pseudo-classes in that they don’t select states of elements; they select parts of an element.

也就是說我們選的是這個元素的某個部分。比較需要注意的地方就是每一個選擇器只能使用一個偽元素。至於想要看詳細的定義可以到參考資料的連結裡面，都貼來這裡就沒意思啦～
常見的偽元素有

• ::first-line：選取第一行
• ::first-letter：選取第一個字
• ::before：從選取元素的前面插入東西
• ::after：從選取元素的後面插入東西（這兩句怎麼好像有點怪怪 der）
• ::selection：選取文字反白後

（註解：第一行是「大家好！」不是「因家好！」唷 XD）

See the Pen RapJEY by Candy (@stringpiggy) on CodePen.

結語

總之如果有些東西太抽象，其實會用就好了～知道自己要選什麼東西，對什麼東西進行操作就可以囉！這是之前被學生問到我才開始仔細思考的問題，現在就一併瞭解囉：）教學相長咩～

參考資料

• W3C – Selectors Level 3
• W3C – Advanced CSS selectors
• Stack Overflow – What is the difference between a pseudo-class and a pseudo-element in CSS?