Element Type Selector ใน CSS (ตัวเลือกตามชนิดองค์ประกอบ)

CSS Element Type Selector ใช้เลือกองค์ประกอบทั้งหมดของชนิด (type) ที่ระบุ

ไวยากรณ์ (Syntax)

element {
  /* declarations */
}

ตัวอย่างที่ 1: ใช้กับ li และ div

<!DOCTYPE html>
<html>
<head>
  <style>
    li {
      list-style: none; margin: 5px; border-bottom-style: dotted;
    }
    div {
      box-shadow: inset 0 0 8px plum; padding: 36px;
    }
  </style>
</head>
<body>
  <div>
    <pre> \(╪)(╪) /</pre>
    <ul>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>
</html>

ผลลัพธ์

ตัวอย่างที่ 2: จัดสไตล์ li และ div แบบละเอียด

<!DOCTYPE html>
<html>
<head>
  <style>
    li {
      text-align: center; list-style: none; margin: 5px; padding: 5px;
      box-shadow: inset 0 0 15px yellowgreen;
    }
    div {
      box-shadow: inset 0 0 8px orange; padding: 36px;
      width: 30%; border-radius: 50%;
    }
  </style>
</head>
</body>
  <div>
    <ul>
      <li>Hello</li>
      <li>Guys</li>
    </ul>
  </div>
</html>

ผลลัพธ์

จุดสำคัญ

• Type selector มีความเฉพาะเจาะจงต่ำ (low specificity) - ง่ายต่อการ override
• เหมาะสำหรับกำหนดสไตล์พื้นฐาน (reset/normalize) ให้ทุกองค์ประกอบชนิดเดียวกัน
• รวมใช้กับ combinator อื่นได้ เช่น div p (descendant), div > p (child)