คอร์ส IT พื้นฐาน CSS 020_ตัวเลือก

ตัวเลือก

ตัวเลือกใช้สำหรับเลือกองค์ประกอบในเอกสารที่ต้องการจัดสไตล์ ผ่านโหมดการเลือกต่างๆ บอกเบราว์เซอร์ว่าองค์ประกอบใดได้รับสไตล์ใด

ตัวเลือก ID (#)

เลือกองค์ประกอบโดย ID เฉพาะ ตัวเลือก ID ควรเป็นเอกลักษณ์ในเอกสารและไม่ควรใช้ซ้ำ

ตัวอย่าง:

1
#myID {
2
  /* กฎสไตล์ */
3
}

ตัวเลือกคลาส (.)

เลือกองค์ประกอบโดยชื่อคลาส ตัวเลือกคลาสสามารถใช้กับหลายองค์ประกอบ และองค์ประกอบเดียวสามารถมีหลายคลาส

ตัวอย่าง:

1
.myClass {
2
  /* กฎสไตล์ */
3
}

ตัวเลือกองค์ประกอบ (p, h1)

เลือกองค์ประกอบโดยชื่อองค์ประกอบ HTML ตัวเลือกองค์ประกอบจะเลือกองค์ประกอบที่ตรงกันทั้งหมดในเอกสาร

ตัวอย่าง:

1
p {
2
  /* กฎสไตล์ */
3
}

ตัวเลือกสากล (*)

เลือกองค์ประกอบทั้งหมดในเอกสาร ควรใช้อย่างระมัดระวังเนื่องจากจับคู่กับทุกองค์ประกอบและอาจส่งผลต่อประสิทธิภาพ

ตัวอย่าง:

1
* {
2
  /* กฎสไตล์ */
3
}

ตัวเลือกแอตทริบิวต์ ([type="text"])

เลือกองค์ประกอบโดยค่าแอตทริบิวต์ ตัวเลือกแอตทริบิวต์สามารถเลือกองค์ประกอบตามค่าแอตทริบิวต์ที่แตกต่างกัน

ตัวอย่าง:

1
input[type="text"] {
2
  /* กฎสไตล์ */
3
}

ตัวเลือก Pseudo-class

เลือกสถานะหรือตำแหน่งพิเศษขององค์ประกอบ เช่น hover, visited เป็นต้น

ตัวอย่าง:

1
a:hover {
2
  /* กฎสไตล์ */
3
}

ตัวเลือก Pseudo-element

เลือกส่วนพิเศษขององค์ประกอบ เช่น บรรทัดแรก ตัวอักษรแรก เป็นต้น

ตัวอย่าง:

1
p::first-line {
2
  /* กฎสไตล์ */
3
}

ตัวเลือกลูก

เลือกองค์ประกอบลูกโดยตรงขององค์ประกอบ เลือกเฉพาะลูกโดยตรง ไม่รวมลูกหลาน

ตัวอย่าง:

1
ul > li {
2
  /* กฎสไตล์ */
3
}

ตัวเลือกพี่น้องทั่วไป

เลือกองค์ประกอบพี่น้องทั้งหมดที่มีองค์ประกอบแม่เดียวกัน เลือกองค์ประกอบพี่น้องทั้งหมดหลังองค์ประกอบที่ระบุ โดยไม่ต้องอยู่ติดกัน

ตัวอย่าง:

1
h2 ~ p {
2
  /* กฎสไตล์ */
3
}

ตัวเลือกพี่น้องที่อยู่ติดกัน

เลือกองค์ประกอบพี่น้องที่อยู่ถัดจากองค์ประกอบที่ระบุโดยตรง

ตัวอย่าง:

1
h2 + p {
2
  /* กฎสไตล์ */
3
}

ตัวเลือกลูกหลาน

เลือกองค์ประกอบลูกหลานทั้งหมดภายใต้องค์ประกอบ รวมถึงองค์ประกอบที่ซ้อนลึก

ตัวอย่าง:

1
div p {
2
  /* กฎสไตล์ */
3
}

ตัวเลือกรวม (,)

รวมหลายตัวเลือกเข้าด้วยกันเพื่อเลือกองค์ประกอบทั้งหมดที่ตรงกับตัวเลือกใดตัวเลือกหนึ่ง ใช้เพื่อเลือกหลายประเภทองค์ประกอบพร้อมกันและใช้กฎสไตล์เดียวกัน

ตัวอย่าง:

1
h1, h2, h3 {
2
  /* กฎสไตล์ */
3
}

รายการตัวเลือก

แสดงรายการหลายตัวเลือกตามลำดับความสำคัญเพื่อเลือกตัวที่เหมาะสมที่สุด

ตัวอย่าง:

1
div p,
2
.myClass,
3
#myID {
4
  /* กฎสไตล์ */
5
}

กฎการตั้งชื่อตัวเลือก

• ชื่อตัวเลือกต้องประกอบด้วยตัวอักษร ตัวเลข ขีดล่าง หรือขีดกลาง

• ชื่อต้องเริ่มต้นด้วยตัวอักษรหรือขีดล่าง

• ชื่อไม่สามารถเริ่มต้นด้วยตัวเลข

• ชื่อไม่สามารถมีช่องว่าง

  คำแนะนำ:

• ใช้ชื่อที่มีความหมาย: ชื่อตัวเลือกควรสะท้อนหน้าที่หรือวัตถุประสงค์ขององค์ประกอบที่เลือกอย่างชัดเจน

• ปฏิบัติตามแบบแผนการตั้งชื่อ: ใช้แบบแผนที่สอดคล้องกัน เช่น camelCase หรือ kebab-case เพื่อเพิ่มความสอดคล้องของโค้ด

• หลีกเลี่ยงตัวย่อที่ไม่มีความหมาย: หลีกเลี่ยงตัวย่อที่สั้นเกินไปหรือไม่มีความหมาย เพื่อให้นักพัฒนาคนอื่นเข้าใจได้

• ปฏิบัติตามหลักความหมาย: ใช้ตัวเลือกเชิงความหมายเพื่อเพิ่มความสามารถในการอ่านและบำรุงรักษาโค้ด