Skip to main content

透過子層影響父層的 style - :has()

:is()

語法​

:is( <forgiving-relative-selector-list> )

在括弧內的選擇判斷，可寫入選擇器

:is(section + h2) {
  color: red;
}
/* 這樣子的話就只有 h2 會變成 red */
<body>
	<h1>Hi friend, try change my color!</h1>
	<section>
		<p>my name is thomas</p>
	</section>
	<h2>OMG OMG</h2>
</body>

demo

:has()​

CSS 偽函數 :has() 表示一個元素，括弧內的選擇判斷，提供一種針對引用元素，選擇父元素或著先前兄弟元素的方法。

語法​

:has( <forgiving-relative-selector-list> )

範例

HTML

<section>
  <article>
    <h1>Morning Times</h1>
    <p>Lorem ipsum dolor sit amet,  et dolore magna aliqua.</p>
  </article>
  <article>
    <h1>Morning Times</h1>
    <h2>Delivering you news every morning</h2>
    <p>Lorem ipsum dolor sit eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </article>
</section>

CSS

h1, h2 {
  margin: 0 0 1.0rem 0;
}

h1:has(+ h2) {
  margin: 0 0 0.25rem 0;
}

此區塊 h1 受到影響

<h1>Morning Times</h1>
<h2>Delivering you news every morning</h2>