การเลือกกรรมศัพท์ CSS

CSS 2 ได้เพิ่มตัวเลือกคุณสมบัติ

ตัวเลือกคุณสมบัติสามารถเลือกรายการตามคุณสมบัติและค่าคุณสมบัติขององค์ประกอบ

ตัวเลือกคุณสมบัติที่เรียบง่าย

หากต้องการเลือกรายการที่มีคุณสมบัติเฉพาะโดยไม่คำนึงถึงค่าคุณสมบัติ สามารถใช้ตัวเลือกคุณสมบัติที่เรียบง่าย

ตัวอย่าง 1

หากต้องการที่จะทำให้ทุกองค์ประกอบที่มีความหมาย (title) แปลงเป็นสีแดง สามารถเขียนได้

*[title] {color:red;}

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

ตัวอย่าง 2

เหมือนกันกับที่ข้างต้น สามารถนำสไตล์มาใช้กับที่มีคุณสมบัติ href โดยเฉพาะ

a[href] {color:red;}

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

ตัวอย่าง 3

สามารถเลือกตามหลายคุณสมบัติได้ แค่เชื่อมต่อเลขชื่อประกาศเพื่อใช้เลือก

เช่น โดยที่จะทำให้ข้อความของลิงก์ HTML ที่มีคุณสมบัติ href และ title แสดงเป็นสีแดง คุณสามารถเขียนได้เช่นนี้:

a[href][title] {color:red;}

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

ตัวอย่าง 4

คุณสามารถใช้คุณสมบัตินี้ด้วยวิธีที่มีความคิดสร้างสรรค์

เช่น คุณสามารถนำไปใช้กับรูปภาพที่มีคุณสมบัติ alt ในการเพิ่มสีเขียวเพื่อแสดงรูปภาพที่มีประสิทธิภาพ

img[alt] {border: 5px solid red;}

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

คำเตือน：ตัวอย่างนี้มีประโยชน์มากกว่าในการวินิจฉัยแบบกำจัดปัญหา ซึ่งเป็นการตรวจสอบว่ารูปภาพมีประสิทธิภาพหรือไม่

ตัวอย่าง 5: ใช้ตัวเลือกคุณสมบัติในเอกสาร XML

ตัวเลือกคุณสมบัติใช้ได้มากในเอกสาร XML เพราะภาษา XML สนับสนุนให้ระบุชื่อองค์ประกอบและชื่อคุณสมบัติตามวัตถุประสงค์ขององค์ประกอบและคุณสมบัติ

หากเราได้ทำ XML ไฟล์สำหรับวางแผนดาวเคราะห์ระบบสุริยะ และต้องการเลือกทุก planet ที่มีคุณสมบัติ moons แสดงเป็นสีแดง เพื่อที่จะเน้นการใช้ประโยชน์ของดาวเคราะห์ที่มีดาวดวงเดี่ยว คุณสามารถเขียนได้เช่นนี้:

planet[moons] {color:red;}

นี่จะทำให้ข้อความขององค์ประกอบที่สองและสามในแทร็กตัวนี้แสดงเป็นสีแดง แต่ข้อความขององค์ประกอบแรกไม่ใช่สีแดง:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars<planet>

ตรวจสอบผลลัพธ์

เลือกตามคุณสมบัติตัวเดี่ยว

นอกจากการเลือกองค์ประกอบที่มีคุณสมบัติบางอย่าง คุณยังสามารถหนวดความกว้างของเลือกให้เล็กลง โดยเลือกองค์ประกอบที่มีคุณสมบัติที่เฉพาะเจาะจง

ตัวอย่าง 1

เช่น หากต้องการที่จะทำให้ลิงก์ที่นำไปสู่เอกสารบนเซิร์ฟเวอร์เว็บบางเอกสารเป็นสีแดง คุณสามารถเขียนได้เช่นนี้:

a[href="http://www.codew3c.com/about_us.asp"] {color: red;}

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

ตัวอย่าง 2

เหมือนกับเลือกตัวเลือกของคุณที่ง่าย คุณสามารถเชื่อมโยงตัวเลือกหลายอย่างของ attribute-value กันเพื่อเลือกเอกสาร

a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}

นี่จะทำให้ข้อความของลิงก์แรกในแทร็กที่ระบุไว้เป็นสีแดง แต่ลิงก์ที่สองหรือที่สามไม่ได้รับผลกระทบ:

<a href="http://www.codew3c.com/" title="W3School">W3School</a>
<a href="http://www.codew3c.com/css/" title="CSS">CSS</a>
<a href="http://www.codew3c.com/html/" title="HTML">HTML</a>

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

ตัวอย่าง 3

ในทางเดียวกัน ภาษา XML ก็สามารถใช้วิธีนี้เพื่อกำหนดสไตล:

เมื่อกลับมาที่ตัวอย่างของดาวเคราะห์ หากต้องการเลือกองค์ประกอบ planet ที่มีค่า attribute moons อยู่ที่ 1:

planet[moons="1"] {color: red;}

รหัสนี้จะทำให้องค์ประกอบที่สองของทะเบียนนี้มีสีแดง แต่องค์ประกอบแรกและที่สามไม่ได้รับผลกระทบ:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

ตรวจสอบผลลัพธ์

คุณสมบัติและค่าของคุณสมบัติต้องตรงกันตรงข้ามกัน:

โปรดระวังว่ารูปแบบนี้ต้องเป็นการตรวจสอบค่าทั้งหมดของค่าattribute:

หากค่าของ属性มีรายการค่าที่แยกด้วยอากาศ การตรวจสอบอาจมีปัญหา:

โปรดอธิบายส่วนที่แสดงด้านล่างนี้:

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

หากเขียนเป็น p[class="important"] ก็ไม่สามารถตรวจสอบทะเบียนตัวอย่างนี้ได้:

เพื่อที่จะเลือกอิงค่าของคุณสมบัติเฉพาะ ต้องเขียนเช่นนี้:

p[class="important warning"] {color: red;}

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

การเลือกตามค่าส่วนตัวของ属性

หากต้องการเลือกอิงคำว่าใด ๆ ในรายการคำว่าของค่า属性 ต้องใช้เครื่องหมาย ~:

หากต้องการเลือกรูปภาพที่มีคุณสมบัติ class ที่มีคำว่า important ในจำนวน ใช้ตัวเลือกดังนี้เพื่อทำให้ได้:

p[class~="important"] {color: red;}

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

หากละเมิดเครื่องหมายคลื่นตัวยก นั้นหมายความว่าต้องทำการตรวจสอบความตรงกันตรงข้ามของค่าทั้งหมด:

ความแตกต่างระหว่างตัวเลือกส่วนตัวคุณสมบัติและการใช้ชื่อหมวด class คือ:

ตัวเลือกนี้เท่ากันกับที่เราเลือกความหมายของชื่อหมวด class ที่เราได้เลือกในบทความก่อน:

นั่นคือ p.important และ p[class="important"] ในการนำไปปรับปรุงเอกสาร HTML นั้นเท่ากัน:

ทั้งนี้ ทำไมยังต้องมีตัวเลือก属性 ~=" อีกที่? เพราะมันสามารถใช้กับทุกคุณสมบัติ ไม่ได้เพียงแค่ class:

เช่นนี้ อาจมีเอกสารที่มีภาพส่วนใหญ่ แต่มีส่วนเดียวที่เป็นภาพสำหรับการนำไปใช้: ใช้ตัวเลือกเพื่อความสำคัญของตัวอักษรที่มีความหมายในเอกสารส่วนใดส่วนหนึ่งเท่านั้น ซึ่งเลือกภาพเหล่านั้นเท่านั้น:

img[title~="Figure"] {border: 1px solid gray;}

กฎนี้จะเลือกทุกภาพถ่ายที่มีข้อความ title ที่มี "Figure" ไม่ว่าจะมีอยู่หรือไม่ ภาพถ่ายที่ไม่มี title หรือที่ไม่มี "Figure" ในข้อความ title จะไม่ถูกเลือก

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

โมดูลเลือกตัวอักษรย่อย

ต่อไปนี้จะนำเสนอโมดูลเลือกที่ระดับสูงขึ้นอีกอันหนึ่ง ซึ่งได้รับการปล่อยออกมาหลังจากที่ CSS2 สิ้นสุดลง ซึ่งมีการกำหนดค่าส่วนบางส่วนขององค์ประกอบ

หลายๆเครื่องนี้ที่ใช้ปัจจุบันรอบๆทุกๆโปรแกรมเบิร์กเชื่อมต่อสายอินเตอร์เน็ตเป็นต้นที่สนับสนุนโครงการเลือกนี้ รวมถึง IE7

ตารางต่อไปนี้เป็นบันทึกสรุปของโครงการเลือกนี้

รูปแบบ คำอธิบาย
[abc^="def"] เลือกองค์ประกอบที่มีค่า属性 abc ที่เริ่มต้นด้วยตัวอักษร "def"
[abc$="def"] เลือกองค์ประกอบที่มีค่า属性 abc ที่สิ้นสุดด้วยตัวอักษร "def"
[abc*="def"] เลือกองค์ประกอบที่มีค่า属性 abc ที่มีตัวอักษรย่อย "def"

คาดว่ามีหลายสายใช้ของโครงการเลือกนี้

ตัวอย่าง หากต้องการปรับรูปแบบสำหรับทุกลิงก์ที่มีที่มาที่จะนำไปสู่ CodeW3C.com ไม่จำเป็นต้องกำหนด class ให้กับทุกลิงก์นี้ และเขียนรูปแบบเพื่อตามคลาสนี้ แต่เพียงแค่เขียนกฎต่อไปนี้เท่านั้น

a[href*="codew3c.com"] {color: red;}

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

คำเตือน：สามารถใช้โครงการเลือกนี้สำหรับแนวทางทุกตัว

โครงการเลือกแนวทางเฉพาะทาง

ในที่สุดขอนำเสนอโครงการเลือกที่เฉพาะทางสำหรับองค์ประกอบนี้ โปรดดูตัวอย่างที่มีต่อไป

*[lang|="en"] {color: red;}

กฎนี้จะเลือกทั้งหมดสำหรับองค์ประกอบที่มีค่า属性 lang ที่เท่ากับ en หรือเริ่มต้นด้วย en- ไม่ควรเลือกองค์ประกอบสององค์ประกอบหลัง

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

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

ปกติ [att|="val"] สามารถใช้สำหรับแนวทางและค่าที่มีอยู่

ตัวอย่าง หากมีภาพถ่ายหลายรายในเอกสาร HTML และชื่อแฟ้มของแต่ละภาพถ่ายมีรูปแบบเช่นนี้ figure-1.jpg และ figure-2.jpgคุณสามารถใช้โครงการเลือกต่อไปนี้เพื่อตรวจสอบทุกภาพถ่ายที่มี

img[src|="figure"] {border: 1px solid gray;}

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

ทั้งนี้ ความยอมรับที่สำคัญที่สุดของโครงการเลือกภาษานี้คือการตรวจสอบค่าภาษา

คู่มืออ้างอิงเลือก CSS

เลือก คำอธิบาย
[attribute] ใช้เลือกสมาชิกที่มีคุณสมบัติที่ระบุ
[attribute=value] ใช้เลือกสมาชิกที่มีคุณสมบัติและค่าที่ระบุ
[attribute~=value] ใช้เลือกสมาชิกที่มีคำที่ระบุในค่าคุณสมบัติ
[attribute|=value] ใช้เลือกสมาชิกที่มีค่าคุณสมบัติที่เริ่มด้วยค่าที่ระบุ ค่าดังกล่าวต้องเป็นคำที่เต็ม
[attribute^=value] ตรวจสอบทุกสมาชิกที่มีค่าคุณสมบัติที่เริ่มด้วยค่าที่ระบุ
[attribute$=value] ตรวจสอบทุกสมาชิกที่มีค่าคุณสมบัติที่จบด้วยค่าที่ระบุ
[attribute*=value] ตรวจสอบทุกสมาชิกที่มีค่าคุณสมบัติที่มีค่าที่ระบุ