ผมจะเริ่มโดยใช้ HTML ตัวนี้นะครับ
[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>
[/html]
Pseudo-Classes :root
สำหรับ :root ผมรู้สึกว่า มันทำหน้าที่ selector เหมือนกับเราสั่งกับ body อะไรแบบนั้นอะครับ อย่างเช่น
[css]
:root {background:pink;}
[/css]
เราเลยได้ผลลัพธ์ออกมาเป็นแบบนี้ครับ
![[CSS3] Pseudo-Classes [1]](https://rabbitinblack.com/wp-content/uploads/2012/03/pseudo-classes-01.png "[CSS3] Pseudo-Classes [1]")
:root มันคือการเลือก root ของตัว document ซึ่งผลที่ได้ก็คือ หน้าเว็บของเรามีพื้นหลังเป็นสีชมพู
Pseudo-Classes :nth-child(n)
สำหรับตัว :nth-child(n) นั้น มันก็คือการเลือกลำดับที่นั่นละครับ อย่างเช่นเราต้องการให้ตัว element ลำดับที่ 4 ใน id post มีขนาดตัวอักษรใหญ่ขึ้น แล้วเป็นสีเขียว เราก็เขียนไปว่า
[css]
#post :nth-child(4) {font-size:30px;color:green;}
[/css]
ผลลัพธ์ที่ได้ออกมาก็จะเป็น
![[CSS3] Pseudo-Classes [2]](https://rabbitinblack.com/wp-content/uploads/2012/03/pseudo-classes-02.png "[CSS3] Pseudo-Classes [2]")
แล้วถ้าเราจะเลือกเป็น tag h3 ที่อยู่ในลำดับที่ 4 ใน id post ละ งั้นก็เขียนแบบนี้แล้วกัน
[css]
#post h3:nth-child(4) {font-size:30px;color:green;}
[/css]
ผลลัพธ์ออกมาเราก็จะได้ tag h3 ลำดับที่ 4 มีขนาดใหญ่ขึ้น เป็นสีเขียว
อ้าว เฮ้ย ไม่เห็นได้เลย ก็เพราะว่าตัว :nth-child(4) นั้น มันจะวิ่งดูใน id post ว่าตัวไหนเป็นลำดับที่ 4 แล้วค่อยมาดูว่าลำดับที่ 4 ตรงกับ selector ที่เรากำหนดไว้หรือเปล่า ซึ่งในตัวอย่างลำดับที่ 4 มันต้องเป็น tag p ไม่ใช่ tag h3 ดังนั้นมันเลยไม่แสดงผลที่เรากำหนด
ดังนั้นถ้าเราต้องการให้ tag h3 ในลำดับที่ 4 มันแสดงผลแบบที่เราต้องการ ก็ต้องนับก่อนมันอยู่ลำดับที่เท่าไหร่ใน id post ซึ่งเราก็จะได้ว่า
[css]
#post h3:nth-child(7) {font-size:30px;color:green;}
[/css]
คราวนี้มาดูผลลัพธ์ว่าตรงกับที่เราต้องการมั้ย
![[CSS3] Pseudo-Classes [3]](https://rabbitinblack.com/wp-content/uploads/2012/03/pseudo-classes-03.png "[CSS3] Pseudo-Classes [3]")
ตรงกับที่เราต้องการแล้ว แต่แบบนี้มันก็ลำบากนะ ต้องมานับเองว่ามันจะอยู่ในลำดับที่เท่าไหร่ใน id post มันน่าจะมีวิธีที่ง่ายกว่า ซึ่งมันก็มีครับคือการใช้ :nth-of-type(n)
Pseudo-Classes :nth-of-type(n)
สำหรับ :nth-of-type(n) นั้นจะแบ่งตามประเภทของ element เลยครับ อย่างเช่น เราจะเลือกลำดับที่ 3 นะครับ
[css]
#post :nth-of-type(3) {font-size:30px;color:green;}
[/css]
เราก็จะได้ผลลัพธ์ออกมาเป็น
![[CSS3] Pseudo-Classes [4]](https://rabbitinblack.com/wp-content/uploads/2012/03/pseudo-classes-04.png "[CSS3] Pseudo-Classes [4]")
จะเห็นว่า tag h3 และ tag p ที่อยู่ในลำดับที่ 3 เป็นตัวใหญ่สีเขียวทั้งคู่ เพราะว่ามันแบ่งแยกลำดับตาม element
คราวนี้จากตัวอย่างของหัวข้อที่แล้ว เราจะมาเลือก tag h3 ลำดับที่ 4 กันใหม่ โดยใช้ :nth-of-type(n) แทนตัว :nth-child(n)
[css]
#post h3:nth-of-type(4) {font-size:30px;color:green;}
[/css]
ผลลัพธ์ที่ได้ก็จะเป็น
ซึ่งแบบนี้ก็จะง่ายกว่าที่เราต้องมานับลำดับในแบบของ :nth-child(n) ยังไงก็ลองนำไปใช้งานจริงดูนะครับ จะได้ใช้งานได้คล่อง ๆ
Leave a Reply