ગુજરાતી

CSS :has() સિલેક્ટર વિશે જાણો, જે પેરેન્ટ સિલેક્શન માટે ગેમ-ચેન્જર છે. વ્યવહારુ ઉપયોગો, ક્રોસ-બ્રાઉઝર સુસંગતતા અને તમારી CSS સ્ટાઇલિંગમાં ક્રાંતિ લાવવા માટેની અદ્યતન તકનીકો શીખો.

CSS :has() સિલેક્ટરમાં નિપુણતા: પેરેન્ટ સિલેક્શન પાવરને અનલીશ કરવું

વર્ષોથી, CSS ડેવલપર્સ તેમના ચિલ્ડ્રન (બાળ) એલિમેન્ટ્સના આધારે પેરેન્ટ (પિતૃ) એલિમેન્ટ્સને પસંદ કરવાની એક સરળ અને અસરકારક રીતની ઝંખના કરતા હતા. હવે રાહ પૂરી થઈ! :has() સ્યુડો-ક્લાસ આખરે આવી ગયો છે, અને તે આપણે જે રીતે CSS લખીએ છીએ તેમાં ક્રાંતિ લાવી રહ્યો છે. આ શક્તિશાળી સિલેક્ટર તમને કોઈ પેરેન્ટ એલિમેન્ટને ત્યારે ટાર્ગેટ કરવાની મંજૂરી આપે છે જ્યારે તેમાં કોઈ ચોક્કસ ચાઇલ્ડ એલિમેન્ટ હોય, જે ડાયનેમિક અને રિસ્પોન્સિવ સ્ટાઇલિંગ માટે શક્યતાઓની દુનિયા ખોલે છે.

:has() સિલેક્ટર શું છે?

:has() સ્યુડો-ક્લાસ એ CSS રિલેશનલ સ્યુડો-ક્લાસ છે જે દલીલ તરીકે સિલેક્ટર લિસ્ટ સ્વીકારે છે. તે કોઈ એલિમેન્ટને પસંદ કરે છે જો સિલેક્ટર લિસ્ટમાંનો કોઈપણ સિલેક્ટર તે એલિમેન્ટના વંશજોમાંથી ઓછામાં ઓછા એક એલિમેન્ટ સાથે મેળ ખાતો હોય. સરળ શબ્દોમાં, તે તપાસે છે કે કોઈ પેરેન્ટ એલિમેન્ટ પાસે કોઈ ચોક્કસ ચાઇલ્ડ છે કે નહીં, અને જો હોય, તો પેરેન્ટ પસંદ કરવામાં આવે છે.

તેનું મૂળભૂત સિન્ટેક્સ છે:

parent:has(child) { /* CSS નિયમો */ }

parent એલિમેન્ટને ત્યારે જ પસંદ કરે છે જ્યારે તેમાં ઓછામાં ઓછું એક child એલિમેન્ટ હોય.

:has() શા માટે આટલું મહત્વનું છે?

પરંપરાગત રીતે, CSS તેના ચિલ્ડ્રનના આધારે પેરેન્ટ એલિમેન્ટ્સને પસંદ કરવાની તેની ક્ષમતામાં મર્યાદિત રહ્યું છે. આ મર્યાદાને કારણે ઘણીવાર ડાયનેમિક સ્ટાઇલિંગ પ્રાપ્ત કરવા માટે જટિલ JavaScript સોલ્યુશન્સ અથવા વર્કઅરાઉન્ડની જરૂર પડતી હતી. :has() સિલેક્ટર આ બોજારૂપ પદ્ધતિઓની જરૂરિયાતને દૂર કરે છે, જે સ્વચ્છ, વધુ જાળવણી યોગ્ય અને પ્રદર્શનકારી CSS કોડ માટે પરવાનગી આપે છે.

અહીં શા માટે :has() ગેમ-ચેન્જર છે:

:has() સિલેક્ટરના મૂળભૂત ઉદાહરણો

ચાલો :has() સિલેક્ટરની શક્તિ દર્શાવવા માટે કેટલાક સરળ ઉદાહરણોથી શરૂઆત કરીએ.

ઉદાહરણ 1: ઇમેજની હાજરીના આધારે પેરેન્ટ Div ને સ્ટાઇલ કરવું

માની લો કે તમે <div> એલિમેન્ટમાં બોર્ડર ઉમેરવા માંગો છો, પણ ત્યારે જ જ્યારે તેમાં <img> એલિમેન્ટ હોય:

div:has(img) { border: 2px solid blue; }

આ CSS નિયમ કોઈપણ <div> પર વાદળી બોર્ડર લાગુ કરશે જેમાં ઓછામાં ઓછું એક <img> એલિમેન્ટ હોય.

ઉદાહરણ 2: સ્પાનની હાજરીના આધારે લિસ્ટ આઇટમને સ્ટાઇલ કરવું

ધારો કે તમારી પાસે વસ્તુઓની સૂચિ છે, અને તમે લિસ્ટ આઇટમને હાઇલાઇટ કરવા માંગો છો જો તેમાં કોઈ ચોક્કસ ક્લાસ સાથેનું <span> એલિમેન્ટ હોય:

li:has(span.highlight) { background-color: yellow; }

આ CSS નિયમ કોઈપણ <li> નો બેકગ્રાઉન્ડ રંગ પીળો કરી દેશે જેમાં "highlight" ક્લાસ સાથેનું <span> હોય.

ઉદાહરણ 3: ઇનપુટ વેલિડિટીના આધારે ફોર્મ લેબલને સ્ટાઇલ કરવું

તમે ફોર્મ લેબલને તેની સાથે સંકળાયેલ ઇનપુટ ફીલ્ડ માન્ય છે કે અમાન્ય તેના આધારે સ્ટાઇલ કરવા માટે :has() નો ઉપયોગ કરી શકો છો (:invalid સ્યુડો-ક્લાસ સાથે સંયુક્ત):

label:has(+ input:invalid) { color: red; font-weight: bold; }

આનાથી લેબલ લાલ અને બોલ્ડ બનશે જો તેની તરત જ પછીનું ઇનપુટ ફીલ્ડ અમાન્ય હોય.

:has() સિલેક્ટરના અદ્યતન ઉપયોગો

જ્યારે :has() સિલેક્ટરને અન્ય CSS સિલેક્ટર્સ અને સ્યુડો-ક્લાસ સાથે જોડવામાં આવે છે ત્યારે તે વધુ શક્તિશાળી બને છે. અહીં કેટલાક અદ્યતન ઉપયોગના કેસ છે:

ઉદાહરણ 4: ખાલી એલિમેન્ટ્સને ટાર્ગેટ કરવું

તમે એવા એલિમેન્ટ્સને ટાર્ગેટ કરવા માટે :not() સ્યુડો-ક્લાસનો ઉપયોગ :has() સાથે કરી શકો છો જેમાં કોઈ ચોક્કસ ચાઇલ્ડ *ન* હોય. ઉદાહરણ તરીકે, જે divs માં ઇમેજ *ન* હોય તેને સ્ટાઇલ કરવા માટે:

div:not(:has(img)) { background-color: #f0f0f0; }

આ કોઈપણ <div> પર આછો ગ્રે બેકગ્રાઉન્ડ લાગુ કરશે જેમાં <img> એલિમેન્ટ ન હોય.

ઉદાહરણ 5: જટિલ લેઆઉટ બનાવવું

:has() સિલેક્ટરનો ઉપયોગ કન્ટેનરની સામગ્રીના આધારે ડાયનેમિક લેઆઉટ બનાવવા માટે કરી શકાય છે. ઉદાહરણ તરીકે, તમે ગ્રીડ સેલમાં કોઈ ચોક્કસ પ્રકારના એલિમેન્ટની હાજરીના આધારે ગ્રીડનું લેઆઉટ બદલી શકો છો.

.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); } .grid-item:has(img) { grid-column: span 2; }

આનાથી ગ્રીડ આઇટમ બે કોલમમાં ફેલાશે જો તેમાં ઇમેજ હોય.

ઉદાહરણ 6: ડાયનેમિક ફોર્મ સ્ટાઇલિંગ

તમે ફોર્મ એલિમેન્ટ્સને તેમની સ્થિતિ (દા.ત., શું તે ફોકસ્ડ, ભરેલા, અથવા માન્ય છે) ના આધારે ડાયનેમિક રીતે સ્ટાઇલ કરવા માટે :has() નો ઉપયોગ કરી શકો છો.

.form-group:has(input:focus) { box-shadow: 0 0 5px rgba(0, 0, 255, 0.5); } .form-group:has(input:valid) { border-color: green; } .form-group:has(input:invalid) { border-color: red; }

આનાથી ઇનપુટ ફોકસમાં હોય ત્યારે વાદળી બોક્સ શેડો ઉમેરાશે, ઇનપુટ માન્ય હોય તો લીલો બોર્ડર, અને ઇનપુટ અમાન્ય હોય તો લાલ બોર્ડર ઉમેરાશે.

ઉદાહરણ 7: ચિલ્ડ્રનની સંખ્યાના આધારે સ્ટાઇલિંગ

જ્યારે :has() સીધી રીતે ચિલ્ડ્રનની સંખ્યા ગણતું નથી, ત્યારે તમે સમાન અસરો પ્રાપ્ત કરવા માટે તેને અન્ય સિલેક્ટર્સ અને CSS પ્રોપર્ટીઝ સાથે જોડી શકો છો. ઉદાહરણ તરીકે, તમે પેરેન્ટને સ્ટાઇલ કરવા માટે :only-child નો ઉપયોગ કરી શકો છો જો તેમાં કોઈ ચોક્કસ પ્રકારનું માત્ર એક જ ચાઇલ્ડ હોય.

div:has(> p:only-child) { background-color: lightgreen; }

આ એક <div> ને આછા લીલા બેકગ્રાઉન્ડ સાથે સ્ટાઇલ કરશે, પરંતુ ત્યારે જ જ્યારે તેમાં તેના સીધા ચાઇલ્ડ તરીકે માત્ર એક <p> એલિમેન્ટ હોય.

ક્રોસ-બ્રાઉઝર સુસંગતતા અને ફોલબેક્સ

2023 ના અંત સુધીમાં, :has() સિલેક્ટરને Chrome, Firefox, Safari, અને Edge સહિતના આધુનિક બ્રાઉઝર્સમાં ઉત્તમ સમર્થન મળ્યું છે. જોકે, તેને પ્રોડક્શનમાં લાગુ કરતાં પહેલાં Can I use પર સુસંગતતા તપાસવી મહત્વપૂર્ણ છે, ખાસ કરીને જો તમારે જૂના બ્રાઉઝર્સને સપોર્ટ કરવાની જરૂર હોય.

અહીં સુસંગતતાની વિચારણાઓનું વિરામ છે:

ફોલબેક્સ પૂરા પાડવા

જો તમારે જૂના બ્રાઉઝર્સને સપોર્ટ કરવાની જરૂર હોય, તો તમારે ફોલબેક્સ પ્રદાન કરવાની જરૂર પડશે. અહીં કેટલીક વ્યૂહરચનાઓ છે:

અહીં ફીચર ક્વેરીનો ઉપયોગ કરવાનું ઉદાહરણ છે:

.parent { /* બધા બ્રાઉઝર્સ માટે મૂળભૂત સ્ટાઇલિંગ */ border: 1px solid black; } @supports selector(:has(img)) { .parent:has(img) { /* :has() ને સપોર્ટ કરતા બ્રાઉઝર્સ માટે ઉન્નત સ્ટાઇલિંગ */ border: 3px solid blue; } }

આ કોડ બધા બ્રાઉઝર્સમાં .parent એલિમેન્ટ પર કાળો બોર્ડર લાગુ કરશે. :has() ને સપોર્ટ કરતા બ્રાઉઝર્સમાં, જો .parent એલિમેન્ટમાં ઇમેજ હોય તો તે વાદળી બોર્ડર લાગુ કરશે.

પ્રદર્શનની વિચારણાઓ

જ્યારે :has() નોંધપાત્ર ફાયદાઓ પ્રદાન કરે છે, ત્યારે તેના પ્રદર્શન પરના સંભવિત પ્રભાવને ધ્યાનમાં લેવું આવશ્યક છે, ખાસ કરીને જ્યારે તેનો વ્યાપકપણે અથવા જટિલ સિલેક્ટર્સ સાથે ઉપયોગ કરવામાં આવે છે. બ્રાઉઝર્સને પૃષ્ઠ પરના દરેક એલિમેન્ટ માટે સિલેક્ટરનું મૂલ્યાંકન કરવાની જરૂર પડે છે, જે ગણતરીની દ્રષ્ટિએ ખર્ચાળ બની શકે છે.

અહીં :has() ના પ્રદર્શનને ઓપ્ટિમાઇઝ કરવા માટેની કેટલીક ટિપ્સ છે:

ટાળવા જેવી સામાન્ય ભૂલો

:has() સિલેક્ટર સાથે કામ કરતી વખતે, ભૂલો કરવી સરળ છે જે અણધાર્યા પરિણામો તરફ દોરી શકે છે. અહીં ટાળવા જેવા કેટલાક સામાન્ય જોખમો છે:

:has() નો ઉપયોગ કરવા માટેની શ્રેષ્ઠ પદ્ધતિઓ

:has() સિલેક્ટરના લાભોને મહત્તમ કરવા અને સંભવિત સમસ્યાઓ ટાળવા માટે, આ શ્રેષ્ઠ પદ્ધતિઓનું પાલન કરો:

વાસ્તવિક-દુનિયાના ઉદાહરણો અને ઉપયોગના કેસ

ચાલો કેટલાક વાસ્તવિક-દુનિયાના ઉદાહરણોનું અન્વેષણ કરીએ કે :has() સિલેક્ટરનો ઉપયોગ સામાન્ય ડિઝાઇન પડકારોને ઉકેલવા માટે કેવી રીતે કરી શકાય છે.

ઉદાહરણ 8: રિસ્પોન્સિવ નેવિગેશન મેનુ બનાવવું

તમે રિસ્પોન્સિવ નેવિગેશન મેનુ બનાવવા માટે :has() નો ઉપયોગ કરી શકો છો જે ચોક્કસ મેનુ આઇટમ્સની હાજરીના આધારે વિવિધ સ્ક્રીન કદને અનુકૂળ થાય છે.

એક દૃશ્યની કલ્પના કરો જ્યાં તમે વપરાશકર્તા લૉગ ઇન છે કે નહીં તેના આધારે એક અલગ નેવિગેશન મેનુ પ્રદર્શિત કરવા માંગો છો. જો તે લૉગ ઇન હોય તો તમે પ્રોફાઇલ અને લૉગઆઉટ ક્રિયાઓ બતાવી શકો છો, જો ન હોય તો તમે લૉગિન/રજીસ્ટર બતાવી શકો છો.

nav:has(.user-profile) { /* લૉગ-ઇન થયેલા વપરાશકર્તાઓ માટે સ્ટાઇલ */ } nav:not(:has(.user-profile)) { /* લૉગ-આઉટ થયેલા વપરાશકર્તાઓ માટે સ્ટાઇલ */ }

ઉદાહરણ 9: કાર્ડ કમ્પોનન્ટ્સને સ્ટાઇલ કરવું

:has() સિલેક્ટરનો ઉપયોગ કાર્ડ કમ્પોનન્ટ્સને તેમની સામગ્રીના આધારે સ્ટાઇલ કરવા માટે કરી શકાય છે. ઉદાહરણ તરીકે, તમે કાર્ડમાં શેડો ત્યારે જ ઉમેરી શકો છો જ્યારે તેમાં ઇમેજ હોય.

.card:has(img) { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }

ઉદાહરણ 10: ડાયનેમિક થીમ્સ લાગુ કરવી

તમે વપરાશકર્તાની પસંદગીઓ અથવા સિસ્ટમ સેટિંગ્સના આધારે ડાયનેમિક થીમ્સ લાગુ કરવા માટે :has() નો ઉપયોગ કરી શકો છો. ઉદાહરણ તરીકે, તમે વપરાશકર્તાએ ડાર્ક મોડ સક્ષમ કર્યો છે કે નહીં તેના આધારે પૃષ્ઠનો બેકગ્રાઉન્ડ રંગ બદલી શકો છો.

body:has(.dark-mode) { background-color: #333; color: #fff; }

આ ઉદાહરણો :has() સિલેક્ટરની વર્સેટિલિટી અને વિવિધ ડિઝાઇન પડકારોને ઉકેલવાની તેની ક્ષમતા દર્શાવે છે.

CSS નું ભવિષ્ય: આગળ શું?

:has() સિલેક્ટરની રજૂઆત CSS ના ઉત્ક્રાંતિમાં એક મહત્વપૂર્ણ પગલું છે. તે ડેવલપર્સને JavaScript પર ઓછી નિર્ભરતા સાથે વધુ ડાયનેમિક, રિસ્પોન્સિવ અને જાળવણી યોગ્ય સ્ટાઇલશીટ્સ બનાવવા માટે સશક્ત બનાવે છે. જેમ જેમ :has() માટે બ્રાઉઝર સમર્થન વધતું રહેશે, તેમ આપણે આ શક્તિશાળી સિલેક્ટરના વધુ નવીન અને સર્જનાત્મક ઉપયોગો જોવાની અપેક્ષા રાખી શકીએ છીએ.

આગળ જોતાં, CSS વર્કિંગ ગ્રુપ અન્ય ઉત્તેજક સુવિધાઓ અને ઉન્નત્તિકરણો શોધી રહ્યું છે જે CSS ની ક્ષમતાઓને વધુ વિસ્તૃત કરશે. આમાં શામેલ છે:

નવીનતમ CSS વિકાસ સાથે અપ-ટુ-ડેટ રહીને અને :has() જેવી નવી સુવિધાઓને અપનાવીને, ડેવલપર્સ CSS ની સંપૂર્ણ ક્ષમતાને અનલૉક કરી શકે છે અને ખરેખર અસાધારણ વેબ અનુભવો બનાવી શકે છે.

નિષ્કર્ષ

:has() સિલેક્ટર CSS ટૂલબોક્સમાં એક શક્તિશાળી ઉમેરો છે, જે પેરેન્ટ સિલેક્શનને સક્ષમ કરે છે અને ડાયનેમિક અને રિસ્પોન્સિવ સ્ટાઇલિંગ માટે નવી શક્યતાઓ ખોલે છે. જ્યારે બ્રાઉઝર સુસંગતતા અને પ્રદર્શનની અસરોને ધ્યાનમાં લેવી મહત્વપૂર્ણ છે, ત્યારે સ્વચ્છ, વધુ જાળવણી યોગ્ય અને પ્રદર્શનકારી CSS કોડ માટે :has() નો ઉપયોગ કરવાના ફાયદા નિર્વિવાદ છે. આ ગેમ-ચેન્જિંગ સિલેક્ટરને અપનાવો અને આજે જ તમારી CSS સ્ટાઇલિંગમાં ક્રાંતિ લાવો!

સુલભતાને ધ્યાનમાં રાખવાનું યાદ રાખો અને જૂના બ્રાઉઝર્સ માટે ફોલબેક મિકેનિઝમ્સ પ્રદાન કરો. આ માર્ગદર્શિકામાં દર્શાવેલ શ્રેષ્ઠ પદ્ધતિઓનું પાલન કરીને, તમે :has() સિલેક્ટરની સંપૂર્ણ ક્ષમતાનો લાભ લઈ શકો છો અને વિશ્વભરના વપરાશકર્તાઓ માટે ખરેખર અસાધારણ વેબ અનુભવો બનાવી શકો છો.