id และ class ใน div ของ CSS ต่างกันอย่างไร

ห่างไปนานๆ เริ่มจะมีประสบการณ์ใหม่ๆ มาเยอะครับหลังจากได้ทดลองทำเวบไซต์ด้วย PHP และการใช้ Flash ทำงานเยอะๆ  เราจะมาเริ่มด้วยการใช้ CSS ในการจัดการเกี่ยวกับ layout ในเวบครับ

วันนี้จะเสนอเกี่ยวกับความแตกต่างและการประยุกต์ใช้ id และ class ของ css นะครับ

เมื่อเราจะสร้าง css ขึ้นมาเพื่อจัดการอะไรสักอย่างจะต้องตั้งชื่อ id หรือไม่ก็ class นะครับ โดยที่ชื่อ id จะต้องไม่ซ้ำกัน

id จะเป็นอย่างนี้

#mybody{
}

class จะเป็นอย่างนี้

.myClass1{
}

เราจะเรียกใช้ css ที่แท็ก DIV อย่างนี้

<div id=”mybody”>Content for  id “mybody” Goes Here</div>
<div id=”mybody” class=”myClass1″>Content for  class “myClass1″ id “mybody” Goes Here</div>

ปกติแล้วเราจะใช้ แค่ id อย่างเดียวก้อพอ แต่หากต้องการเสริมรายละเอียดอื่นๆ ให้กับ id นั้นโดยที่ยังมีอะไรเหมือนกันอยู่เช่น

#mybody1{
font-size: 12px;
}
#mybody2{
font-size: 12px;
color: #666;
}

เราต้องการสร้าง font ของ div หนึ่งๆ ให้มีขนาด 12px และอีก div ก้ออยากให้มี font 12px เช่นกันแต่อยากได้คนละสี เราจึงเขียน css เหมือนโค้ดข้างบน เมื่อเราต้องการให้ div ทั้งสองเปลี่ยนขนาด font เป็น 10px จึงต้องไปเปลี่ยนทั้งสอง css ดังนั้นเราสามารถใช้ class มาช่วยได้เพื่อเพิ่มความยืดหยุ่นของการเปลี่ยนสไตล์ที่ซ้ำซ้อน ดังนี้

#mybody{
font-size: 12px;
}
.mycolor1{
color: #666;
}
<div id=”mybody”>Content for  id “mybody” Goes Here</div>
<div id=”mybody” class=”mycolor1″>Content for  class “mycolor1″ id “mybody” Goes Here</div>

หากเราต้องการเปลี่ยนขนาด font ก้อสามารถเปลี่ยนได้เลยที่ #mybody แล้วมันจะเปลี่ยนขนาด font ให้กับทุกๆ div ที่เรียกใช้มัน

และแล้วเราก้อจะรู้เกี่ยวกับประโยชน์ของการใช้ class ใน css แล้วนะครับ มันจะช่วยเราได้กับการจัดการสไตล์ที่ซ้ำซ้อนครับ เพื่อง่ายต่อการแ้ก้ไขและเพิ่มเติมครับ