คลาส Pseudo

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

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

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

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

สถานะการโต้ตอบ

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

:hover

การรองรับเบราว์เซอร์

  • Chrome: 1.
  • ขอบ: 12.
  • Firefox: 1.
  • Safari: 2.

แหล่งที่มา

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

:active

การรองรับเบราว์เซอร์

  • Chrome: 1.
  • ขอบ: 12.
  • Firefox: 1.
  • Safari: 1.

แหล่งที่มา

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

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

การรองรับเบราว์เซอร์

  • Chrome: 1.
  • ขอบ: 12.
  • Firefox: 1.
  • Safari: 1.

แหล่งที่มา

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

การรองรับเบราว์เซอร์

  • Chrome: 1.
  • ขอบ: 12.
  • Firefox: 1.
  • Safari: 1.3

แหล่งที่มา

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

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

คุณสามารถแนบรูปแบบกับองค์ประกอบนั้นเมื่อ URL มี #content

#content:target {
    background: yellow;
}

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

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

การรองรับเบราว์เซอร์

  • Chrome: 1.
  • ขอบ: 12.
  • Firefox: 1.
  • Safari: 1.

แหล่งที่มา

: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

การรองรับเบราว์เซอร์

  • Chrome: 1.
  • ขอบ: 12.
  • Firefox: 1.
  • Safari: 3.1

แหล่งที่มา

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

:checked และ :indeterminate

การรองรับเบราว์เซอร์

  • Chrome: 1.
  • ขอบ: 12.
  • Firefox: 1.
  • Safari: 3.1

แหล่งที่มา

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

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

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

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

:placeholder-shown

การรองรับเบราว์เซอร์

  • Chrome: 47
  • ขอบ: 79
  • Firefox: 51
  • Safari: 9.

แหล่งที่มา

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

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

การรองรับเบราว์เซอร์

  • Chrome: 10.
  • ขอบ: 12.
  • Firefox: 4.
  • Safari: 5.

แหล่งที่มา

คุณสามารถตอบสนองต่อการตรวจสอบความถูกต้องของแบบฟอร์ม 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

การรองรับเบราว์เซอร์

  • Chrome: 4.
  • ขอบ: 12.
  • Firefox: 3.
  • Safari: 3.1

แหล่งที่มา

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

:only-child

การรองรับเบราว์เซอร์

  • Chrome: 2.
  • ขอบ: 12.
  • Firefox: 1.5.
  • Safari: 3.1

แหล่งที่มา

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

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

การรองรับเบราว์เซอร์

  • Chrome: 1.
  • ขอบ: 12.
  • Firefox: 3.5.
  • Safari: 3.1

แหล่งที่มา

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

การรองรับเบราว์เซอร์

  • Chrome: 1.
  • ขอบ: 12.
  • Firefox: 3.5.
  • Safari: 3.1

แหล่งที่มา

โดยไม่จำกัดอยู่เฉพาะประเภทรายการย่อยและรายการแรก :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

การรองรับเบราว์เซอร์

  • Chrome: 1.
  • ขอบ: 12.
  • Firefox: 3.5.
  • Safari: 3.1

แหล่งที่มา

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

การค้นหาองค์ประกอบว่าง

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

:empty

การรองรับเบราว์เซอร์

  • Chrome: 1.
  • ขอบ: 12.
  • Firefox: 1.
  • Safari: 3.1

แหล่งที่มา

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

การรองรับเบราว์เซอร์

  • Chrome: 88.
  • ขอบ: 88
  • Firefox: 78
  • Safari: 14.

แหล่งที่มา

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

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

ด้วย :is() Pseudo-class คุณสามารถเขียนเวอร์ชันกะทัดรัดมากขึ้นได้ดังนี้

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

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

:not()

การรองรับเบราว์เซอร์

  • Chrome: 1.
  • ขอบ: 12.
  • Firefox: 1.
  • Safari: 3.1

แหล่งที่มา

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

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

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

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

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

ทดสอบความรู้ของคุณเกี่ยวกับคลาสสมมติ

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

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

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

:is()
🎉
:target
Pseudo-class ฟังก์ชันจะมี () ต่อท้าย เพื่อระบุว่ายอมรับพารามิเตอร์
:empty
Pseudo-class ฟังก์ชันจะมี () ต่อท้าย เพื่อระบุว่ายอมรับพารามิเตอร์
:not()
🎉

Pseudo-class ใดต่อไปนี้เกิดจากการโต้ตอบของผู้ใช้

:hover
🎉
:press
ลองอีกครั้งนะ
:squeeze
ลองอีกครั้งนะ
:target
🎉
:focus-within
🎉

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

:enabled
🎉
:fresh
ลองอีกครั้งนะ
:indeterminate
🎉
:checked
🎉
:in-range
🎉
:loading
ลองอีกครั้งนะ
:valid
🎉