一些有趣的 CSS 選擇器

/

本篇要解決的問題

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

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


::selection:文字反白樣式

文件:w3schools

支援度:Can I use

::selection 支援度
::selection 支援度

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

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

color, background, cursor, outline

但實際用的時候,寫了 cursoroutline 這二個都沒有反應,因此使用時還是以 background-colorcolor 這二個為主。

Demo code:

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

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

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


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

文件:w3schools

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

支援度:Can I use

::first-letter 支援度
::first-letter 支援度

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

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

文件上寫支援以下樣式:

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-heightfloat

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 – 前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.


::marker:li 「點」的樣式

文件:MDN web docs

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

支援度:Can I use

::marker 支援度
::marker 支援度

這是針對 li 的那個「點」作樣式的調整,olul 都可以。

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

文件上寫支援的樣式有:

字型
color
content

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

Demo code:

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

結果:

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

:target:被選擇的錨點、id

文件:w3schools

支援度:Can I use

:target 支援度
:target 支援度

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

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

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


:focus-within:input 影響 form

文件:MDN web docs

支援度:Can I use

:focus-within 支援度
:focus-within 支援度

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

文件上直白的說:

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

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

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

這個選擇器實用嗎?

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


:placeholder-shown:placeholder 還在時

文件:MDN web docs

支援度:Can I use

:placeholder-shown 支援度
:placeholder-shown 支援度

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

placeholder 示範,來源:Facebook
placeholder 示範,來源:Facebook

裡面的「電子郵件地址或手機號碼」、「密碼」都是寫在 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> 上隨便輸入文字就可以看見框線變細。


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

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

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

Summary
一些有趣的 CSS 選擇器
Article Name
一些有趣的 CSS 選擇器
Description
本篇大綱:本篇要解決的問題。selection 文字反白樣式。first-letter 每段的第一個字。marker li 「點」的樣式。target 被選擇的錨點、id。focus-within input 影響 form。:placeholder-shown。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Bot LINE

用LINE bot api建立line@圖文選單

Front-End

TestCafe學習筆記-2:常用設定及功能

Front-End

JavaScript載入方式 defer, async

Bot LINE

LIFF v2 基本使用筆記及範例

Google Maps

Google Maps API學習筆記-1:地圖、標記、客製樣式

Bot Telegram

在網頁上嵌入Telegram 頻道廣播訊息

Firebase Google

Firebase Dynamic Links API 做一個自己的縮網址生成器

Google Others

用 GCP 建立 Cloud Functions

Bot Telegram

Telegram Bot學習筆記-4:命令列commands

Bot LINE

LINE Bot:X-Line-Signature 簽名驗證 範例

訂閱
通知
guest
4 Comments
最舊
最新
Inline Feedbacks
看所有留言
rainbow
rainbow
2 月 之前

推推~ 有些我真的不知道
感謝分享 XD

Mia
Mia
2 月 之前

:target這個用法很有趣~!

Let's Write

前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.