CSS : ลำดับความสำคัญของ style ใน CSS

ในการเขียน CSS เราคงสงสัยว่าทำไมถึงมีการเขียนแยกเป็น ID เป็น class จะใช้ ID อย่างเดียวเลยได้มั้ย หรือจะใช้ class อย่างเดียวเลยได้มั้ย มาไขข้อข้องใจกันดีกว่า

HTML : ID กับ Class ต่างกันยังไง

ถ้าตามที่ผมจำมาตลอดนะครับ ID จะใช้ครั้งเดียวใน 1 หน้าเว็บ ส่วน class จะใช้กี่ครั้งก็ได้ การที่ ID ใช้ครั้งเดียวใน 1 หน้าเว็บนั้นจะมีผลตอนที่เราเขียน script ต่าง ๆ (นี่คือที่ผมเข้าใจมาตลอดนะครับ ถูกผิดยังไง comment ด้านล่างบอกผมด้วยนะครับ >_<) ดังนั้นเวลาผมเขียน Code จะวางแผนว่าอะไรที่จะตั้งอะไรเป็น ID และอะไรเป็น class อย่างเช่นตัวอย่างแบบนี้ [html] <div id="header"> <h2 class="title-text">Header</h2> <p>Hello World in Header</p> </div> <div id="main"> <h3 class="title-text">Main</h3> <p>Hello World in Main</p> </div> <div id="footer"> <h4 class="title-text">Footer</h4> <p>Hello World in Footer</p> </div> [/html] ผมเห็นว่าใน 1 หน้าเว็บของเรานั้น จะมี Header, Main และ Footer ที่เดียวแน่ ๆ เลยตั้งให้เป็น ID และข้อความที่เป็นหัวข้อมีหลายที่เลยตั้งให้เป็น class ชื่อ title-text

CSS : ID กับ Class ต่างกันยังไง

คราวนี้มาดูในกรณีที่เราจะเขียน CSS นะครับ สมมติผมจะเขียน CSS ให้กับ HTML ด้านบนนะครับ

[css]

#header {background:#60A2AA;color:#FFFFFF;padding:10px;}
#main {background:#CCE2B5;color:#7CAB6A;padding:20px;}
#footer {background:#FAF2E5;color:#EC9974;padding:10px;}

.title-text {font-size:18px;}

[/css]

จะเห็นข้อแตกต่างว่า ถ้าเป็น ID แล้วเวลาใช้งาน CSS เราจะเขียนนำด้วยเครื่องหมาย # และถ้าเป็น class เราจะเขียนนำด้วย . ในการใช้งาน ผลลัพธ์ที่ได้จะออกมาเป็นแบบนี้นะครับ

CSS : บนล่างก็มีผลนะ

CSS นั้นจะมองความสำคัญของตัวที่เขียนด้านล่าง มากกว่าด้านบน อย่างเช่น

[css]
.title-text {font-size:18px;}

.title-text {font-size:24px;}
[/css]

แบบนี้ผลลัพธ์ที่เราได้คือ class=”title-text” จะมีขนาดตัวอักษร 24px ตามลำดับที่อยู่ด้านล่่าง

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

ผมถือดีตั้งชื่อมันเองว่า ค่าความสำคัญ แต่จริง ๆ แล้วมันเรียกว่า Specificity Value โดยมันแบ่งคะแนนเป็นดังนี้

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

  [html]
  <div id="header" style="background:#000000;">
  [/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]
ul#nav li.active a
[/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]
#header #nav .smalltext
[/css]

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

[html]
<li style="color:#B23D61">
[/html]

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

CSS : !important

แต่ก็เหมือนการ์ตูนบางเรื่องที่ตอนแรกก็มีบอส แต่ตอนหลังก็มีบอสที่ใหญ่กว่า เหมือนกันที่ inline-style อาจจะสำคัญที่สุด แต่ถ้าเราใส่ !important ลงไป ก็จะปรากฎว่า style ตัวนั้นจะมีความสำคัญที่สุดแทน โดยให้คิดว่ามันมีค่าเป็น 1,0,0,0,0 อย่างเช่น

[html]
<div id="header" style="background:#000;">
<h2 class="title-text">Header</h2>
<p>Hello World in Header</p>
</div>
<div id="main">
<h3 class="title-text">Main</h3>
<p>Hello World in Main</p>
</div>
<div id="footer">
<h4 class="title-text">Footer</h4>
<p>Hello World in Footer</p>
</div>
[/html]

[css]
#header {background:#60A2AA;color:#FFFFFF;padding:10px;}
#main {background:#CCE2B5;color:#7CAB6A;padding:20px;}
#footer {background:#FAF2E5;color:#EC9974;padding:10px;}

.title-text {font-size:18px;}
[/css]

จาก Code เราจะรู้ทันทีว่าพื้นหลังต้องเป็นสีดำแน่ ๆ เพราะมี inline-style อยู่ที่ ID header

แต่ถ้าเราใส่ !important ลงไป

[css]
#header {background:#60A2AA !important;color:#FFFFFF;padding:10px;}
#main {background:#CCE2B5;color:#7CAB6A;padding:20px;}
#footer {background:#FAF2E5;color:#EC9974;padding:10px;}

.title-text {font-size:18px;}
[/css]