คลาส Pseudo

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

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

ซึ่งแตกต่างจากองค์ประกอบจำลอง (Pseudo-Element) คลาสจำลองจะเชื่อมโยงกับสถานะที่เฉพาะเจาะจงซึ่งองค์ประกอบหนึ่งๆ อาจอยู่ ไม่ใช่การจัดรูปแบบส่วนต่างๆ ขององค์ประกอบนั้นโดยทั่วไป

สถานะแบบอินเทอร์แอกทีฟ

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

:hover

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 2.

Source

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

:active

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.3.

Source

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

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

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

#content:target {
    background: yellow;
}

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

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

คลาสจำลอง :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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.1.

Source

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

:checked และ :indeterminate

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.1.

Source

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

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

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

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

:placeholder-shown

Browser Support

  • Chrome: 47.
  • Edge: 79.
  • Firefox: 51.
  • Safari: 9.

Source

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

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

Browser Support

  • Chrome: 10.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

คุณสามารถตอบสนองต่อการตรวจสอบแบบฟอร์ม HTML ด้วยคลาสจำลอง เช่น :valid, :invalid และ :in-range คลาสจำลอง :valid และ :invalid มีประโยชน์สำหรับบริบทต่างๆ เช่น ช่องอีเมลที่มี pattern ที่ต้องจับคู่เพื่อให้เป็นช่องที่ถูกต้อง สถานะค่าที่ถูกต้องนี้สามารถแสดงต่อผู้ใช้ได้ ซึ่งจะช่วยให้ผู้ใช้ทราบว่าสามารถไปยังช่องถัดไปได้อย่างปลอดภัย

คลาสจำลอง :in-range จะใช้งานได้หากอินพุตมี min และ max เช่น อินพุตตัวเลข และค่าอยู่ภายในขอบเขตเหล่านั้น

เมื่อใช้แบบฟอร์ม HTML คุณระบุได้ว่าต้องกรอกข้อมูลในช่องใดด้วยแอตทริบิวต์ required คลาสจำลอง :required จะใช้ได้กับช่องที่ต้องกรอก เลือกฟิลด์ที่ไม่บังคับได้ด้วยคลาสจำลอง :optional

การเลือกองค์ประกอบตามดัชนี ลําดับ และการเกิด

มีกลุ่มของคลาสจำลองที่เลือกรายการตามตำแหน่งในเอกสาร

:first-child และ :last-child

Browser Support

  • Chrome: 4.
  • Edge: 12.
  • Firefox: 3.
  • Safari: 3.1.

Source

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

:only-child

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.5.
  • Safari: 3.1.

Source

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

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

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

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

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

:empty

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.1.

Source

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

Browser Support

  • Chrome: 88.
  • Edge: 88.
  • Firefox: 78.
  • Safari: 14.

Source

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

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

คุณเขียนโค้ดให้กระชับยิ่งขึ้นได้โดยใช้คลาสจำลอง :is() ดังนี้

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

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

:not()

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.1.

Source

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

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

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

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

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับคลาสจำลอง

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

เท็จ
จริง

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

:not()
:is()
:target
:empty

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

:squeeze
:hover
:focus-within
:target
:press

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

:loading
:indeterminate
:fresh
:checked
:valid
:enabled
:in-range