กฏการใช้ !important

ในการกำหนด CSS ให้กับเอกสารนั้น เราจะพบกับปัญหาหนึ่งก็คือปัญหาการกำหนด Style กันซับซ้อนในอิลิเมนต์เดียวกัน ซึ่งทำให้มันไม่รู้ว่าเราต้องการใช้ Property ไหนกันแน่ ดังนั้น CSS จึงได้กำหนด !important ขึ้นมาเพื่อให้ผู้ใช้สามารถระบุได้ว่า เราต้องการใช้ Property นั้น ๆ โดยไม่สนใจ Property อื่นที่เราไม่ต้องการใช้ เราไปดูตัวอย่างการใช้กันเลยครับ

ตัวอย่างการใช้งานคำสั่ง !important

1.div {

2.color: black !important;

3.}

จากตัวอย่างเราได้กำหนดคำสั่ง !important ไว้ข้างหลังค่าของ property ("color") ซึ่งเป็นการระบุว่าไม่ว่าเราจะกำหนด Property "color" ให้กับ selectors ใดก็ตามที่เป็นแท็ก div เป็นค่าอื่น ๆ มันก็จะไม่สนใจค่าอื่น ๆ นั้น มันจะใช้ค่านี้เท่านั้น เพราะ ได้กำหนดโดยคำสั่ง !important แล้ว เช่นถ้าเรากำหนดอีก selectors หนึ่งซึ่งเป็นแท็ก div เช่นกันให้ Property "color" เป็นค่าอื่น ๆ

1.div {

2.color: black !important;

3.}

4.div#someid {

5.color: orange;

6.}

จากตัวอย่างถึงแม้ว่าเราได้กำหนดให้แท็ก div หนึ่งมี id = "someid" ก็ตาม แต่ค่า Property "color" ที่จะได้รับจริง ๆ ก็คือค่า black เพราะว่าถูกกำหนดเป็น !important

โดยปกติแล้วการกำหนด Style แบบ inline จะมีความสำคัญสูงสุด ซึ่งหมายความว่ามันจะยึดค่า Property ที่เราระบุใน inline โดยสำคัญที่สุด (ถ้าเรากำหนด) แต่ในกรณีที่เราใช้คำสั่ง !important มันก็จะไม่สนใจการกำหนดใน inline ลองไปดูกัน ครับ

view source

print?

01.<-- ส่วนการกำหนด Style -->

02.div {

03.color: black;

04.}

05. 

06.<-- ส่วนของแท็ก HTML -->

07.<div style='color: purple;'>

08.some text

09.</div>

ค่าของ Property "color" ของแท็ก div นี้ที่จะได้รับจริง ๆ ก็คือค่าสี "black" ไม่ใช่ "purple"

source : http://www.basic-skill.com/content.php?cont_title=%E0%B8%81%E0%B8%8F%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%83%E0%B8%8A%E0%B9%89%20!important&cont_id=290&sec_id=10