一般來說,CSS選擇器只能一層一層的往下選,但如果想選到父元素怎麼辦?
其實相關需求不在少數,而在CSS4中也有提供類似的選擇器 :has() ,不過目前仍在立案中,我們還無法直接套用在CSS上,但也是可以先來認識一下相關參數及應用,另外,即使CSS還不能套用,但透過js呼叫倒是沒問題的!
首先 :has() 是一個偽元素,範例語法如下:
只要 <a> 的子元素裡有包含 <img>的,就會套用
a:has(img)
跟上述類似,有直接包含 <img> 就會套用
a:has(> img)
當<a> 的直接子元素裡有 <img>的,才會套用
a:has(+ img)
另外 :has() 裡也可以帶入class、id
接著說一下如何用JS套入,語法如下:
$( "a" ).has( "img" ).css( "text-align", "left" );