સુડો-તત્વ (બમણી કોલોન ::) એલિમેન્ટના ચોક્કસ ભાગ ને સ્ટાઇલ કરે છે, અથવા કન્ટેન્ટ જેનરેટ કરે છે જે HTML માં નથી — વધારાનું માર્કઅપ ઉમેર્યા વિના.
::before અને ::after — જેનરેટ કરેલ કન્ટેન્ટ
css
{
: ;
}
{
: ;
}
સુડો-તત્વ (બમણી કોલોન ::) એલિમેન્ટના ચોક્કસ ભાગ ને સ્ટાઇલ કરે છે, અથવા કન્ટેન્ટ જેનરેટ કરે છે જે HTML માં નથી — વધારાનું માર્કઅપ ઉમેર્યા વિના.
{
: ;
}
{
: ;
}
content પ્રોપર્ટી આવશ્યક છે — તેના વિના, સુડો-તત્વ રેન્ડર થતું નથી. જેનરેટ કરેલ કન્ટેન્ટ એલિમેન્ટના ખૂબ જ શરૂઆતમાં (::before) અથવા અંતે (::after) એક સંતાન છે.
.tooltip::after {
content: ""; /* empty but present → creates a box */
position: absolute;
border: 8px solid transparent;
border-top-color: black; /* a CSS triangle (tooltip arrow) */
}
યह ક્લાસિક ઉપયોગ છે: તીર, બેજ, ઓવરલે, સુશોભિત લાઇનો દોરવા — HTML ને સંપૂર્ણ દૃશ્ય તત્વોથી મુક્ત રાખવું.
p::first-line { font-weight: bold; } /* the first rendered line */
p::first-letter { font-size: 3em; } /* drop cap */
::selection { background: yellow; } /* highlighted/selected text */
input::placeholder { color: gray; } /* placeholder text */
.x:hover { } /* pseudo-CLASS (state) — one colon */
.x::before { } /* pseudo-ELEMENT (a part) — two colons */
CSS3 એ :: રજૂ કર્યું સુડો-તત્વોને સુડો-ક્લાસેસથી અલગ કરવા માટે (બ્રાઉઝર્સ હજી પણ સુસંગતતા માટે જૂના લોકો પર સિંગલ કોલોન સ્વીકારે છે, પરંતુ :: ઉપયોગ કરે છે)
જેનરેટ કરેલ content કેટલાક સ્ક્રીન રીડર્સ દ્વારા વાંચવામાં આવે છે — આવશ્યક માહિતી ફક્ત ::before/::after માં મૂકશો નહીં (સુશોભન માટે તેનો ઉપયોગ કરો), અને સુશોભિત આઇકનો એક્સેસિબિલિટી ટ્રી માંથી બહાર રાખવા કરવા શ્રેષ્ઠ છે.
સુડો-તત્વો તમને CSS માં ફક્ત આઇકન્સ, સુશોભિત આકૃતિઓ (તીર, વિભાજક), ડ્રોપ કેપ્સ અને કાઉન્ટર ઉમેરવાની મંજૂરી આપે છે — કોઇ વધારાના <div> અથવા <span> નથી.
તેઓ શાસ્ત્રીય માર્કઅપ રાખે છે જ્યારે સમૃદ્ધ દૃશ્ય વિગત સક્ષમ કરે છે, અને તેઓ પરિષ્કાર, જાળવણીયોગ્ય સ્ટાઇલિંગનો મુખ્યાંશ છે.