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