ஒரு pseudo-class (ஒற்றை முக்காற்புள்ளி :) கூறுகளை அவற்றின் நிலை (state) அல்லது இடம் (position) அடிப்படையில் தேர்ந்தெடுக்கிறது — "hover செய்யப்படும்போது" அல்லது "முதல் குழந்தை" போன்ற, ஒரு வெறும் class-ஆல் வெளிப்படுத்த முடியாத ஒன்று.
{ : blue; }
{ : solid; }
{ : (); }
{ : ; }
{ }
{ }
link-களுக்கான வரிசை முக்கியம் (LVHA): :link, :visited, :hover, :active.
li:first-child { } /* first li among its siblings */
li:last-child { } /* last one */
li:nth-child(2) { } /* the 2nd */
li:nth-child(odd) { } /* 1st, 3rd, 5th... — zebra striping */
li:nth-child(3n) { } /* every 3rd */
p:only-child { } /* a p that's the sole child */
:nth-child() மிகவும் சக்திவாய்ந்தது — 2n (இரட்டை), 2n+1 (ஒற்றை), 3n (ஒவ்வொரு மூன்றாவது), போன்றவை.
input:required { }
input:invalid { border-color: red; }
:is(h1, h2, h3) { } /* matches any — shortens selector lists */
.card:has(img) { } /* the "parent selector": a card that CONTAINS an img */
:not(.active) { } /* everything except .active */
Pseudo-class-கள் ஒரு முக்காற்புள்ளியைப் பயன்படுத்துகின்றன (:hover, ஒரு நிலை); pseudo-element-கள் இரண்டைப் பயன்படுத்துகின்றன (::before, ஒரு உருவாக்கப்பட்ட பகுதி). இவற்றைக் குழப்பிக்கொள்ளாதீர்கள்.
Pseudo-class-கள், கூடுதல் markup அல்லது JavaScript இல்லாமல், இடைவினையை (hover/focus — பயன்படக்கூடிய, அணுகக்கூடிய UI-க்கு அவசியம்) மற்றும் கட்டமைப்பை (striping, first/last) வடிவமைக்க உதவுகின்றன.
நவீனவை (:has, :is, :focus-visible) முன்பு JS அல்லது மீண்டும் மீண்டும் வரும் selector-களைத் தேவைப்படுத்திய பிரச்சினைகளைத் தீர்க்கின்றன.