[CSS] 各種 CSS Pseudo-Class Selector

最近在看一些 CSS 的 pseudo-class selector,有些在瀏覽器支援度已經很普及卻很少看到有人在 CSS 中實際使用,在這紀錄幾個我覺得蠻實用的 selector

提供個總表


  • :empty
    元素中是否有內容(包含空白)。(IE9 以上及其他瀏覽器幾乎都支援)

 

  • :after / :before (IE9 以上及其他瀏覽器幾乎都支援)
    在元素前/後新增擬元素(通常會使用 content 屬性)。
    最簡單的例子,但是這個例子實務上可能不是這麼實際
    實務上,我會比較建議把這種擬元素套到 icon 或是一些比較無結構意義的地方,進而讓 html 減少寫無架構性的元素。(程式碼可能比較長,這邊就不寫)
    例如: clearfixblock 的垂直置中(方法六) 及 tooltip 常用到的三角形

 

  • :enabled / :disabled (IE9 以上及其他瀏覽器幾乎都支援)
    被設置 enabled(enabled=”enabled”)、 disabled (disabled=”disabled”) 的 元素樣式

 

  • :first-child/:last-child (IE7以上及各瀏覽器都支援)
    父元素中,第一個/最後一個子元素符合選擇器的樣式。(看例子比較清楚)

 

  • :first-of-type/:last-of-type (IE9 以上及其他瀏覽器幾乎都支援)
    第一個不同(unique)的元素。(看例子比較清楚)
  • :invalid/:valid (IE10 以上及其他瀏覽器幾乎都支援)
    input 資料格式錯誤/正確時的樣式。

 

  • :lang() (IE7 以上及其他瀏覽器幾乎都支援)
    語系,元素(任何元素)的 lang 屬性值,或是 meta 及 http header 的 lang 欄位。

 

  • :only-child (IE9 以上及其他瀏覽器幾乎都支援)
    當只有一個 child 時的樣式。

 

  • :only-of-type (IE9 以上及其他瀏覽器幾乎都支援)
    只有一個此類型元素時。(看例子比較清楚)

 

  • :optional/:required (IE10 以上及其他瀏覽器幾乎都支援,opera mini 不支援 <select>)
    沒有 required 的輸入欄位樣式。

 

  • :root (IE9 以上及其他瀏覽器幾乎都支援)
    dom 最根節點的元素(網頁的話就是 html),xml 、svg 或其他的 markup 檔案可能會是其他根節點

 

  • ::selection (IE9 以上及其他瀏覽器幾乎都支援,firefox 要加前綴 -moz-,但手機的 opera、sofari 及 chrome 不支援)
    當元素被滑鼠選擇(highlight)時的樣式。

參考資料:

https://www.smashingmagazine.com/2016/05/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements/

Leave a Reply