ซีเล็กเตอร์สากลใน CSS

ซีเล็กเตอร์สากล * ช่วยให้ เลือกทุกองค์ประกอบ

ตัวอย่าง

เรามาเลือกทุกองค์ประกอบและกำหนดสี ให้เป็นสีแดง:

css* {
  color: red;
}

ตัวอย่าง

เรามาเลือกทุกองค์ประกอบที่อยู่ ภายในแท็ก div และกำหนดสีให้เป็นสีแดง:

cssdiv * {
  color: red;
}

ตัวอย่าง

เรามาเลือกทุกองค์ประกอบที่อยู่ ภายในแท็ก div โดยตรง และกำหนดสี ให้เป็นสีแดง:

cssdiv > * {
  color: red;
}

ตัวอย่าง

เรามาเลือกแท็ก span ทั้งหมดที่ อยู่ภายในองค์ประกอบใดๆ ซึ่งในทางกลับกัน ก็อยู่ภายในแท็ก div:

cssdiv * span {
  color: red;
}

โจทย์ปฏิบัติ

html<main>
  <p>---</p>
  <p>---</p>
  
  <div>
    <p>+++</p>
    <p>+++</p>
  </div>
  <section>
    <p>+++</p>
    <p>+++</p>
  </section>
</main>