เลือกตัวเลือก class CSS

ใน CSS คลาสเลือกตัวแทนแสดงด้วยจุดตั้งแต่ต้น

.center {text-align: center}

ในตัวอย่างที่อยู่ด้านบน ทุกองค์ประกอบ HTML ที่มีคลาส center จะจัดให้อยู่ในกลาง

ในรหัส HTML ที่อยู่ด้านล่าง h1 และองค์ประกอบ p มีคลาส center ซึ่งหมายความว่าทั้งสองจะปฏิบัติตามกฎของเลือกตัวแทน ".center"

<h1 class="center">
ย่อหน้านี้จะถูกจัดให้อยู่ในกลางของหน้าปฏิมาณาธิปไตย
</h1>
<p class="center">
ย่อหน้านี้จะถูกจัดให้อยู่ในกลางของหน้าปฏิมาณาธิปไตย
</p>

แจ้งเตือน：ตัวอักษรแรกของชื่อ class ไม่สามารถใช้ตัวเลขได้! มันจะไม่ทำงานใน Mozilla หรือ Firefox。

เหมือนกับ id รวมทั้ง class ก็สามารถใช้เป็นเลือกตัวแทนที่มาจากนามที่เกิดขึ้นเอง：

.fancy td {
	color: #f60;
	background: #666;
	}

ในตัวอย่างนี้ แถวของตารางภายในองค์ประกอบที่ใหญ่กว่าที่มีชื่อ fancy จะแสดงข้อความสีน้ำตาลด้วยสีขาว。（องค์ประกอบที่ใหญ่กว่าที่มีชื่อ fancy อาจเป็นตารางหรือ div）

องค์ประกอบก็สามารถถูกเลือกด้วยคลาสของเขาด้วย:

td.fancy {
	color: #f60;
	background: #666;
	}

ในตัวอย่างดังกล่าว ช่องตารางที่มีชื่อ class fancy จะมีพื้นหลังสีเทาและสีน้ำตาล

<td class="fancy">

คุณสามารถกำหนดคลาส fancy ให้กับช่องตารางใดก็ได้หลายครั้ง ช่องตารางที่มีการหมายชื่อ fancy จะมีพื้นหลังสีเทาและสีน้ำตาล ช่องตารางที่ไม่มีการกำหนดคลาส fancy จะไม่ได้รับผลกระทบจากกฎนี้ นอกจากนี้ ประโยคที่มีคลาส fancy ก็จะไม่มีพื้นหลังสีเทาและสีน้ำตาล และอื่นๆที่มีการหมายชื่อ fancy ก็จะไม่ได้รับผลกระทบจากกฎนี้ นี่เนื่องมาจากวิธีที่เราเขียนกฎนี้ ผลกระทบของกฎนี้จะถูกจำกัดในช่องตารางที่มีการหมายชื่อ fancy (ดังนั้นคือการใช้ td ที่เลือกคลาส fancy)

เนื้อหาที่เกี่ยวข้อง

หากคุณต้องการเรียนรู้เกี่ยวกับความรู้เกี่ยวกับการเลือกตัวเลือก class มากยิ่งขึ้น โปรดอ่านอบรมซับซ้อนของ CodeW3C.com:การเลือกตัวเลือก class CSS ละเอียด.