[CSS3] Pseudo-Classes

ผมจะเริ่มโดยใช้ HTML ตัวนี้นะครับ

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pseudo-Classes</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="post">
	<h3 class="post_text">ABC</h3>
	<p class="post_text">ABC</p>
	<h3 class="post_text">ABC</h3>
	<p class="post_text">ABC</p>
	<h3 class="post_text">ABC</h3>
	<p class="post_text">ABC</p>
	<h3 class="post_text">ABC</h3>
	<p class="post_text">ABC</p>
	<h3 class="post_text">ABC</h3>
	<p class="post_text">ABC</p>
</div>
</body>
</html>

Pseudo-Classes :root

สำหรับ :root ผมรู้สึกว่า มันทำหน้าที่ selector เหมือนกับเราสั่งกับ body อะไรแบบนั้นอะครับ อย่างเช่น

:root {background:pink;}

เราเลยได้ผลลัพธ์ออกมาเป็นแบบนี้ครับ

:root มันคือการเลือก root ของตัว document ซึ่งผลที่ได้ก็คือ หน้าเว็บของเรามีพื้นหลังเป็นสีชมพู

Pseudo-Classes :nth-child(n)

สำหรับตัว :nth-child(n) นั้น มันก็คือการเลือกลำดับที่นั่นละครับ อย่างเช่นเราต้องการให้ตัว element ลำดับที่ 4 ใน id post มีขนาดตัวอักษรใหญ่ขึ้น แล้วเป็นสีเขียว เราก็เขียนไปว่า

#post :nth-child(4) {font-size:30px;color:green;}

ผลลัพธ์ที่ได้ออกมาก็จะเป็น

แล้วถ้าเราจะเลือกเป็น tag h3 ที่อยู่ในลำดับที่ 4 ใน id post ละ งั้นก็เขียนแบบนี้แล้วกัน

#post h3:nth-child(4) {font-size:30px;color:green;}

ผลลัพธ์ออกมาเราก็จะได้ tag h3 ลำดับที่ 4 มีขนาดใหญ่ขึ้น เป็นสีเขียว

อ้าว เฮ้ย ไม่เห็นได้เลย ก็เพราะว่าตัว :nth-child(4) นั้น มันจะวิ่งดูใน id post ว่าตัวไหนเป็นลำดับที่ 4 แล้วค่อยมาดูว่าลำดับที่ 4 ตรงกับ selector ที่เรากำหนดไว้หรือเปล่า ซึ่งในตัวอย่างลำดับที่ 4 มันต้องเป็น tag p ไม่ใช่ tag h3 ดังนั้นมันเลยไม่แสดงผลที่เรากำหนด

ดังนั้นถ้าเราต้องการให้ tag h3 ในลำดับที่ 4 มันแสดงผลแบบที่เราต้องการ ก็ต้องนับก่อนมันอยู่ลำดับที่เท่าไหร่ใน id post ซึ่งเราก็จะได้ว่า

#post h3:nth-child(7) {font-size:30px;color:green;}

คราวนี้มาดูผลลัพธ์ว่าตรงกับที่เราต้องการมั้ย

ตรงกับที่เราต้องการแล้ว แต่แบบนี้มันก็ลำบากนะ ต้องมานับเองว่ามันจะอยู่ในลำดับที่เท่าไหร่ใน id post มันน่าจะมีวิธีที่ง่ายกว่า ซึ่งมันก็มีครับคือการใช้ :nth-of-type(n)

Pseudo-Classes :nth-of-type(n)

สำหรับ :nth-of-type(n) นั้นจะแบ่งตามประเภทของ element เลยครับ อย่างเช่น เราจะเลือกลำดับที่ 3 นะครับ

#post :nth-of-type(3) {font-size:30px;color:green;}

เราก็จะได้ผลลัพธ์ออกมาเป็น

จะเห็นว่า tag h3 และ tag p ที่อยู่ในลำดับที่ 3 เป็นตัวใหญ่สีเขียวทั้งคู่ เพราะว่ามันแบ่งแยกลำดับตาม element

คราวนี้จากตัวอย่างของหัวข้อที่แล้ว เราจะมาเลือก tag h3 ลำดับที่ 4 กันใหม่ โดยใช้ :nth-of-type(n) แทนตัว :nth-child(n)

#post h3:nth-of-type(4) {font-size:30px;color:green;}

ผลลัพธ์ที่ได้ก็จะเป็น

ซึ่งแบบนี้ก็จะง่ายกว่าที่เราต้องมานับลำดับในแบบของ :nth-child(n) ยังไงก็ลองนำไปใช้งานจริงดูนะครับ จะได้ใช้งานได้คล่อง ๆ