คู่มืออ้างอิงพรรณนา CSS

ประกาย CSS

ประกายใช้เพื่อกำหนดสถานะพิเศษขององค์ประกอบ

ตัวอย่างเช่น มันสามารถใช้เพื่อ:

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

ตารางข้างล่างแสดงประกายที่แตกต่างกันใน CSS:

ประกาย ตัวอย่าง คำอธิบายตัวอย่าง
:active a:active เลือกลิงก์ที่กำลังใช้งาน
:any-link a:anylink เลือกองค์ประกอบ <a> หรือ <area> ที่มีค่า href
:auto-fill input:autofill เลือกองค์ประกอบ <input> ที่ถูกบันทึกโดยอัตโนมัติโดยเครื่องนอน
:checked option:checked ตรงกันข้ามกับองค์ประกอบที่ถูกเลือก <input> หรือ <option>
:default input:default เลือกองค์ประกอบฟอร์มที่เป็นค่าเริ่มต้น
:defined :defined เลือกองค์ประกอบที่มีค่ากำหนด (ทั้งตามมาตราฐานและที่กำหนดโดยผู้ใช้)
:dir() :dir(rtl) เลือกองค์ประกอบที่มีทิศทางข้อความที่กำหนด
:disabled option:disabled เลือกองค์ประกอบที่ทำงานออฟโฟน
:empty div:empty เลือกองค์ประกอบที่ไม่มีลูกองค์ประกอบ (รวมถึงตัวอักษรนิยาย)
:enabled input:enabled เลือกทุก element ที่มีความสามารถใช้งาน ตามปกติใช้กับ element ฟอร์ม
:first @page :first แสดงหน้าแรกของเอกสารที่จะพิมพ์ (ใช้ร่วมกับ @page rule)
:first-child p:first-child เลือก element ที่เป็นลูกแรกของลูกของอาจารย์ของมัน (ในกลุ่มพี่น้อง)
:first-of-type li:first-of-type เลือก element ระดับแรกของกลุ่มพี่น้องที่มีชนิดเฉพาะ
:focus select:focus เลือก element ที่ได้รับความสนใจ ตามปกติใช้กับ element ฟอร์ม
:focus-visible button:focus-visible เลือก element ที่ได้รับความสนใจ (ใช้เมื่อมีความสนใจที่ผ่านทางแป้นแปลงเท่านั้น)
:focus-within form:focus-within ตรงกันข้ามกับ element หรือบรรดาหลักทางหลวงของมันที่ได้รับความสนใจ
:fullscreen :fullscreen เลือก element ที่อยู่ในโหมด fullscreen
:has() h2:has(+p) เลือก element <h2> ที่ตามหลัง element <p> และปรับสไตล์ให้กับ <h2>
:hover a:hover เลือก element ที่มี mouse hover
:in-range input:in-range เลือก element <input> ที่มีค่าที่อยู่ในระยะที่กำหนด
:indeterminate input:indeterminate เลือก element ฟอร์มที่อยู่ในสถานะไม่แน่นอน
:invalid input:invalid เลือก element ฟอร์มที่ผิดพลาด
:is() :is(ul, ol) เลือกทุกตัวอย่าง <ul> และ <ol> อิเล็กทรอนิก
:lang() p:lang(it) เลือก element <p> ที่มีค่า attribute lang ว่า "it" (ภาษาอิตาลี)
:last-child li:last-child เลือก element <li> ที่เป็นลูกสุดท้ายของลูกของอาจารย์ของมัน
:last-of-type p:last-of-type เลือก element <p> ที่เป็นลูกสุดท้ายของอาจารย์ของมัน
:left @page :left แสดงทุกหน้าทางด้านซ้ายของเอกสารที่จะพิมพ์ (ใช้ร่วมกับ @page rule)
:link a:link เลือกทุก link ที่ยังไม่ถูกเยี่ยมชม
:modal :modal เลือก element ที่อยู่ในสถานะ modal
:not() :not(p) เลือก element ที่ไม่ใช่ element <p>
:nth-child() p:nth-child(2) เลือก element <p> ที่เป็นลูกที่สองของอาจารย์ของมัน
:nth-last-child() p:nth-last-child(2) เลือกองค์ประกอบ <p> ที่เป็นลูกของเพื่อนายที่แพ้และเป็นลูกของเพื่อนายที่แพ้ที่มีลูกครั้งที่สองจากทางด้านขวา
:nth-last-of-type() p:nth-last-of-type(2) เลือกองค์ประกอบ <p> ที่เป็นองค์ประกอบ <p> ครั้งที่สองของเพื่อนายที่แพ้จากทางด้านขวาของเพื่อนายที่แพ้
:nth-of-type() p:nth-of-type(2) เลือกองค์ประกอบ <p> ที่เป็นองค์ประกอบ <p> ครั้งที่สองของเพื่อนายที่แพ้
:only-child p:only-child เลือกองค์ประกอบ <p> ที่เป็นลูกของเพื่อนายที่แพ้และเป็นองค์ประกอบเดียวของเพื่อนายที่แพ้
:only-of-type p:only-of-type เลือกองค์ประกอบ <p> ที่เป็นองค์ประกอบ <p> ครั้งเดียวของเพื่อนายที่แพ้
:optional textarea:optional เลือกองค์ประกอบ <input>、<select> หรือ <textarea> ที่ไม่มีคุณสมบัติ required
:out-of-range input:out-of-range เลือกองค์ประกอบ <input> ที่มีค่าที่อยู่นอกช่วงที่กำหนด
:placeholder-shown input:placeholder-shown เลือกองค์ประกอบ <input> หรือ <textarea> ที่แสดงข้อความที่จัดว่าเป็นพิมพ์ยังที่ว่าง
:popover-open :popover-open เลือกองค์ประกอบที่มีการแสดงป็นสถานะปูปาป์
:read-only input:read-only เลือกองค์ประกอบที่มีคุณสมบัติ readonly
:read-write input:read-write เลือกองค์ประกอบที่สามารถแก้ไขได้
:required input:required เลือกองค์ประกอบที่มีคุณสมบัติ required
:right @page :right ระบุหน้าที่ที่จะพิมพ์เอกสารทั้งหมดของฝั่งขวา (ใช้ร่วมกับ @page รูปแบบ)
:root :root เลือกองค์ประกอบเป็นเอกสารของฝั่งซ้าย (ใช้ร่วมกับ @page รูปแบบ)
:scope :scope เลือกองค์ประกอบที่เป็นจุดอ้างอิงหรือสเปรค์ของเลือกตัว
:state() :state() เลือกองค์ประกอบที่มีสถานะที่กำหนดโดยเอง
:target :target เลือกองค์ประกอบเป้าหมายที่มีการเปิดใช้งานในขณะนี้
:user-invalid :user-invalid เลือกองค์ประกอบที่มีค่าไม่เป็นที่เชื่อถือของฟอร์ม (หลังจากการสนทนากับผู้ใช้)
:user-valid :user-valid เลือกองค์ประกอบที่มีค่าเป็นที่เชื่อถือของฟอร์ม (หลังจากการสนทนากับผู้ใช้)
:valid input:valid เลือกองค์ประกอบที่มีค่าเป็นที่เชื่อถือ
:visited a:visited เลือกทุกลิงก์ที่เคยถูกเข้าชม
:where() :where(ol, ul) เลือกทุกตัวอย่าง <ul> และ <ol> อิเล็กทรอนิก