CSS : ID class ใช้คิดค่าความสำคัญ

Specificity Value ค่าเฉพาะ หรือ ค่าความสำคัญ แบ่งคะแนนเป็นดังนี้

• inline-style มีค่าความสำคัญ 1,0,0,0 ซึ่งมีค่าความสำคัญสูงสุด โดย inline-style ก็คือการใส่ style เข้าไปใน HTML อย่างเช่น

[html]<br style="box-sizing: border-box;"><div id="header" style="background:#000000;"><br style="box-sizing: border-box;">[/html]

ID ค่าความสำคัญ คือ 0,1,0,0
class ค่าความสำคัญ คือ 0,0,1,0
element ต่าง ๆ เช่น h1,h2,div,p ค่าความสำคัญ คือ 0,0,0,1

การรวมค่า ดูจากจำนวนแต่ละแบบมารวมกัน ซึ่ง 0,1,0,0มีค่ามากกว่า 0,1,12,0 เหมือนต่อให้มีกี่ class ก็แล้วแต่ แต่ถ้ากำหนด ID มาให้ตัวนึง ก็จะยึด style จาก ID ในทันที ลองมาดูการรวมค่า

[css]<br style="box-sizing: border-box;">ul#nav li.active a<br style="box-sizing: border-box;">[/css]

จะมีค่าเท่ากับ 0,1,1,3 โดย 0,1,0,0 มาจาก ID 0,0,1,0 มาจาก class และ 0,0,0,3 มาจาก ul,li และ a
ดังนั้นจึงรวมกันมีค่าเท่ากับ 0,1,1,3

[css]<br style="box-sizing: border-box;">#header #nav .smalltext<br style="box-sizing: border-box;">[/css]

จะมีค่าเท่ากับ 0,2,1,0 โดย 0,2,0,0 มาจาก ID header และ nav ส่วน 0,0,1,0 นั้นมาจาก class

[html]<br style="box-sizing: border-box;"><li style="color:#B23D61"><br style="box-sizing: border-box;">[/html]

จะมีค่าเท่ากับ 1,0,0,0 โดยมาจาก inline-style

CSS : !important

แม้ inline-style จะสำคัญที่สุด แต่ !important ทำให้ style ตัวนั้น มีความสำคัญที่สุดชนะทุกค่า มีค่าเป็น 1,0,0,0,0

CSS SPECIFICITY คืออะไร? รู้แล้วจะเลิกใช้ !IMPORTANT

CSS Specificity เป็นคอนเซปต์การเลือก CSS Selector ที่มี “ค่าพลัง” เยอะที่สุด มาใช้กับ Element บนหน้าเว็บไซต์ครับ (ขอใช้คำนี้แล้วกันครับ มันดูเป็นการ์ดพลังต่อสู้อะไรแบบนั้นดี ใครพลังเยอะกว่าก็ชนะ 55)

ภาษา CSS เหมือนภาษาการเขียนโปรแกรมอื่น ๆ ที่อ่านโค้ดจาก บน – ล่าง คือ ถ้าเขียน CSS Selector ซ้ำกัน 2 อัน อันล่างจะถูกนำไปใช้งานเพราะใหม่กว่า
แต่ความพิเศษของ CSS คือ Selector ที่แตกต่างกันแต่ละ Selector จะมี “ค่าพลัง” ไม่เหมือนกัน และเมื่อไหร่ที่ “ค่าพลัง” ต่างกัน ลำดับการเขียนโค้ดจะไม่มีผลทันที