การใช้งานตัว !important ที่เรานั้นจะทำนั้นต้องเป็นการกำหนดค่า css โดยการ call class css เท่านั้นครับเพราะว่าการปรับ css ด้วย โค้ดเพื่อเปลี่ยน css โดยตรงแล้วยังไงก็ไม่มีปัญหาเรื่องนี้ครับจึงไม่มีความจำเป็นใดที่เราจะใช้ตัว !important เลยครับ เรามาต่อกันที่ทำมึงเราถึงจำเป็นจะต้องใช้ important นั้นเพราะว่าเรานั้นต้องการเอา css ที่เรานั้นได้กำหนดไว้แล้วมาใส่ในตัว element และเราอยากจะให้ตัว element ของเรานั้นใช้ตัว class อีกตัวนึงเพื่อ reset อะไรบางอย่างขึ้นมาแต่ว่าปรากฏว่าเอามาใส่แล้วใช้ไม่ได้ เราถึงต้องใช้ important เพื่อแสดงถึงความสำคัญให้ใช้ตัว important ก่อนเสมอครับซึ่งวิธีการใช้งานตัว important นั้นก็มีดังนี้ครับ
โค้ด: เลือกทั้งหมด
.helloworld{
left: 50% !important;
background-color: #4ab858 !important;
}
โค้ด: เลือกทั้งหมด
<div name="01" id="01" class="hello" style="top: 25%; left: 20%; position: absolute; background-color: #1b95e0; width: 200px; height: 200px;"></div>
โค้ด: เลือกทั้งหมด
<input type="button" id="name" value="เปลี่ยนชื่อ">
<script>
$("#name").click(function() {
$("#01").addClass("helloworld")
})
</script>
โค้ด: เลือกทั้งหมด
.helloworld{
left: 50% ;
background-color: #4ab858 ;
}
โค้ด: เลือกทั้งหมด
.helloworld{
left: 50% !important;
background-color: #4ab858 !important;
}
การที่นั้นจะใส่ important นั้นไม่ได้เป็นการเปลี่ยนแปลงตัว style เข้าไปนะครับถ้าสังเกตุดูดีๆถ้าหากว่าคุณได้ลองทำดูตัว style ต่างๆนั้นจะยังเป็นแบบที่เราต้องไว้อยู่ครับ ถ้าหากว่าเรานั้นอยากจะเปลี่ยนตัว style จริงๆให้เราใช้ javacscript ในการเปลี่ยน style หรือปัญหาอีกอย่างก็คือเราสามารถแก้ไขให้ตัว element ของเราไม่ต้องกำหนด class และเรียกผ่าน css style ครับถ้าหากว่าเราใช้วิธีนั้นเราก็ไม่จำเป็นจะต้องใช้ important ก็ได้ครับ ซึ่งข้อเสียของการกดหนด style ติดไว้ที่ element นั้นเราจะต้องใช้ javascript ในการเปลี่ยน style ถ้าหากว่าเพิ่ม class Important เข้าไปก็ใช้ได้แต่ถ้าหากว่าเราทำการลบ class นั้นทิ้งไปมันก็จะย้อนกลับไปใช้ในแบบที่เรากำหนดไว้ที่ element ครับ
อ้างอิง
https://www.w3schools.com/css/css_important.asp
https://rabbitinblack.com/2011/10/css-style-id-class/
https://developer.mozilla.org/en-US/docs/Web/CSS/important