CSS Parent Selector :has All In One

CSS Parent Selector :has All In One

WD 阶段，生成环境暂不可用 💩❌👎⚠️

https://caniuse.com/?search=%3Ahas

CSS Selectors Level 4 :has

pseudo-class / 伪类

/* For example, the following selector matches only <a> elements that contain an <img> child: */
a:has(> img)

/* The following selector matches a <dt> element immediately followed by another <dt> element:*/
dt:has(+ dt)

/* The following selector matches <section> elements that don’t contain any heading elements:*/
section:not(:has(h1, h2, h3, h4, h5, h6))

/* Note that ordering matters in the above selector. Swapping the nesting of the two pseudo-classes, like:*/
section:has(:not(h1, h2, h3, h4, h5, h6))
/* ...would result matching any <section> element which contains anything that’s not a heading element.*/

https://www.w3.org/TR/selectors-4/

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

demo

Your browser doesn't support CSS :has. Please view it in Safari 15.4 or the latest Chrome Canary.

.alert {
  display: block;
  padding: 1rem;
  text-align: center;
  margin-bottom: 1rem;
  background-color: #ffeeee;
  border: 1px solid red;
  border-radius: 5px;
  // font-size: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  /* ❌ 1.5 rem; !=== 1.5rem; ✅, 数字与rem 之间不能有空格 ! */
  /* line-height: 1.5 rem; */
  color: red;
}

// 特征检测，优雅降级，渐进增强
@supports selector(:has(*)) {
  .alert {
    display: none;
  }
}

refs

https://ishadeed.com/article/css-has-parent-selector/

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---