css กับการระบุการใช้งานอย่างเฉพาะเจาะจง (specificity)
กรณี่ที่มีการใช้ CSS ขัดแย้งกัน 2 ส่วนหรือมากกว่านั้น จะมีกฏพื้นฐานของ CSS ที่มีไว้กำหนดว่าจะเลือกใช้ค่า CSS ใด
ตัวอย่าง กรณีที่ 1
ถ้าตัว selectors เป็นตัวเดียวกัน ค่า CSS ตัวล่าสุดหรือตัวหลังสุด จะถูกนำไปใช้ เช่น
1 2 3 4 | <style type="text/css">p{ color:#000000;}p{ color:#FF0000; }</style> |
ตัวอย่าง กรณีที่ 2
ถ้าตัว selectors ของ css ใดมีค่า specificiry มากกว่า ค่าของ css นั้นจะถูกนำไปใช้ เช่น
1 2 3 4 | <style type="text/css">div p{ color:#000000;}p{ color:#FF0000; }</style> |
จากค่า CSS ด้านบน จะพบว่าค่าสีของ p จะเป็นสีดำ ทั้งนี้เพราะค่า specificity ของ selectors มีค่ามากกว่า
ซึ่งค่า specificity สามารถคำนวณได้จากค่าดังต่อไปนี้
1.ทุกๆ html selector แต่ละตัวจะมีค่าเท่ากับ 1 เช่น p span ..เป็นต้น
2.ทุกๆ class selector แต่ละตัวจะมีค่าเท่ากับ 10 เข่น .mycss1 เป็นต้น
3.ทุกๆ id selector แต่ละตัวจะมีค่าเท่ากับ 100 เข่น #myid เป็นต้น
ตัวอย่างและการคำนวณ
- p มีค่า specificity เท่ากับ 1 (เพราะมี html selector 1 ตัว)
- div p มีค่า specificity เท่ากับ 2 (เพราะมี html selector 2 ตัว)
- .myclass มีค่า specificity เท่ากับ 10 (เพราะมี class selector 1 ตัว ก็เท่ากับ 1 x 10 =10)
- div p.myclass มีค่า specificity เท่ากับ 12 (เพราะมี html selector 2 ตัว และ class selector 1 ตัว เท่ากับ 1+1+10)
- #myid มีค่า specificity เท่ากับ 100 (เพราะมี id selector 1 ตัว ก็เท่ากับ 1 x 100 =100)
- body #content .alternative p มีค่า specificity เท่ากับ 112 (เพราะมี html selector 2 ตัว class selector 1 ตัว และ id selector 1 ตัว เท่ากับ 1+1+10+100 =112)
เมื่อ css ใดมีค่า specificity มากกว่า ก็จะเลือกใช้ค่า css นั้นๆ
