คราวที่แล้วเราพูดถึง simple selectors ไปแล้ว มาเพิ่มเติมกันต่อ simple selectors สามารถที่จะมี class และ id ที่ต่างกันได้ ตัวอย่าง

p.calss1{ color:#ffffff } หรือ p.calss2{ color:#000000 }

ตัวอย่าง มี 2 คลาส ชื่อว่า class1 และ class2เมื่อนำไปใช้ในไฟล์ html จะเป็นดังนี้

<p class=”class1″>จะได้ตัวหนังสือสีขาว </p>

หรือ

<p class=”class2″>จะได้ตัวหนังสือสีดำ </p>

อีกรูปแบบหนึ่งคือกำหนดแต่คลาสอย่างเดียว ไม่ต้องมี selectors เช่น

.small { font-size:10px }

รูปแบบนี้สามารถ นำคลาสไปใส่ที่ใดก็ได้ ภายในขอบเขตนั้น ก็จะมี ฟ้อนต์เท่ากับ 10 เช่น

<div class=”small”> ตัวหนังสือ </div>

จะสังเกตุเห้นว่า class จะมี . นำหน้า แต่ ID นั้น จะใช้ # นำหน้า ตัวอย่างการกำหนด ID เช่น

#bgw { backgroung-colour:#ffffff }

เมื่อนำไปใช้

<p id=”bgw”> ภายในนี้จะมี bg สีขาว </p>

แล้ว ID กับ Class ใช้ในกรณีไหนล่ะ? ID จะใช้กับ สิ่งที่มีเพียงอันเดียว มักใช้กับส่วนที่เป็น layout เช่น #header #content #footer ส่วน class ใช้เมื่อ จะมีการทำซ้ำหลายๆครั้ง เช่น .boxcontent

การตั้งชื่อ class และ id ก็ควรให้มีความสัมพันธ์กับส่วนที่นำไปใช้ และควรเป็นตัวพิมพ์เล็กทั้งหมด ไม่ควรใช้ _ และ ตัวเลข นำหน้าชื่อ class และ id เพราะอาจมีปัญหากับเบราเซอร์รุ่นเก่าบางชนิดครับ