เคยสงสัยไหมว่าเวลาเราเอาเมาส์เลื่อนไปที่ปุ่ม แล้วสีปุ่มหรือตัวอักษรเปลี่ยน เขาใช้ CSS ทำอย่างไร บทความนี้เราจะมาพูดถึงเรื่อง pseudo-class (class แฝง) ซึ่งใช้ในการกำหนดว่าเมื่อ element มีสภาวะอย่างนี้ ให้ใช้การตกแต่งตามนี้

CSS pseudo-class คือ

CSS pseudo-class คือ class แฝง ของ element ที่มีไว้เพื่อกำหนดว่าเมื่อ element มี state (สภาวะ) อย่างนี้ ให้ใช้การตกแต่งตามนี้ จริงๆ เราก็เคยใช้ pseudo-class กันแบบไม่รู้ตัวมาแล้ว จากบทความนี้ที่เราอธิบายเกี่ยวกับเรื่องของ DOM และโครงสร้างต้นไม้ เราได้ใช้ :first-child | :nth-child() | :last-child ซึ่งล้วนเป็น pseudo-class ทั้งสิ้น

วิธีการใช้ pseudo-class

ตัวเลือก:pseudo-class {
  คุณสมบัติ: ค่า;
}

ตัวอย่าง li ที่เป็นสภาวะลูกคนแรก

li:first-child {
  color: orange;
}

ไม่ได้มีแต่สภาวะลูกเท่านั้น

pseudo-class ไม่ได้มีไว้เพื่อตกแต่ง element ที่มีความสัมพันธ์เป็นลูกเท่านั้น แต่ยังมีความสัมพันธ์กับสิ่งต่างๆ เช่น ประวัติการเยี่ยมชมลิงค์ต่างๆ (:visited ของ <a>) สถานะของเนื้อหา (:checked ของ element ในฟอร์มบางตัว) และตำแหน่งของเมาส์ (:hover เมื่อเมาส์อยู่บน element นั้นๆ)

สภาวะการเป็นลูก

pseudo-class ที่ใช้บ่อยๆ เกี่ยวกับสภาวะการเป็นลูกก็จะมีอยู่ตามนี้

:first-child [ลูกคนแรก]

li:first-child {
  color: orange;
}

:nth-child(n) [ลูกคนที่ n]

li:nth-child(2) {
  color: orange;
}

:last-child [ลูกคนสุดส้าย]

li:last-child {
  color: orange;
}

สภาวะของเนื้อหา

สภาวะของเนื้อหาในที่นี้จะมีบาง element ที่เกี่ยวข้อง ซึ่งจากบทความก่อนๆ ยังไม่มีการพูดถึง element นั้นก็คือ input (การป้อนข้อมูล) ที่เอาไว้รับข้อมูลจากผู้ใช้ไม่ว่าจะเป็น ชื่อ อีเมล เบอร์โทรศัพท์ วันที่ รูปภาพ และอื่นๆ

:focus [สถานะโฟกัสของ input เมื่อผู้ใช้กำลังป้อนหรือกำลังจะป้อนข้อมูล]

input:focus {
  background-color: yellow;
  color: blue;
}

ผลลัพธ์จากโค้ดข้างบน

:checked [สถานะการถูกเลือกของ input ที่เป็น radio หรือ checkbox หรือ option]

input[type="radio"]:checked {
  box-shadow: 0 0 0 3px orange;
}

ผลลัพธ์จากโค้ดข้างบน

input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px red;
}

ผลลัพธ์จากโค้ดข้างบน

option:checked {
  box-shadow: 0 0 0 3px lime;
  color: blue;
}

ผลลัพธ์จากโค้ดข้างบน

HTMLCSSJavaScript

สถาวะของลิงค์และปุ่ม

สภาวะของลิงค์จะมีตามนี้ :link (ลิงค์ที่ยังไม่ถูกเข้าเยี่ยม) :visited (ลิงค์ที่ถูกเข้าเยี่ยมแล้ว) :hover (element ที่ถูกเอาเมาส์ไปวาง) :active (ลิงค์หรือปุ่มที่ถูกกดคลิก) ซึ่งสภาวะของลิงค์ควรจะถูกกำหนดด้วยการเรียงตามนี้จากบนลงล่าง เพื่อให้ทุกการตกแต่งถูกใช้ตามสภาวะนั้นๆ เคล็ดลับการจำง่ายๆ ก็คือ LoVe HAte (คนเราต้องรักก่อนถึงจะเกลียดได้)

a:link {
  color: blue;
}
a:visited {
  color: purple;
}
a:hover {
  background-color: yellow;
}
a:active {
  color: red;
}

ผลลัพธ์จากโค้ดข้างบน

ตัวอักษรลิงค์จะกลายเป็นสีแดงเมื่อโดนคลิก

ทิ้งท้าย

เรื่อง pseudo-class ได้พูดถึงคร่าวๆ ในเพจไปแล้ว แต่ในบทความนี้จะมาขยายถึงสภาวะต่างๆ และวิธีการใช้ ถ้าตรงไหนยังงงๆ ไม่เข้าใจติดต่อมาได้ในกลุ่มหรือเพจตามเดิมนะครัช หากชอบบทความช่วยกันกดไลค์และแชร์ไปให้เพื่อนๆ ที่สนใจด้านนี้ด้วยนะครับ :)

ขอขอบคุณรูปภาพจาก pixabay.com from Pexels