The CSS Podcast - 015: Pseudo-classes
สมมติว่าคุณมีแบบฟอร์มลงชื่อสมัครใช้อีเมล และต้องการให้ช่องแบบฟอร์มอีเมลมีเส้นขอบสีแดงหากมีอีเมลที่ไม่ถูกต้อง
คุณจะทำอย่างไร
คุณสามารถใช้คลาสสมมติ :invalid
CSS ซึ่งเป็นหนึ่งในคลาสสมมติหลายรายการที่เบราว์เซอร์มีให้
คลาสจำลองช่วยให้คุณใช้สไตล์ตามการเปลี่ยนแปลงสถานะและปัจจัยภายนอกได้ ซึ่งหมายความว่าการออกแบบจะตอบสนองต่ออินพุตของผู้ใช้ เช่น อีเมลที่ไม่ถูกต้อง รายการเหล่านี้จะอยู่ในโมดูลตัวเลือก ซึ่งจะอธิบายรายละเอียดเพิ่มเติม
ซึ่งแตกต่างจากองค์ประกอบจำลอง (Pseudo-Element) คลาสจำลองจะเชื่อมโยงกับสถานะที่เฉพาะเจาะจงซึ่งองค์ประกอบหนึ่งๆ อาจอยู่ ไม่ใช่การจัดรูปแบบส่วนต่างๆ ขององค์ประกอบนั้นโดยทั่วไป
สถานะแบบอินเทอร์แอกทีฟ
พсевโดคลาสต่อไปนี้จะมีผลเนื่องจากการโต้ตอบของผู้ใช้กับหน้าเว็บ
:hover
หากผู้ใช้มีอุปกรณ์ชี้ เช่น เมาส์หรือแทร็กแพด และวางอุปกรณ์ชี้เหนือองค์ประกอบ คุณก็ใช้สถานะนั้นกับ :hover
เพื่อใช้รูปแบบได้
วิธีนี้เป็นวิธีที่มีประโยชน์ในการบอกเป็นนัยว่าองค์ประกอบหนึ่งๆ โต้ตอบได้
:active
สถานะนี้จะทริกเกอร์เมื่อมีการโต้ตอบกับองค์ประกอบอยู่ เช่น การคลิก ก่อนที่จะปล่อยการคลิก หากใช้อุปกรณ์ชี้ เช่น เมาส์ สถานะนี้จะแสดงเมื่อการคลิกเริ่มต้นขึ้นและยังไม่ได้ปล่อย
:focus
, :focus-within
และ :focus-visible
หากองค์ประกอบหนึ่งๆ จะได้รับโฟกัส เช่น <button>
คุณก็สามารถตอบสนองต่อสถานะนั้นได้โดยใช้คลาสจำลอง :focus
นอกจากนี้ คุณยังแสดงความรู้สึกได้หากองค์ประกอบย่อยขององค์ประกอบได้รับโฟกัสด้วย :focus-within
องค์ประกอบที่โฟกัสได้ เช่น ปุ่ม จะแสดงวงโฟกัสเมื่อโฟกัสอยู่ แม้ว่าจะคลิกแล้วก็ตาม ในกรณีเช่นนี้ นักพัฒนาแอปจะใช้ CSS ต่อไปนี้
button:focus {
outline: none;
}
CSS นี้จะนําวงโฟกัสเริ่มต้นของเบราว์เซอร์ออกเมื่อองค์ประกอบได้รับโฟกัส ซึ่งก่อให้เกิดปัญหาการช่วยเหลือพิเศษสําหรับผู้ใช้ที่ไปยังส่วนต่างๆ ของหน้าเว็บด้วยแป้นพิมพ์
หากไม่มีสไตล์โฟกัส ผู้ใช้จะไม่สามารถติดตามตำแหน่งโฟกัสปัจจุบันเมื่อใช้แป้น tab
:focus-visible
ช่วยให้คุณแสดงสไตล์โฟกัสได้เมื่อองค์ประกอบได้รับโฟกัสผ่านแป้นพิมพ์ และยังใช้กฎ outline: none
เพื่อป้องกันการโฟกัสเมื่ออุปกรณ์เคอร์เซอร์โต้ตอบกับองค์ประกอบได้ด้วย
button:focus {
outline: none;
}
button:focus-visible {
outline: 1px solid black;
}
:target
คลาสจำลอง :target
จะเลือกองค์ประกอบที่มี id
ซึ่งตรงกับ URL บางส่วน
สมมติว่าคุณมี HTML ต่อไปนี้
<article id="content">
…
</article>
คุณสามารถแนบสไตล์กับองค์ประกอบนั้นได้เมื่อ URL มี #content
#content:target {
background: yellow;
}
ซึ่งมีประโยชน์ในการไฮไลต์ส่วนที่อาจมีการลิงก์ไปยังส่วนใดส่วนหนึ่งโดยเฉพาะ เช่น เนื้อหาหลักในเว็บไซต์ ผ่านลิงก์ข้าม
สถานะทางประวัติศาสตร์
:link
คลาสจำลอง :link
ใช้กับองค์ประกอบ <a>
ที่มีค่า href
ที่ยังไม่ได้เข้าชมได้
:visited
คุณจัดสไตล์ลิงก์ที่ผู้ใช้เข้าชมแล้วได้โดยใช้คลาสจำลอง :visited
สถานะนี้ตรงข้ามกับ :link
แต่คุณจะมีพร็อพเพอร์ตี้ CSS น้อยกว่าที่จะใช้ได้เนื่องจากเหตุผลด้านความปลอดภัย
คุณจัดรูปแบบได้เฉพาะ color
, background-color
,
border-color
, outline-color
และสีของ SVG fill
และ stroke
ลำดับความสำคัญ
หากคุณกำหนดสไตล์ :visited
ระบบจะลบล้างสไตล์นั้นด้วยซุปเปอร์คลาสของลิงก์ที่มีความเฉพาะเจาะจงเท่ากันหรือมากกว่า
ด้วยเหตุนี้ เราขอแนะนำให้คุณใช้กฎ LVHA เพื่อจัดสไตล์ลิงก์ด้วยคลาสจำลองตามลําดับต่อไปนี้
:link
, :visited
, :hover
, :active
a:link {}
a:visited {}
a:hover {}
a:active {}
สถานะแบบฟอร์ม
คลาสจำลองต่อไปนี้สามารถเลือกองค์ประกอบแบบฟอร์มในสถานะต่างๆ ที่องค์ประกอบเหล่านี้อาจอยู่ในระหว่างการโต้ตอบ
:disabled
และ :enabled
หากเบราว์เซอร์ปิดใช้องค์ประกอบแบบฟอร์ม เช่น <button>
คุณก็ใช้สถานะนั้นกับคลาสจำลอง :disabled
ได้
คลาสจำลอง :enabled
ใช้สำหรับสถานะตรงข้ามได้ แม้ว่าองค์ประกอบแบบฟอร์มจะเป็น :enabled
โดยค่าเริ่มต้นด้วย คุณจึงอาจไม่จำเป็นต้องใช้คลาสจำลองนี้
:checked
และ :indeterminate
คลาสจำลอง :checked
จะพร้อมใช้งานเมื่อองค์ประกอบแบบฟอร์มที่รองรับ เช่น ช่องทำเครื่องหมายหรือปุ่มตัวเลือก อยู่ในสถานะ "เลือก"
สถานะ :checked
เป็นสถานะแบบไบนารี(จริงหรือเท็จ) แต่ช่องทําเครื่องหมายมีสถานะอยู่ระหว่างกลางเมื่อไม่ได้เลือกหรือยกเลิกการเลือก
ซึ่งเรียกว่าสถานะ :indeterminate
ตัวอย่างสถานะนี้คือเมื่อคุณมีการควบคุม "เลือกทั้งหมด" ที่เลือกช่องทําเครื่องหมายทั้งหมดในกลุ่ม หากผู้ใช้ยกเลิกการเลือกช่องทำเครื่องหมายรายการใดรายการหนึ่งเหล่านี้ ช่องทำเครื่องหมายรูทจะไม่แสดงว่า "เลือกทั้งหมด" อีกต่อไป จึงควรอยู่ในสถานะไม่แน่นอน
องค์ประกอบ <progress>
ยังมีสถานะที่ไม่แน่นอนซึ่งกำหนดสไตล์ได้อีกด้วย
Use Case ที่พบบ่อยคือทำให้รูปลักษณ์เป็นลายทางเพื่อระบุว่าไม่ทราบจํานวนเงินที่ต้องใช้
:placeholder-shown
หากช่องแบบฟอร์มมีแอตทริบิวต์ placeholder
และไม่มีค่า คุณสามารถใช้คลาสจำลอง :placeholder-shown
เพื่อแนบสไตล์กับสถานะนั้นได้
ทันทีที่มีเนื้อหาในช่อง ไม่ว่าจะมี placeholder
หรือไม่ก็ตาม สถานะนี้จะใช้งานไม่ได้อีกต่อไป
สถานะการตรวจสอบ
คุณสามารถตอบสนองต่อการตรวจสอบแบบฟอร์ม HTML ด้วยคลาสจำลอง เช่น :valid
, :invalid
และ :in-range
คลาสจำลอง :valid
และ :invalid
มีประโยชน์สำหรับบริบทต่างๆ เช่น ช่องอีเมลที่มี pattern
ที่ต้องจับคู่เพื่อให้เป็นช่องที่ถูกต้อง
สถานะค่าที่ถูกต้องนี้สามารถแสดงต่อผู้ใช้ได้ ซึ่งจะช่วยให้ผู้ใช้ทราบว่าสามารถไปยังช่องถัดไปได้อย่างปลอดภัย
คลาสจำลอง :in-range
จะใช้งานได้หากอินพุตมี min
และ max
เช่น อินพุตตัวเลข และค่าอยู่ภายในขอบเขตเหล่านั้น
เมื่อใช้แบบฟอร์ม HTML คุณระบุได้ว่าต้องกรอกข้อมูลในช่องใดด้วยแอตทริบิวต์ required
คลาสจำลอง :required
จะใช้ได้กับช่องที่ต้องกรอก
เลือกฟิลด์ที่ไม่บังคับได้ด้วยคลาสจำลอง :optional
การเลือกองค์ประกอบตามดัชนี ลําดับ และการเกิด
มีกลุ่มของคลาสจำลองที่เลือกรายการตามตำแหน่งในเอกสาร
:first-child
และ :last-child
หากต้องการค้นหารายการแรกหรือรายการสุดท้าย ให้ใช้ :first-child
และ :last-child
คลาสจำลองเหล่านี้จะแสดงผลองค์ประกอบแรกหรือองค์ประกอบสุดท้ายในกลุ่มองค์ประกอบพี่น้อง
:only-child
นอกจากนี้ คุณยังเลือกองค์ประกอบที่ไม่มีพี่น้องได้ด้วยโดยใช้คลาสจำลอง :only-child
:first-of-type
และ :last-of-type
คุณสามารถเลือก :first-of-type
และ :last-of-type
ซึ่งในตอนแรกดูเหมือนว่าจะใช้ได้ผลลัพธ์เหมือนกับ :first-child
และ :last-child
แต่ลองดู HTML นี้
<div class="my-parent">
<p>A paragraph</p>
<div>A div</div>
<div>Another div</div>
</div>
และ CSS นี้
.my-parent div:first-child {
color: red;
}
ไม่มีองค์ประกอบใดที่จะเปลี่ยนเป็นสีแดงเนื่องจากองค์ประกอบย่อยแรกคือย่อหน้า ไม่ใช่ div
ซุปเปอร์คลาส :first-of-type
มีประโยชน์ในบริบทนี้
.my-parent div:first-of-type {
color: red;
}
แม้ว่า <div>
รายการแรกจะเป็นองค์ประกอบย่อยลำดับที่ 2 แต่ก็ยังถือเป็นองค์ประกอบประเภทแรกภายในองค์ประกอบ .my-parent
ดังนั้นกฎนี้จะทําให้ <div>
รายการแรกมีสีแดง
:nth-child
และ :nth-of-type
นอกจากนี้ คุณยังใช้ประเภทและรายการย่อยแรกและสุดท้ายได้อีกด้วย
คลาสจำลอง :nth-child
และ
:nth-of-type
ช่วยให้คุณระบุองค์ประกอบที่อยู่ในดัชนีหนึ่งๆ ได้
การจัดทำดัชนีในตัวเลือก CSS เริ่มต้นที่ 1
คุณส่งมากกว่าดัชนีไปยังคลาสจำลองเหล่านี้ได้ด้วย
หากต้องการเลือกองค์ประกอบที่เป็นเลขคู่ทั้งหมด ให้ใช้ :nth-child(even)
นอกจากนี้ คุณยังสร้างตัวเลือกที่ซับซ้อนมากขึ้นซึ่งจะค้นหารายการเป็นระยะๆ ได้อย่างสม่ำเสมอได้โดยใช้ไมโครซินแทกซ์ An+B
li:nth-child(3n+3) {
background: yellow;
}
ตัวเลือกนี้จะเลือกทุกๆ รายการที่ 3 โดยเริ่มจากรายการที่ 3
n
ในนิพจน์นี้คือดัชนี ซึ่งเริ่มต้นที่ 0 ส่วน 3 (3n
) คือจํานวนที่คุณคูณกับดัชนีนั้น
สมมติว่าคุณมีรายการ <li>
7 รายการ
รายการแรกที่เลือกคือ 3 เนื่องจาก 3n+3
แปลเป็น (3 * 0) + 3
การวนซ้ำครั้งถัดไปจะเลือกรายการที่ 6 เนื่องจากตอนนี้ n
เพิ่มขึ้นเป็น 1
แล้ว นั่นคือ (3 * 1) + 3)
นิพจน์นี้ใช้ได้กับทั้ง :nth-child
และ :nth-of-type
คุณเล่นกับตัวเลือกประเภทนี้ได้ในเครื่องมือทดสอบรายการที่ n หรือเครื่องมือเลือกจำนวน
:only-of-type
สุดท้าย คุณค้นหาองค์ประกอบประเภทใดประเภทหนึ่งในกลุ่มองค์ประกอบที่มีความสัมพันธ์กันได้โดยใช้ :only-of-type
ซึ่งจะมีประโยชน์หากคุณต้องการเลือกรายการที่มีเพียงรายการเดียว หรือหากต้องการค้นหาองค์ประกอบที่เป็นตัวหนาเพียงรายการเดียวในย่อหน้า
การค้นหาองค์ประกอบว่าง
บางครั้งการระบุองค์ประกอบที่ว่างเปล่าทั้งหมดก็มีประโยชน์เช่นกัน และก็มีคลาสจำลองสําหรับกรณีนี้ด้วย
:empty
หากองค์ประกอบไม่มีองค์ประกอบย่อย ระบบจะใช้คลาสจำลอง :empty
กับองค์ประกอบนั้น
องค์ประกอบย่อยไม่ได้หมายถึงองค์ประกอบ HTML หรือโหนดข้อความเท่านั้น แต่ยังหมายถึงพื้นที่ว่างด้วย ซึ่งอาจทำให้เกิดความสับสนเมื่อคุณแก้ไขข้อบกพร่องของ HTML ต่อไปนี้และสงสัยว่าทำไมจึงไม่ทำงานกับ :empty
<div>
</div>
เนื่องจากมีเว้นวรรคระหว่าง <div>
ที่เปิดและปิด <div>
จึงใช้ค่าว่างไม่ได้
คลาสจำลอง :empty
อาจมีประโยชน์ในกรณีที่คุณควบคุม HTML ได้เพียงเล็กน้อยและต้องซ่อนองค์ประกอบว่าง เช่น เครื่องมือแก้ไขเนื้อหา WYSIWYG
ในที่นี้ ผู้แก้ไขได้เพิ่มย่อหน้าว่างเปล่าที่ไม่ควรอยู่
<article class="post">
<p>Donec ullamcorper nulla non metus auctor fringilla.</p>
<p></p>
<p>Curabitur blandit tempus porttitor.</p>
</article>
:empty
ช่วยให้คุณค้นหาและซ่อนรายการดังกล่าวได้
.post :empty {
display: none;
}
การค้นหาและการยกเว้นองค์ประกอบหลายรายการ
ซีซัวด์คลาสบางรายการช่วยให้คุณเขียน CSS กระชับยิ่งขึ้น
:is()
หากต้องการค้นหาองค์ประกอบย่อย h2
, li
และ img
ทั้งหมดในองค์ประกอบ .post
คุณอาจต้องเขียนรายการตัวเลือกดังนี้
.post h2,
.post li,
.post img {
…
}
คุณเขียนโค้ดให้กระชับยิ่งขึ้นได้โดยใช้คลาสจำลอง :is()
ดังนี้
.post :is(h2, li, img) {
…
}
คลาสจำลอง :is
ไม่เพียงแต่จะกะทัดรัดกว่ารายการตัวเลือกเท่านั้น แต่ยังให้อภัยมากกว่าด้วย
ในกรณีส่วนใหญ่ หากมีข้อผิดพลาดหรือตัวเลือกที่ไม่รองรับในรายการตัวเลือก รายการตัวเลือกทั้งหมดจะไม่ทํางานอีกต่อไป
หากมีข้อผิดพลาดในตัวเลือกที่ส่งในคลาสจำลอง :is
ระบบจะละเว้นตัวเลือกที่ไม่ถูกต้อง แต่จะเลือกใช้ตัวเลือกที่ถูกต้อง
:not()
นอกจากนี้ คุณยังยกเว้นรายการด้วยคลาสจำลอง :not()
ได้ด้วย
เช่น คุณอาจใช้เพื่อจัดสไตล์ลิงก์ทั้งหมดที่ไม่มีแอตทริบิวต์ class
a:not([class]) {
color: blue;
}
นอกจากนี้ :not
คลาสจำลองยังช่วยปรับปรุงการช่วยเหลือพิเศษได้ด้วย
เช่น <img>
ต้องมี alt
แม้ว่าจะเป็นค่าว่างก็ตาม
คุณจึงเขียนกฎ CSS ที่เพิ่มเส้นขอบสีแดงหนาให้กับรูปภาพที่ไม่ถูกต้องได้ ดังนี้
img:not([alt]) {
outline: 10px red;
}
ทดสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับคลาสจำลอง
คลาสจำลองจะทํางานราวกับมีการใช้คลาสกับองค์ประกอบแบบไดนามิก ส่วนองค์ประกอบจำลองจะทํางานกับองค์ประกอบนั้นๆ
คลาสจำลองที่ทำงานได้ข้อใดต่อไปนี้
:target
:empty
:not()
:is()
คลาสจำลองใดต่อไปนี้เกิดจากการโต้ตอบของผู้ใช้
:squeeze
:press
:target
:focus-within
:hover
รายการใดต่อไปนี้เป็นคลาสจำลองสถานะของ <form>
:in-range
:loading
:checked
:valid
:indeterminate
:fresh
:enabled