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