2023 iThome 鐵人賽

DAY 16

0

Modern Web

你應該要知道的CSS技巧：發掘被忽略但實用的屬性系列第 16 篇

【Day16】夢寐以求父層選擇器 - :has()

15th鐵人賽

2023-10-01 16:27:15

307 瀏覽

分享至

:has()

:has()支援度:Can I Use)

:has()是什麼?

selector:has(selectors)
ex:選擇所有包含至少一個<img>元素的<a>元素：

a{
  color:blue;
}
a:has(img){
  color:red;
}

:has()運用的範圍非常廣，例如：
1. 可以用來判斷是否包含某些特定元素，藉此判斷父元素是否要加樣式。
2. 可以用來判斷是否包含至少一個子元素，藉此判斷父元素是否要加樣式。

:has()是CSS中一個非常強大的偽元素，像是以前常常會遇到想根據子元素的不同判斷父元素的樣式，這時候就可以實現拉~是不是很方便呢？

Codepen範例

IT15-Day16-:has()

參考來源

https://developer.mozilla.org/en-US/docs/Web/CSS/:has?fbclid=IwAR21PhfyKt6E_0JHHyT1RzxgEsS0ftMW79RFaBSmr0uQYp8Esnas_u0-L3M

【Day15】Grid再進化 - Subgrid

【Day17】讓CSS選擇器更強大 - is( )和:where( )

系列文

你應該要知道的CSS技巧：發掘被忽略但實用的屬性共 30 篇

目錄

RSS系列文訂閱系列文

6 人訂閱

完整目錄

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22208 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙