一些有趣的 CSS 選擇器

本篇要解決的問題

上周看到 The State of CSS 2020，裡面對 2020 年的 CSS 使用狀況做了一些調查統計。在看到「單位 & 選擇器」那部份時，看到好多都沒聽過東西，其中蠻多部份也是受訪者未使用過的。

August 一邊看那些選項，一邊 Google 了一下那些選擇器是做什麼用的，最後選了幾個覺得末來會用到的，整理成這篇。

::selection：文字反白樣式

文件：w3schools

支援度：Can I use

::selection 就是我們滑鼠壓著左鍵，選取了一段文字後的反白狀態。

文件上是寫支援以下樣式：

color, background, cursor, outline

但實際用的時候，寫了 cursor、outline 這二個都沒有反應，因此使用時還是以 background-color、color 這二個為主。

Demo code：

::selection {
  background-color: #42A6F7;
  color: white;
}

結果：反白以下句子可以看到。

Let’s Write – 前端工程師 August 的學習筆記 — solving problems, in simple ways.

::first-letter：每段的第一個字

文件：w3schools

支援度：Can I use

生活上，第一段的第一個字放大或改變造型，這通常在外文紙本上才容易看到。

網頁閱讀畢竟不是紙本，針對首字做樣式總覺得不太必要，偶爾看到有頁面這樣處理，也不太會留意。這次看到了這項，就想說順便記錄一下。

文件上寫支援以下樣式：

font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (只在 float 為 'none' 才有用)
text-transform
line-height
float
clear

實際用了一下後，有些小地方要注意，因為會影響到整行或是整段，比方 line-height、float。

Demo code：

p::first-letter {
  margin: 0 1rem;
  padding: 0 1rem;
  float: left;
  line-height: 1.5;
  background-color: #42A6F7;
  border: 2px solid #167FFF;
  border-radius: 1rem;
  font-size: 2rem;
  color: white;
}

結果：

Let’s Write – 前端工程師 August 的學習筆記 — solving problems, in simple ways.

::marker：li 「點」的樣式

文件：MDN web docs

支援度：Can I use

這是針對 li 的那個「點」作樣式的調整，ol、ul 都可以。

以前遇到那個「點」要改個顏色，會用 ::before 自己刻一個，或是用直接改抓一張圖。但如果頁面上就跟貓咪看不起人類一樣的看不起 IE，就可以直接用 ::marker。

文件上寫支援的樣式有：

字型
color
content

content 這個真的是很有趣，因為 content 本身也有多種玩法，像這篇就結合 content 作了有趣的 Demo：CSS-Tricks

Demo code：

li::marker {
  color: #42A6F7;
  transition: color .4s;
}
li:hover::marker {
  content: '13  ';
  color: #FF442B;
}

結果：

• Let’s Write – 前端工程師 August 的學習筆記
• solving problems, in simple ways.

:target：被選擇的錨點、id

文件：w3schools

支援度：Can I use

我們有時會在頁面上做錨點連結，就是一個區塊寫 id="xxxxx"。當網址後面加上「#xxxxx」，頁面就會直接移到那個區塊上。

:target 就是當這個 id 被錨點連結後要變成的樣式。

這個的 Demo 在上一篇〈用 CSS :target 製作頁籤、手風琴功能〉就有製作完整的範例，主要是 Demo 頁籤、手風琴的功能。

:focus-within：input 影響 form

文件：MDN web docs

支援度：Can I use

:focus-within 是很有趣的選擇器，當 <form> 裡面的 <input> 被 :focus 時，會影響 <form> 的樣式。

文件上直白的說：

表單中的<input>某個地方獲得焦點時，整個表單的<form>元素都可被高亮。

CodePen 上有一個不錯的 Demo：Simple Responsive Form with :focus-within

不過操作後會發現，畢竟是 :focus 才會影響，所以當遇到 radio、checkbox 在勾選的時候，就會看見閃一下、閃一下的（就像單身工程師跑到耶誕城一樣）。

這個選擇器實用嗎？

August 是覺得，與其改變整個 <form> 的樣式，直接在 input 上用 :focus 的效果是比較能讓使用者專心填寫的。

:placeholder-shown：placeholder 還在時

文件：MDN web docs

支援度：Can I use

我們一般製作表單，為了提示使用者這個 input 可以怎麼填寫，都會用 placeholder 來說明，像這樣：

裡面的「電子郵件地址或手機號碼」、「密碼」都是寫在 placeholder 上的，當使用者在這些 input 上輸入文字，這些提示用的 placeholder 就會自行消失。

:placeholder-shown 就是「placehloder 還存在時」的樣式。

Demo code：

input {
  padding: .5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  width: 300px;
  border: 1px solid #42A6F7;
  border-radius: .5rem;
  font-size: 1rem;
  outline: 0;
}
input:placeholder-shown {
  border: 2px solid #167FFF;
}

結果：在 <input> 上隨便輸入文字就可以看見框線變細。

以上，就是 August 覺得有趣，或是有想到未來可以怎麼用的 CSS 選擇器。

在 The State of CSS 2020 上還有列出許多沒聽過的，但，都是在 Google 後發現支援度太低，或是還想不到會有什麼狀況會要用到，因此就沒整理在這篇。

想更深入的朋友就請自行點進去看囉。

Summary

Article Name

一些有趣的 CSS 選擇器

Description

本篇大綱：本篇要解決的問題。selection 文字反白樣式。first-letter 每段的第一個字。marker li 「點」的樣式。target 被選擇的錨點、id。focus-within input 影響 form。:placeholder-shown。

August

Augustus

Let's Write

Let's Write

https://letswritetw.github.io/letswritetw/dist/img/logo_512.png