次世代 Hugo

無駄を削ぎ、本質を研ぐ

CSS 之 General Sibling Combinator ~

Sam Xiao's Avatar 2021-04-16

理論上每個 Element 都可以設定獨立 Class 加以選取，若想在不增加 Class 前提下選取之後所有 Element，可使用 ~ 加以選取。

Version

CSS 3

Global Sibling Combinator

sibling000

Web Tech 已經有 .title，在不想增加 class 前提下想將 HTML 、CSS 與 JavaScript 改成紅色。

<template>
  <h1 class="title">Web Tech</h1>
  <p>HTML</p>
  <p>CSS</p>
  <p>JavaScript</p>
</template>

<style scoped>
.title ~ p {
  color: #f00;
}
</style>

第 2 行

<h1 class="title">Web Tech</h1>
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>

Web Tech 有 .title，但 HTML 沒有任何 class。

第 9 行

.title ~ p {
  color: #f00;
}

使用 + 選取 .title 所有 <p>，因此可選到 HTML 、CSS、JavaScript 加以改變顏色。

sibling001

僅管 .title 之後插入 <h1> 的 IDE，之後的 WebStorm 依舊是紅色。

<template>
  <h1 class="title">Web Tech</h1>
  <p>HTML</p>
  <p>CSS</p>
  <p>JavaScript</p>
  <h1 class="title">IDE</h1>
  <p>WebStorm</p>
</template>

<style scoped>
.title ~ p {
  color: #f00;
}
</style>

第 6 行

<h1 class="title">IDE</h1>
<p>WebStorm</p>

多了 IDE 與 WebStorm。

僅管 .title 之後插入了 <h1>，但 <p> 依然可被 .title ~ p 選擇到。

Change Color by Hovering

sibling002

當滑鼠 hover 到 R 時，下方 box 則顯示紅色，以此類推。

<template>
  <a href="#" class="color R">R</a>
  <a href="#" class="color G">G</a>
  <a href="#" class="color B">B</a>
  <div class="color-box"/>
</template>

<style scoped>
.color {
  display: inline-block;
  width: 30px;
  height: 30px;
}

.color-box {
  width: 100px;
  height: 100px;
  margin-top: 20px;
  background: #ccc;
}

.R {
  background: #f00;
}

.G {
  background: #0f0;
}

.B {
  background: #00f;
}

.R:hover ~ .color-box {
  background: #f00;
}

.G:hover ~ .color-box {
  background: #0f0;
}

.B:hover ~ .color-box {
  background: #00f;
}
</style>

第 2 行

<a href="#" class="color R">R</a>
<a href="#" class="color G">G</a>
<a href="#" class="color B">B</a>
<div class="color-box"/>
  • R、G、B 共同 style 以 .color 表示
  • R、G、B 個別 style 以 .R、.G 與 .B 表示

第 9 行

.color {
  display: inline-block;
  width: 30px;
  height: 30px;
}

設定 R、G 與 B 共同 style：

  • display: inline-block：<a> 為 inline 無法設定 width 與 height，因此改設定成 inline-block
  • width: 30px：設定 width
  • height: 30px：設定 height

22 行

.R {
  background: #f00;
}

設定 R 個別 style：

  • background: #f00：設定背景為紅色

34 行

.R:hover ~ .color-box {
  background: #f00;
}
  • .R:hover ~ .colo-box：當 .R 被 hover 時，選取所有 .color-box
  • background: #f00：設定 color-box 為紅色

由於 color-box 並非緊貼於 <a>，不可以將 ~ 以 + 取代，否則 B hover 有效過

Label Color

sibling003

當 checkbox 被選取時 label 呈現紅色。

<template>
  <div class="web-tech">
    <label>
      <input type="checkbox" class="checkbox">
      <span>HTML</span>
    </label>

    <label>
      <input type="checkbox" class="checkbox">
      <span>CSS</span>
    </label>

    <label>
      <input type="checkbox" class="checkbox">
      <span>JavaScript</span>
    </label>
  </div>
</template>

<style scoped>
.web-tech .checkbox:checked ~ span {
  color: #f00;
}
</style>

第 2 行

<div class="web-tech">
  <label>
    <input type="checkbox" class="checkbox">
    <span>HTML</span>
  </label>
</div>
  • 將 <input type="checkbox"> 包在 <label> 內，選取 label 也相當於選取 checkboxk
  • 為了要使 HTML 變色，特別將其包在 <span> 內可選取

21 行

.web-tech .checkbox:checked ~ span {
  color: #f00;
}
  • .checkox:checked ~ span：當 checkbox 被選取下的所有 <span>
  • color: #f00：設定 label 成為紅色

由於 label 都緊貼於 checkbox，可使用 + 取代 ~

Conclusion

  • + 與 ~ 屬同系列 combinator，當要選取的 element 緊貼於 class 時，可使用 + 取代 ~

Reference

MDN, General sibling combinator

# CSS