คลาส Pseudo

พอดแคสต์ CSS - 015: Pseudo-classes

สมมติว่าคุณมีแบบฟอร์มลงชื่อสมัครใช้อีเมล และต้องการให้ช่องแบบฟอร์มอีเมลมีเส้นขอบสีแดงหากมีที่อยู่อีเมลที่ไม่ถูกต้อง คุณจะทำอย่างไร คุณสามารถใช้ :invalid CSS Pseudo-class ซึ่งเป็นหนึ่งในคลาส Pseudo ที่เบราว์เซอร์จัดเตรียมให้

คลาส Pseudo ช่วยให้คุณใช้รูปแบบตามการเปลี่ยนแปลงสถานะและปัจจัยภายนอกได้ ซึ่งหมายความว่ารูปแบบนี้จะตอบสนองต่อข้อมูลจากผู้ใช้ เช่น อีเมลที่ไม่ถูกต้อง ซึ่งอธิบายอยู่ในโมดูลตัวเลือก และโมดูลนี้จะแสดงตัวเลือกแบบละเอียด

โดยแตกต่างจากองค์ประกอบจำลอง ซึ่งคุณจะดูข้อมูลเพิ่มเติมเกี่ยวกับในโมดูลก่อนหน้าได้ โดยคลาสจำลองจะเชื่อมต่อกับสถานะที่เจาะจงซึ่งมีองค์ประกอบ แทนที่จะเป็นส่วนของรูปแบบโดยทั่วไปขององค์ประกอบนั้น

สถานะเชิงโต้ตอบ

ระบบจะใช้คลาส Pseudo ต่อไปนี้เนื่องจากการโต้ตอบของผู้ใช้กับหน้าเว็บ

:hover

การสนับสนุนเบราว์เซอร์

• 1
• 12
• 1
• 2

แหล่งที่มา

หากผู้ใช้มีอุปกรณ์ชี้ตำแหน่ง เช่น เมาส์หรือแทร็กแพด และผู้ใช้วางอุปกรณ์ดังกล่าวไว้เหนือองค์ประกอบ คุณจะจดจำสถานะดังกล่าวได้ด้วย :hover เพื่อใช้รูปแบบต่างๆ วิธีนี้เป็นประโยชน์ในการบอกใบ้ว่าองค์ประกอบหนึ่งๆ จะโต้ตอบได้

:active

การสนับสนุนเบราว์เซอร์

• 1
• 12
• 1
• 1

แหล่งที่มา

สถานะนี้จะทริกเกอร์เมื่อมีการโต้ตอบกับองค์ประกอบ เช่น การคลิก ก่อนที่จะมีการปล่อยคลิก หากมีการใช้อุปกรณ์ชี้ตำแหน่ง เช่น เมาส์ สถานะนี้หมายถึงเวลาที่การคลิกเริ่มขึ้นและยังไม่เผยแพร่

:focus, :focus-within และ :focus-visible

การสนับสนุนเบราว์เซอร์

• 1
• 12
• 1
• 1

แหล่งที่มา

หากองค์ประกอบรับโฟกัสได้ เช่น <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

การสนับสนุนเบราว์เซอร์

• 1
• 12
• 1
• 1.3

แหล่งที่มา

คลาส Pseudo :target จะเลือกองค์ประกอบที่มี id ตรงกับส่วนย่อย URL สมมติว่าคุณมี HTML ต่อไปนี้

<article id="content">
    …
</article>

คุณจะแนบรูปแบบลงในองค์ประกอบนั้นได้เมื่อ URL มี #content

#content:target {
    background: yellow;
}

ซึ่งมีประโยชน์ในการไฮไลต์บริเวณที่อาจได้รับการลิงก์มาโดยเฉพาะ เช่น เนื้อหาหลักบนเว็บไซต์ ผ่านทางลิงก์ข้าม

รัฐทางประวัติศาสตร์

:link

การสนับสนุนเบราว์เซอร์

• 1
• 12
• 1
• 1

แหล่งที่มา

คลาส 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 {}

หมายเหตุ: เนื่องด้วยเหตุผลด้านความปลอดภัย คุณจะสามารถเปลี่ยนรูปแบบที่กำหนดโดยสถานะ :link หรือ "ยังไม่ได้เข้าชม" ที่มีคลาส Pseudo-Class สำหรับ :visited เท่านั้น ดังนั้นการตรวจสอบว่าคุณกำหนดสไตล์ที่เปลี่ยนแปลงได้ก่อนเป็นอันดับแรกจึงเป็นสิ่งสำคัญ การทำตามกฎ LVHA จะช่วยได้มาก

สถานะแบบฟอร์ม

คลาส Pseudo ต่อไปนี้สามารถเลือกองค์ประกอบของแบบฟอร์มได้ในสถานะต่างๆ ที่องค์ประกอบเหล่านี้อาจอยู่ขณะโต้ตอบกับองค์ประกอบ

:disabledและ:enabled

การสนับสนุนเบราว์เซอร์

• 1
• 12
• 1
• 3.1

แหล่งที่มา

หากเบราว์เซอร์ปิดใช้องค์ประกอบแบบฟอร์ม เช่น <button> คุณจะเชื่อมโยงสถานะนั้นด้วยคลาส Pseudo ของ :disabled ได้ คลาสจำลอง :enabled พร้อมใช้งานสำหรับสถานะตรงกันข้าม แม้ว่าองค์ประกอบของแบบฟอร์มจะมีค่าเป็น :enabled โดยค่าเริ่มต้น คุณจึงอาจพบว่าตัวเองไม่ได้เข้าถึงคลาส Pseudo นี้

:checkedและ:indeterminate

การสนับสนุนเบราว์เซอร์

• 1
• 12
• 1
• 3.1

แหล่งที่มา

คลาส Pseudo :checked จะพร้อมใช้งานเมื่อองค์ประกอบแบบฟอร์มที่รองรับ เช่น ช่องทำเครื่องหมายหรือปุ่มตัวเลือกอยู่ในสถานะทำเครื่องหมายแล้ว

สถานะ :checked เป็นสถานะไบนารี(จริงหรือเท็จ) แต่ช่องทำเครื่องหมายจะมีสถานะอยู่ระหว่างที่ไม่ได้เลือกหรือไม่เลือก ซึ่งเรียกว่าสถานะ :indeterminate

ตัวอย่างของสถานะนี้คือเมื่อคุณมีตัวควบคุม "เลือกทั้งหมด" ที่จะเลือกช่องทำเครื่องหมายทั้งหมดในกลุ่ม จากนั้น หากผู้ใช้ยกเลิกการเลือกช่องทำเครื่องหมายใดช่องหนึ่งเหล่านี้ ช่องทำเครื่องหมายรากจะไม่แสดงว่ามีการเลือก "ทั้งหมด" อีกต่อไป ดังนั้นควรอยู่ในสถานะไม่ทราบ

นอกจากนี้ องค์ประกอบ <progress> ยังมีสถานะที่ไม่แน่นอนที่สามารถจัดรูปแบบได้ Use Case ที่พบบ่อยคือการระบุให้มีลายเส้นเพื่อบอกผู้ใช้ว่าต้องใช้เพิ่มอีกมากเพียงใด

:placeholder-shown

การสนับสนุนเบราว์เซอร์

• 47
• 79
• 51
• 9

แหล่งที่มา

หากช่องในแบบฟอร์มมีแอตทริบิวต์ placeholder และไม่มีค่า คุณสามารถใช้คลาสจำลอง :placeholder-shown เพื่อรวมรูปแบบเข้ากับสถานะนั้นได้ ทันทีที่มีเนื้อหาในช่อง ไม่ว่าจะมี placeholder หรือไม่ สถานะนี้ก็จะไม่มีผลอีกต่อไป

สถานะการตรวจสอบ

การสนับสนุนเบราว์เซอร์

• 10
• 12
• 4
• 5

แหล่งที่มา

คุณตอบกลับการตรวจสอบแบบฟอร์ม 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

การสนับสนุนเบราว์เซอร์

• 4
• 12
• 3
• 3.1

แหล่งที่มา

หากต้องการค้นหารายการแรกหรือรายการสุดท้าย คุณสามารถใช้ :first-child และ :last-child คลาส Pseudo เหล่านี้จะแสดงผลองค์ประกอบแรกหรือสุดท้ายในกลุ่มขององค์ประกอบระดับข้างเคียง

:only-child

การสนับสนุนเบราว์เซอร์

• 2
• 12
• 1.5
• 3.1

แหล่งที่มา

นอกจากนี้ คุณยังเลือกองค์ประกอบที่ไม่มีรายการข้างเคียงด้วยคลาส Pseudo :only-child ได้ด้วย

:first-of-typeและ:last-of-type

การสนับสนุนเบราว์เซอร์

• 1
• 12
• 3.5
• 3.1

แหล่งที่มา

คุณสามารถเลือก :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

การสนับสนุนเบราว์เซอร์

• 1
• 12
• 3.5
• 3.1

แหล่งที่มา

ทั้งนี้ คุณไม่ได้จำกัดไว้เฉพาะเด็กและเด็กประเภทสุดท้ายและเด็กประเภทสุดท้ายด้วย คลาส 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

การสนับสนุนเบราว์เซอร์

• 1
• 12
• 3.5
• 3.1

แหล่งที่มา

สุดท้ายนี้ คุณจะเห็นองค์ประกอบเดียวของประเภทหนึ่งๆ ในกลุ่มข้างเคียงที่มี :only-of-type ซึ่งจะเป็นประโยชน์หากคุณต้องการเลือกรายการที่มีเพียงรายการเดียว หรือถ้าคุณต้องการค้นหาองค์ประกอบตัวหนาเพียงอย่างเดียวในย่อหน้า

กำลังค้นหาองค์ประกอบที่ว่างเปล่า

บางครั้งการระบุองค์ประกอบที่ว่างเปล่าอาจมีประโยชน์ และยังมีคลาส Pseudo สำหรับบริการดังกล่าวด้วย

:empty

การสนับสนุนเบราว์เซอร์

• 1
• 12
• 1
• 3.1

แหล่งที่มา

หากองค์ประกอบไม่มีองค์ประกอบย่อย ระบบจะใช้คลาสจำลอง :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()

การสนับสนุนเบราว์เซอร์

• 88
• 88
• 78
• 14

แหล่งที่มา

หากคุณต้องการค้นหาองค์ประกอบย่อย h2, li และ img ทั้งหมดในองค์ประกอบ .post คุณอาจเขียนรายการตัวเลือกได้ดังนี้

.post h2,
.post li,
.post img {
    …
}

เมื่อใช้คลาสจำลอง :is() คุณจะเขียนเวอร์ชันที่กะทัดรัดมากขึ้นได้โดยทำดังนี้

.post :is(h2, li, img) {
    …
}

คลาส Pseudo :is ไม่เพียงมีความกะทัดรัดมากกว่ารายการตัวเลือกเท่านั้น แต่ยังให้ความคุ้มค่ามากกว่าด้วย ในกรณีส่วนใหญ่ หากมีข้อผิดพลาดหรือตัวเลือกที่ไม่รองรับในรายการตัวเลือก รายการตัวเลือกทั้งหมดจะใช้งานไม่ได้อีกต่อไป หากมีข้อผิดพลาดในตัวเลือกที่ส่งในคลาส Pseudo :is ระบบจะไม่สนใจตัวเลือกที่ไม่ถูกต้อง แต่จะใช้ตัวเลือกที่ถูกต้อง

:not()

การสนับสนุนเบราว์เซอร์

• 1
• 12
• 1
• 3.1

แหล่งที่มา

นอกจากนี้คุณยังยกเว้นรายการที่มีคลาส Pseudo :not() ได้ด้วย เช่น คุณใช้เพื่อจัดรูปแบบลิงก์ทั้งหมดที่ไม่มีแอตทริบิวต์ class ได้

a:not([class]) {
    color: blue;
}

คลาส Pseudo :not ช่วยคุณปรับปรุงการช่วยเหลือพิเศษได้ด้วย ตัวอย่างเช่น <img> ต้องมี alt แม้จะเป็นค่าว่างก็ตาม ดังนั้นคุณสามารถเขียนกฎ CSS ที่เพิ่มเส้นขอบสีแดงแบบหนาลงในรูปภาพที่ไม่ถูกต้อง

img:not([alt]) {
    outline: 10px red;
}

ตรวจสอบความเข้าใจของคุณ

ทดสอบความรู้เรื่องคลาสจำลอง

คลาส Pseudo ทำหน้าที่เหมือนมีการนำคลาสไปใช้กับองค์ประกอบแบบไดนามิก ส่วนอีกองค์ประกอบจำลองจะดำเนินการกับตัวองค์ประกอบเอง

จริง

ระวังการใช้ : แบบเดี่ยวหรือคู่เป็นอักขระเด่นของคีย์ในตัวเลือก

ไม่จริง

ส่วน Pseudo-element มีไว้สำหรับส่วนต่างๆ ส่วน Pseudo-class มีไว้สำหรับสถานะ

ข้อใดต่อไปนี้เป็นคลาสเทียมที่ใช้งานได้

:is()

🎉

:target

คลาส Pseudo ที่มีฟังก์ชันการทำงานมี () ต่อท้าย เพื่อบ่งชี้ว่ายอมรับพารามิเตอร์

:empty

คลาส Pseudo ที่มีฟังก์ชันการทำงานมี () ต่อท้าย เพื่อบ่งชี้ว่ายอมรับพารามิเตอร์

:not()

🎉

คลาส Pseudo ใดต่อไปนี้ซึ่งเกิดจากการโต้ตอบของผู้ใช้

:hover

🎉

:press

ลองอีกครั้งนะ

:squeeze

ลองอีกครั้งนะ

:target

🎉

:focus-within

🎉

ข้อใดต่อไปนี้เป็นคลาสจำลองสถานะ <form>

:enabled

🎉

:fresh

ลองอีกครั้งนะ

:indeterminate

🎉

:checked

🎉

:in-range

🎉

:loading

ลองอีกครั้งนะ

:valid

🎉