การใช้งาน CSS Pseudo-classes และ Pseudo-elements

การใช้งาน CSS Pseudo-classes และ Pseudo-elements

ในบทเรียนที่ผ่านมา เราได้เรียนรู้เกี่ยวกับการสร้าง Responsive Design ด้วย Media Queries เพื่อให้เว็บไซต์ของเราแสดงผลได้ดีบนอุปกรณ์ต่างๆ ในบทนี้ เราจะมาเรียนรู้เทคนิคการเพิ่มลูกเล่นและความน่าสนใจให้กับเว็บไซต์ของเราด้วย Pseudo-classes และ Pseudo-elements ใน CSS ซึ่งจะช่วยให้เราสามารถเลือกและปรับแต่งองค์ประกอบ HTML ได้อย่างละเอียดมากยิ่งขึ้น โดยไม่ต้องพึ่งพา JavaScript มากนัก

Pseudo-classes คืออะไร?

Pseudo-classes คือสิ่งที่ใช้ในการเลือกองค์ประกอบ HTML ที่อยู่ในสถานะ (state) บางอย่าง หรือมีลักษณะพิเศษบางประการที่ไม่สามารถเลือกได้โดยใช้ selector ปกติ ตัวอย่างเช่น เมื่อผู้ใช้เอาเมาส์ไปวางเหนือลิงก์ (:hover) หรือเมื่อผู้ใช้กำลังกดปุ่ม (:active) Pseudo-classes จะถูกเขียนโดยใช้เครื่องหมายโคลอนเดี่ยว (:) นำหน้าชื่อ Pseudo-class

ตัวอย่างการใช้งาน Pseudo-classes

เรามาดูตัวอย่างการใช้งาน Pseudo-classes ที่พบบ่อยกัน:

:hover

:hover ใช้เมื่อผู้ใช้เลื่อนเมาส์ไปวางเหนือองค์ประกอบ HTML

a:hover {
  color: red;
  text-decoration: underline;
}

โค้ดนี้จะเปลี่ยนสีของลิงก์เป็นสีแดงและขีดเส้นใต้เมื่อผู้ใช้เลื่อนเมาส์ไปวางเหนือลิงก์

:active

:active ใช้เมื่อผู้ใช้กำลังคลิกหรือกดองค์ประกอบ HTML

button:active {
  background-color: blue;
  color: white;
}

โค้ดนี้จะเปลี่ยนสีพื้นหลังของปุ่มเป็นสีน้ำเงินและสีตัวอักษรเป็นสีขาวเมื่อผู้ใช้กำลังคลิกปุ่ม

:nth-child()

:nth-child() ใช้ในการเลือกองค์ประกอบที่เป็นลูกขององค์ประกอบอื่น โดยอิงตามตำแหน่งของลูก ตัวอย่างเช่น

ul li:nth-child(odd) {
  background-color: #f2f2f2;
}

ul li:nth-child(even) {
  background-color: #ffffff;
}

โค้ดนี้จะกำหนดสีพื้นหลังให้กับรายการ (li) ที่อยู่ในรายการไม่เรียงลำดับ (ul) โดยรายการที่เป็นเลขคี่จะมีสีพื้นหลังเป็นสีเทาอ่อน และรายการที่เป็นเลขคู่จะมีสีพื้นหลังเป็นสีขาว

เหตุผลเชิงออกแบบ: การใช้ :nth-child() ช่วยให้เราสามารถสร้างตารางหรือรายการที่มีแถบสีสลับกันได้อย่างง่ายดาย ทำให้ผู้อ่านสามารถอ่านข้อมูลได้ง่ายขึ้น การทำเช่นนี้ด้วย JavaScript จะซับซ้อนกว่ามาก

Trade-offs: การใช้ :nth-child() อาจทำให้โค้ด CSS ยาวขึ้นเล็กน้อย แต่โดยรวมแล้วจะช่วยลดความซับซ้อนของโค้ด และเพิ่มความสามารถในการบำรุงรักษา

แนวปฏิบัติที่ดี: ใช้ :nth-child() เพื่อสร้างรูปแบบที่สอดคล้องกันและช่วยให้ผู้ใช้เข้าใจข้อมูลได้ง่ายขึ้น

Pseudo-elements คืออะไร?

Pseudo-elements คือสิ่งที่ใช้ในการสร้างองค์ประกอบเสมือน (virtual elements) ที่ไม่ได้มีอยู่ใน HTML จริงๆ แต่สามารถนำมาใช้ในการจัดรูปแบบและตกแต่งองค์ประกอบ HTML ได้ ตัวอย่างเช่น การเพิ่มข้อความหรือรูปภาพก่อนหรือหลังองค์ประกอบ HTML Pseudo-elements จะถูกเขียนโดยใช้เครื่องหมายโคลอนคู่ (::) นำหน้าชื่อ Pseudo-element

ตัวอย่างการใช้งาน Pseudo-elements

เรามาดูตัวอย่างการใช้งาน Pseudo-elements ที่พบบ่อยกัน:

::before

::before ใช้ในการแทรกเนื้อหาก่อนเนื้อหาขององค์ประกอบ HTML

.warning::before {
  content: "คำเตือน: ";
  color: red;
  font-weight: bold;
}

โค้ดนี้จะเพิ่มข้อความ "คำเตือน: " สีแดงและตัวหนาก่อนเนื้อหาขององค์ประกอบที่มีคลาส .warning

เหตุผลเชิงออกแบบ: การใช้ ::before ทำให้เราสามารถเพิ่มข้อมูลเพิ่มเติมเข้าไปในองค์ประกอบ HTML โดยไม่ต้องแก้ไข HTML โดยตรง ซึ่งมีประโยชน์อย่างมากในการเพิ่มไอคอนหรือข้อความกำกับ

Trade-offs: ::before ไม่สามารถใช้กับองค์ประกอบที่ถูกแทนที่ (replaced elements) เช่น <img> หรือ <input>

แนวปฏิบัติที่ดี: ใช้ ::before สำหรับการตกแต่งหรือเพิ่มข้อมูลที่ไม่สำคัญต่อเนื้อหาหลักขององค์ประกอบ

::after

::after ใช้ในการแทรกเนื้อหาหลังเนื้อหาขององค์ประกอบ HTML

.link::after {
  content: " (ภายนอก)";
  color: gray;
  font-size: 0.8em;
}

โค้ดนี้จะเพิ่มข้อความ " (ภายนอก)" สีเทาและขนาดเล็กกว่าหลังเนื้อหาขององค์ประกอบที่มีคลาส .link ซึ่งมักใช้เพื่อบ่งบอกว่าลิงก์นั้นจะนำผู้ใช้ไปยังเว็บไซต์ภายนอก

เหตุผลเชิงออกแบบ: การใช้ ::after ช่วยให้เราสามารถเพิ่มข้อมูลเพิ่มเติมเข้าไปในองค์ประกอบ HTML โดยไม่ต้องแก้ไข HTML โดยตรง ซึ่งมีประโยชน์อย่างมากในการเพิ่มไอคอนหรือข้อความกำกับ

Trade-offs: ::after ไม่สามารถใช้กับองค์ประกอบที่ถูกแทนที่ (replaced elements) เช่น <img> หรือ <input>

แนวปฏิบัติที่ดี: ใช้ ::after สำหรับการตกแต่งหรือเพิ่มข้อมูลที่ไม่สำคัญต่อเนื้อหาหลักขององค์ประกอบ

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับการใช้งาน Pseudo-classes และ Pseudo-elements ใน CSS ซึ่งเป็นเครื่องมือที่มีประโยชน์ในการเพิ่มลูกเล่นและความน่าสนใจให้กับเว็บไซต์ของเรา Pseudo-classes ช่วยให้เราสามารถเลือกองค์ประกอบ HTML ที่อยู่ในสถานะต่างๆ ได้ ในขณะที่ Pseudo-elements ช่วยให้เราสามารถสร้างองค์ประกอบเสมือนและแทรกเนื้อหาก่อนหรือหลังองค์ประกอบ HTML ได้ การใช้ Pseudo-classes และ Pseudo-elements อย่างเหมาะสมจะช่วยให้เราสร้างเว็บไซต์ที่สวยงามและใช้งานง่ายยิ่งขึ้น โดยไม่ต้องพึ่งพา JavaScript มากนัก

ในบทต่อไป เราจะมาเรียนรู้เกี่ยวกับการสร้าง Animation ด้วย CSS Transitions ซึ่งจะช่วยให้เราเพิ่มความเคลื่อนไหวและลูกเล่นให้กับเว็บไซต์ของเราได้อย่างง่ายดาย