:has() એ પેરેન્ટ સિલેક્ટર નથી. તે JavaScript ને દૂર કરે છે.

તમારા કોડમાં classList.toggle શોધો.

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

તમે આ કોડનો મોટાભાગનો હિસ્સો ડિલીટ કરી શકો છો.

લોકો :has() ને પેરેન્ટ સિલેક્ટર કહે છે. આ નામ ખોટું છે. :has() એક કન્ડિશન (શરત) તપાસે છે. તે કોઈ સ્ટાઇલ લાગુ કરવી કે નહીં તે નક્કી કરવા માટે એલિમેન્ટના કન્ટેન્ટને તપાસે છે.

તે આ બાબતો તપાસી શકે છે:

  • ડેશકેન્ડન્ટ (descendant) એલિમેન્ટ
  • ચોક્કસ સબલિંગ (sibling)
  • આઇટમ્સની સંખ્યા
  • એલિમેન્ટની ગેરહાજરી

અહીં કેટલાક ઉદાહરણો છે:

• જો કાર્ડમાં ઈમેજ હોય તો તેને સ્ટાઇલ કરો: .card:has(img) { ... }

• જ્યારે ચેકબોક્સ ચેક કરેલું હોય ત્યારે રો (row) ને સ્ટાઇલ કરો: .option-row:has(input:checked) { background: var(--selected-bg); }

• આઇટમની સંખ્યાના આધારે ગ્રીડ લેઆઉટ બદલો: .grid:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); }

છેલ્લું ઉદાહરણ પ્યોર CSS નો ઉપયોગ કરીને લેઆઉટ બદલે છે. તે DOM ની લાઈવ સ્ટેટ વાંચે છે.

પહેલા, તમારે મેસેન્જર તરીકે કામ કરવા માટે JavaScript ની જરૂર પડતી હતી. ચાઇલ્ડ એલિમેન્ટ તેના એન્સેસ્ટર (ancestor) પર સ્ટાઇલ ટ્રિગર કરી શકતું નહોતું. તમારે ક્લાસને ટ્રીમાં ઉપર લઈ જવા માટે લિસનર (listener) લખવું પડતું હતું.

હવે, મેસેન્જર જતો રહ્યો છે.

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

તેનો ઉપયોગ આ માટે કરો:

  • ફોર્મ વેલિડેશન
  • લિસ્ટમાં ખાલી સ્ટેટ્સ (empty states)
  • ટોગલ કરી શકાય તેવા પેનલ્સ

નોંધો કે :has() ની એક કિંમત (cost) છે. બ્રાઉઝરે ડેશકેન્ડન્ટ્સ સામે ઇનર સિલેક્ટરનું મૂલ્યાંકન કરવું પડે છે. વેલિડેશન અથવા ટોગલ્સ જેવા મોટાભાગના UI કાર્યો માટે, તમને કોઈ તફાવત નહીં જણાય.

સ્ક્રોલ પોઝિશન અથવા હજારો હોવર સ્ટેટ્સ જેવા હાઈ-ફ્રીક્વન્સી ફેરફારો માટે તેનો ઉપયોગ કરવાનું ટાળો.

ફક્ત ચાઇલ્ડમાંથી સ્ટાઇલ લાવવા માટે ક્લાસ ટોગલ કરવાનું બંધ કરો. તેના બદલે પૂછો કે શું :has() તે કન્ડિશન વ્યક્ત કરી શકે છે. તમારું CSS ઘટશે અને તમારું JavaScript ગાયબ થઈ જશે.

:has() Chrome, Firefox, Safari, અને Edge માં કામ કરે છે.

Source: https://dev.to/parsajiravand/has-isnt-a-parent-selector-it-deletes-javascript-4hej