ตัวเลือกเซเล็คเตอร์ใน CSS

ตัวเลือกเซเล็คเตอร์ ~ อนุญาตให้เลือก องค์ประกอบทั้งหมดที่อยู่หลังจากองค์ประกอบที่กำหนดไว้ ภายในผู้ปกครองเดียวกัน

ไวยากรณ์

cssselector1 ~ selector2 {
  
}

ตัวอย่าง

มาดูองค์ประกอบทั้งหมดที่มีแท็ก p ที่อยู่หลังจากแท็ก h2 และกำหนดสี ให้เป็นสีแดง:

html<div>
  <h2>text</h2>
  <p>
    +
  </p>
  <p>
    +
  </p>
  <p>
    +
  </p>
</div>
<p>
  -
</p>

cssh2 ~ p {
  color: red;
}

Результат:

ตัวอย่าง

มาดูองค์ประกอบทั้งหมดที่มีแท็ก p ที่อยู่หลังจากองค์ประกอบที่มีคลาส .test และกำหนดสีให้เป็นสีแดง:

html<div>
  <p class="test">
    text
  </p>
  <p>
    +
  </p>
  <p>
    +
  </p>
</div>
<p>
  -
</p>

css.test ~ p {
  color: red;
}

Результат:

ตัวอย่าง

มาดูองค์ประกอบทั้งหมดที่มีคลาส .elem ที่อยู่หลังจากองค์ประกอบ ที่มีคลาส .test และกำหนดสีให้เป็นสีแดง:

html<div>
  <p class="test">
    text
  </p>
  <p class="elem">
    +
  </p>
  <p>
    -
  </p>
  <p class="elem">
    +
  </p>
</div>
<p>
  -
</p>

css.test ~ .elem {
  color: red;
}

Результат:

ดูเพิ่มเติม