સ્યુડો-ક્લાસ (એક કોલોન :) તત્વોને તેમના સ્થિતિ અથવા સ્થિતિ પર આધારે પસંદ કરે છે — કંઈ જે સાદા વર્ગ સાથે વ્યક્ત કરી શકાતું નથી, જેમ કે "હોવર કરતી વખતે" અથવા "પ્રથમ બાળક।"
{ : blue; }
{ : solid; }
{ : (); }
{ : ; }
{ }
{ }
લિંક્સ માટે ક્રમ મહત્વપૂર્ણ છે (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 */
સ્યુડો-ક્લાસ એક કોલોન (:hover, સ્થિતિ) નો ઉપયોગ કરે છે; સ્યુડો-એલિમેન્ટ બે (::before, જનરેટ કરેલ ભાગ) નો ઉપયોગ કરે છે. તેમને મૂંઝવશો નહીં.
સ્યુડો-ક્લાસ તમને ક્રિયાપ્રતિક્રિયા (હોવર/ફોકસ — વપરાશકર્તા-વધુ, સુલભ UI માટે આવશ્યક) અને માળખું (પટ્ટીઓ, પ્રથમ/છેલ્લો) વર્ણન કરવા દે છે વધારાના માર્કઅપ અથવા JavaScript વિના.
આધુનિક લોકો (:has, :is, :focus-visible) એવી સમસ્યાઓ ઉકેલે છે જેના માટે અગાઉ JS અથવા પુનરાવર્તીય સિલેક્ટર્સ આવશ્યક હતા.