Wed Jul 18 10:42:56 2018 [7890 views]
CSS Pseudo-Class คืออะไร?
เคยสงสัยไหมว่าเวลาเราเอาเมาส์เลื่อนไปที่ปุ่ม แล้วสีปุ่มหรือตัวอักษรเปลี่ยน เขาใช้ 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;
}
ผลลัพธ์จากโค้ดข้างบน
สถาวะของลิงค์และปุ่ม
สภาวะของลิงค์จะมีตามนี้ :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
เคยสงสัยไหมว่าเวลาเราเอาเมาส์เลื่อนไปที่ปุ่ม แล้วสีปุ่มหรือตัวอักษรเปลี่ยน เขาใช้ 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;
}
ผลลัพธ์จากโค้ดข้างบน
สถาวะของลิงค์และปุ่ม
สภาวะของลิงค์จะมีตามนี้ :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
เกี่ยวกับผู้เขียน
Pongpat Weesommai
เคยทำงานเป็นวิศวกรซอฟต์แวร์อยู่ที่ไต้หวัน และเคยทำงานfreelance ให้บริษัทต่างๆ เช่น aCommerce SoftbankTelecom
แสดงความคิดเห็น
Pongpat Weesommai
เคยทำงานเป็นวิศวกรซอฟต์แวร์อยู่ที่ไต้หวัน และเคยทำงานfreelance ให้บริษัทต่างๆ เช่น aCommerce SoftbankTelecom