Tip: CSS Specificity

วันนี้เอา tip ดี ๆ มาฝากเช่นเคย เชื่อได้เลยว่า มีหลายคนที่เกิดปัญหางง ๆ กับ css เพราะในบางครั้งเราสร้าง css หลัก ๆ มา แล้วตาม ด้วย element ของ html หรือสร้าง css ซ้อน css หรือการเรียกใช้ css ซ้อน css โอ้ยๆๆๆ ปัญหาล้านแปด จนบางครั้งปวดกะบานไปเลยก็มี ปัญหาต่าง ๆ อะไรก็ตามแต่ ที่เรียกใช้ css แล้วมันไม่ทำตามความต้องการของเรา ปัญหาพวกนี้มันเป็น หลักการมองความสำคัญของ css ที่คุณได้ตั้งไว้ เช่น id หรือ class ก็ตาม

ใน xhtml จะมีข้อจำกัดและมองความสำคัญ โดยมองตัวเลขเจาะจง 3 ตัว
ตัวอย่างเช่น 0,0,0

ตัวเลขตัวแรกอยู่ทางซ้ายมือสุด ตัวเลขตัวนี้จะแทน ID ดังนั้น id จะเป็นตัวสำคัญที่สุด ดังนั้นเมื่อคุณเลือก id ใช้กับ xhtml มันจะทำตามคำสั่งคุณเป็นหลัก ถึงแม้คุณเรียกใช้ class อื่นก็ตาม (A selector with the most ID points is always the most specific)

ตัวอย่าง

#header { } = 1,0,0
ตัวเลขตัวที่สองจะแทน Class ดังนั้นมันเป็นจะทำงานกับ pseudo-class และ attribute selectors เท่านั้น


ตัวอย่าง

.content { } = 0,1,0
ตัวเลขที่สามจะแทน element และ pseudo-element เท่านั้น

ตัวอย่าง

p { } = 0,0,1
ก็อย่างที่บอกไปสิ่งสำคัญหลัก ๆ คือการเลือกใช้ให้ถูกต้อง
สมมุติว่า คุณตั้ง CSS

#header{color:#000;}
.content{color:#CE0054;}

แต่ code xhtml ของคุณเขียนเป็น

<div id="header">

     <p>xxxxxxxxx</p>

          <div class="content">xxxxxxxxaaaaabbbb</div>

</div>

คุณอาจจะงงว่าทำไมตัวอักษรที่คุณเรียกใช้ .content ไม่เป็นสีตามที่คุณต้องการ เป็นเพราะว่า คุณเรียกใช้ #header
เป็นตัวหลักอยู่นั้นเอง ดังนั้นตัวอักษรจะมอง id เป็นหลักเสมอ ถึงแม้คุณจะเรียก class ตัวไหนก็ตาม

การมองเลข

#header {} = 1,0,0

#header .content{} = 1,1,0

#header p {} = 1,0,1

.content {} = 0,1,0

.content p {} = 0,1,1

p {} = 0,0,1


*** แต่ๆๆๆๆๆ สิ่งสำคัญคือ ถ้าเป็น inline style ตัวเลขจะเปลี่ยนทันทีเป็น 1,0,0,0

ดังนั้น คุณต้องรู้เรื่อง xhtml ด้วยเหมือนกัน ไม่เช่นนั้น เวลาคุณเขียนเว็บคุณก็จะนั่งงงงงงงงง ตัว "ง" จะเป็นล้าน ๆ ตัว