CSS ซับคู่เลือก class รายละเอียด

กลุ่มคลาสอนุญาตให้กำหนดรูปแบบด้วยวิธีที่เป็นอิสระจากองค์ประกอบของเอกสาร

CSS ซับคู่เลือก class

กลุ่มคลาสอนุญาตให้กำหนดรูปแบบด้วยวิธีที่เป็นอิสระจากองค์ประกอบของเอกสาร

กลุ่มคลาสนี้สามารถใช้เดี่ยวๆ หรือร่วมกับองค์ประกอบอื่นๆ ได้

คำเตือน：เพียงแต่จะต้องทำการติดตามแบบแบ่งประเภทของเอกสารอย่างเหมาะสมก็จะสามารถใช้กลุ่มคลาสนี้ได้ ดังนั้นการใช้สองกลุ่มคลาสนี้มักจะต้องมีการวางแผนและหลักประกาศก่อนโดยทั่วไป。

วิธีที่ใช้บ่อยที่สุดเพื่อใช้รูปแบบโดยไม่จำเป็นต้องคำนึงถึงองค์ประกอบที่มีออกแบบแล้วคือการใช้กลุ่มคลาส。

ปรับปรุงรหัส HTML

ก่อนที่จะใช้กลุ่มคลาสเล็กน้อย ต้องปรับปรุงสาระของเอกสารเพื่อให้กลุ่มคลาสทำงานได้เหมาะสม。

เพื่อเชื่อมโยงรูปแบบที่ใช้ด้วยกลุ่มคลาสกับองค์ประกอบ จำเป็นต้องกำหนดค่า class ให้เหมาะสม โปรดดูรหัส HTML ต่อไปนี้:

<h1 class="important">
This heading is very important.
</h1>
<p class="important">
This paragraph is very important.
</p>

ในรหัสที่อยู่ข้างต้น คลาสของสององค์ประกอบต่างกัน มีค่าเท่ากับ important คือ หัวข้อแรก (h1 องค์ประกอบ) และปารากราฟที่สอง (p องค์ประกอบ)。

ระเบียบ

หลังจากนั้นเราใช้กฎระเบียบต่อไปนี้เพื่อกำหนดรูปแบบให้กับองค์ประกอบที่มีชื่อชั้นนี้ ก็คือจุดหน้าชื่อชั้น (.) และผสมกับตัวเลือกเว้นวรรคกัน:

*.important {color:red;}

ถ้าคุณต้องการที่จะเลือกองค์ประกอบที่มีชื่อชั้นเดียวกัน คุณสามารถละเลยตัวเลือกเว้นวรรคกันในตัวเลือกชั้น นี่จะไม่มีผลเสียใดๆ

.important {color:red;}

ทดลองด้วยตัวเอง

ผสมกับตัวเลือกองค์ประกอบ

ตัวเลือกชั้นหลักสามารถผสมกับตัวเลือกองค์ประกอบได้

ตัวอย่าง คุณอาจต้องการที่จะทำให้เพียงตัวประกาศเหล่านี้แสดงข้อความสีแดงเท่านั้น:

p.important {color:red;}

ตัวเลือกปัจจุบันจะตรวจสอบองค์ประกอบที่มีค่า class คือ important ทุกตัว p แต่ไม่ตรวจสอบองค์ประกอบชนิดอื่นๆ ไม่ว่าจะมีค่า class นี้หรือไม่ ตัวเลือก p.important หมายถึง: “ทุกตัว段落ที่มีค่า class คือ important” ตรงนี้องค์ประกอบ h1 ไม่ใช่段落 ดังนั้นตัวเลือกนี้จะไม่ตรงกับองค์ประกอบ h1 ดังนั้นองค์ประกอบ h1 จะไม่กลายเป็นข้อความสีแดง

ถ้าคุณต้องการที่จะกำหนดรูปแบบที่ต่างกันสำหรับองค์ประกอบ h1 คุณสามารถใช้ตัวเลือก h1.important ได้:

p.important {color:red;}
h1.important {color:blue;}

ทดลองด้วยตัวเอง

CSS Multi-class Selector

ในบทบาทที่แล้ว เราได้จัดการกับกรณีที่มีค่า class รวมกันเพียงคำเดียว ใน HTML ค่า class อาจมีรายชื่อคำที่แยกต่างกันด้วยอักษรเปลี่ยนแปลง ตัวแปลงที่แยกต่างกันด้วยช่องว่าง. ตัวอย่าง ถ้าต้องการที่จะทำให้องค์ประกอบเฉพาะอย่างเดียวได้รับการทำเคยด้วยความสำคัญ (important) และการเตือน (warning) ก็สามารถเขียนได้ว่า:

<p class="important warning">
This paragraph is a very important warning.
</p>

ลำดับของคำนี้ไม่มีความสำคัญ ก็สามารถเขียนว่า warning important ได้เช่นกัน。

เราคาดว่าทุกองค์ประกอบที่มี class คือ important จะเป็นแบบหนา และทุกองค์ประกอบที่มี class คือ warning จะเป็นแบบitalic และทุกองค์ประกอบที่มี class ทั้ง important และ warning จะมีศัลย์สีทองคำ . ก็สามารถเขียนได้ว่า:

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

ทดลองด้วยตัวเอง

โดยการเชื่อมโยงกันระหว่างตัวเลือกชั้นหลักสองตัว สามารถเลือกได้เพียงรวมถึงชื่อ class ที่มีอยู่ทั้งหมดขององค์ประกอบ (ลำดับชื่อ class ไม่มีความสำคัญ)

ถ้าซับคู่เลือก multi-class มีชื่อ class ที่ไม่มีในรายการชื่อ class ของมัน การตรงกับจะล้มเหลว โปรดดูกฎระเบียบดังนี้:

.important.urgent {background:silver;}

คาดว่าตัวเลือกนี้จะตรงกับองค์ประกอบ p ที่มีคุณสมบัติ class ที่มีคำติดตั้ง important และ urgent ฉะนั้น ถ้าองค์ประกอบ p มีคำติดตั้ง important และ warning เท่านั้น จะไม่ตรงกับ อย่างไรก็ตาม มันสามารถตรงกับองค์ประกอบดังนี้:

<p class="important urgent warning">
บทความนี้เป็นคำเตือนที่สำคัญและเร่งด่วน
</p>

ทดลองด้วยตัวเอง

ความสำคัญ:ใน IE7 ก่อน ตัวแปลงต่าง ๆ ของ Internet Explorer ในแต่ละแผ่นดินไทยไม่สามารถจัดการกับซับคู่เลือก multi-class ได้อย่างถูกต้อง