:has() ಎಂಬುದು ಪೇರೆಂಟ್ ಸೆಲೆಕ್ಟರ್ ಅಲ್ಲ. ಇದು JavaScript ಅನ್ನು ಅಳಿಸಿಹಾಕುತ್ತದೆ.

ನಿಮ್ಮ ಕೋಡ್‌ನಲ್ಲಿ classList.toggle ಅನ್ನು ಹುಡುಕಿ.

ನೀವು ಬಹುತೇಕ ಒಂದೇ ರೀತಿಯ ಮಾದರಿಯ ಅನೇಕ ಉದಾಹರಣೆಗಳನ್ನು ಕಾಣಬಹುದು. ಬಳಕೆದಾರರು ಒಂದು ಚೆಕ್‌ಬಾಕ್ಸ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಅಥವಾ ಒಂದು ಫೀಲ್ಡ್ ಅನ್ನು ಫೋಕಸ್ ಮಾಡಿದಾಗ, ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿ (parent element) ಒಂದು ಕ್ಲಾಸ್ ಅನ್ನು ಟೋಗಲ್ ಮಾಡಲು ನೀವು JavaScript ಅನ್ನು ಬಳಸುತ್ತೀರಿ. ಇದು CSS ಮೂಲಕ ಪೇರೆಂಟ್ ಅನ್ನು ಸ್ಟೈಲ್ ಮಾಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ನೀವು ಈ ಕೋಡ್‌ನ ಹೆಚ್ಚಿನ ಭಾಗವನ್ನು ಅಳಿಸಿಹಾಕಬಹುದು.

ಜನರು :has() ಅನ್ನು ಪೇರೆಂಟ್ ಸೆಲೆಕ್ಟರ್ ಎಂದು ಕರೆಯುತ್ತಾರೆ. ಈ ಹೆಸರು ತಪ್ಪಾಗಿದೆ. :has() ಒಂದು ಕಂಡೀಷನ್ ಅನ್ನು ಪರೀಕ್ಷಿಸುತ್ತದೆ. ಒಂದು ಸ್ಟೈಲ್ ಅನ್ವಯವಾಗಬೇಕೇ ಅಥವಾ არა ಎಂದು ನಿರ್ಧರಿಸಲು ಇದು ಎಲಿಮೆಂಟ್‌ನ ಒಳಗಿರುವ ವಿಷಯಗಳನ್ನು (contents) ಪರಿಶೀಲಿಸುತ್ತದೆ.

ಇದು ಇವುಗಳನ್ನು ಪರೀಕ್ಷಿಸಬಲ್ಲದು:

  • ಒಂದು ಡಿಸೆಂಡೆಂಟ್ ಎಲಿಮೆಂಟ್ (descendant element)
  • ಒಂದು ನಿರ್ದಿಷ್ಟ ಸಿಬ್ಲಿಂಗ್ (specific sibling)
  • ಐಟಂಗಳ ಸಂಖ್ಯೆ (count of items)
  • ಒಂದು ಎಲಿಮೆಂಟ್ ಇಲ್ಲದಿರುವುದು (absence of an element)

ಇಲ್ಲಿ ಕೆಲವು ಉದಾಹರಣೆಗಳಿವೆ:

• ಕಾರ್ಡ್‌ನಲ್ಲಿ ಚಿತ್ರವಿದ್ದರೆ ಅದನ್ನು ಸ್ಟೈಲ್ ಮಾಡಿ: .card:has(img) { ... }

• ಚೆಕ್‌ಬಾಕ್ಸ್ ಅನ್ನು ಚೆಕ್ ಮಾಡಿದಾಗ ಒಂದು ರೋ ಅನ್ನು ಸ್ಟೈಲ್ ಮಾಡಿ: .option-row:has(input:checked) { background: var(--selected-bg); }

• ಐಟಂಗಳ ಸಂಖ್ಯೆಯ ಆಧಾರದ ಮೇಲೆ ಗ್ರಿಡ್ ಲೇಔಟ್ ಬದಲಾಯಿಸಿ: .grid:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); }

ಕೊನೆಯ ಉದಾಹರಣೆಯು ಪ್ಯೂರ್ CSS ಬಳಸಿ ಲೇಔಟ್ ಅನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ. ಇದು DOM ನ ಲೈವ್ ಸ್ಟೇಟ್ ಅನ್ನು ಓದುತ್ತದೆ.

ಹಿಂದೆ, ನೀವು ಸಂದೇಶವಾಹಕನಂತೆ (messenger) ಕೆಲಸ ಮಾಡಲು JavaScript ಅನ್ನು ಬಳಸಬೇಕಿತ್ತು. ಚೈಲ್ಡ್ ಎಲಿಮೆಂಟ್ ತನ್ನ ಅನ್ಸೆಸ್ಟರ್ (ancestor) ಮೇಲೆ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಟ್ರಿಗ್ಗರ್ ಮಾಡಲು ಸಾಧ್ಯವಿರಲಿಲ್ಲ. ಕ್ಲಾಸ್ ಅನ್ನು ಟ್ರೀನಲ್ಲಿ ಮೇಲಕ್ಕೆ ಕೊಂಡೊಯ್ಯಲು ನೀವು ಲಿಸನರ್ (listener) ಬರೆಯಬೇಕಿತ್ತು.

ಈಗ, ಆ ಸಂದೇಶವಾಹಕ ಇಲ್ಲ.

ನೀವು :has() ಬಳಸಿದರೆ, ನಿಮ್ಮ ಸ್ಟೈಲ್‌ಗಳು ಯಾವಾಗಲೂ ಸರಿಯಾಗಿರುತ್ತವೆ. ಅವು ಮೊದಲ ರೆಂಡರ್‌ನಲ್ಲೇ ಕೆಲಸ ಮಾಡುತ್ತವೆ. ಬಳಕೆದಾರರು ತಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಹಿಂದಕ್ಕೆ ಹೋದಾಗಲೂ ಅವು ಕೆಲಸ ಮಾಡುತ್ತವೆ. ಸ್ಟೇಟ್ ಬದಲಾವಣೆ ಮತ್ತು ಸ್ಟೈಲ್ ಬದಲಾವಣೆಯ ನಡುವೆ ಯಾವುದೇ ವಿಳಂಬವಿರುವುದಿಲ್ಲ.

ಇದನ್ನು ಇವುಗಳಿಗಾಗಿ ಬಳಸಿ:

  • ಫಾರ್ಮ್ ವ್ಯಾಲಿಡೇಶನ್ (Form validation)
  • ಲಿಸ್ಟ್‌ಗಳಲ್ಲಿನ ಎಂಪ್ಟಿ ಸ್ಟೇಟ್ಸ್ (Empty states in lists)
  • ಟೋಗಲ್ ಮಾಡಬಹುದಾದ ಪ್ಯಾನಲ್‌ಗಳು (Toggleable panels)

:has() ಬಳಕೆಗೆ ಒಂದು ಬೆಲೆ (cost) ಇದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಬ್ರೌಸರ್ ಡಿಸೆಂಡೆಂಟ್ಸ್‌ಗಳ ವಿರುದ್ಧ ಇನ್ನರ್ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಮೌಲ್ಯಮಾಪನ ಮಾಡಬೇಕಾಗುತ್ತದೆ. ವ್ಯಾಲಿಡೇಶನ್ ಅಥವಾ ಟೋಗಲ್‌ಗಳಂತಹ ಹೆಚ್ಚಿನ UI ಕಾರ್ಯಗಳಿಗಾಗಿ, ನೀವು ಯಾವುದೇ ವ್ಯತ್ಯಾಸವನ್ನು ಗಮನಿಸುವುದಿಲ್ಲ.

ಸ್ಕ್ರೋಲ್ ಪೊಸಿಷನ್ ಅಥವಾ ಸಾವಿರಾರು ಹೋವರ್ ಸ್ಟೇಟ್‌ಗಳಂತಹ ಹೆಚ್ಚಿನ ಫ್ರೀಕ್ವೆನ್ಸಿ ಬದಲಾವಣೆಗಳಿಗಾಗಿ ಇದನ್ನು ಬಳಸುವುದನ್ನು ತಪ್ಪಿಸಿ.

ಕೇವಲ ಚೈಲ್ಡ್‌ನಿಂದ ಸ್ಟೈಲ್‌ಗಳನ್ನು ನಿಯಂತ್ರಿಸಲು ಕ್ಲಾಸ್‌ಗಳನ್ನು ಟೋಗಲ್ ಮಾಡುವುದನ್ನು ನಿಲ್ಲಿಸಿ. ಬದಲಾಗಿ :has() ಆ ಕಂಡೀಷನ್ ಅನ್ನು ವ್ಯಕ್ತಪಡಿಸಬಲ್ಲದೇ ಎಂದು ಪರಿಶೀಲಿಸಿ. ಆಗ ನಿಮ್ಮ CSS ಗಾತ್ರ ಕಡಿಮೆಯಾಗುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ JavaScript ಮಾಯವಾಗುತ್ತದೆ.

:has() ಎಂಬುದು Chrome, Firefox, Safari ಮತ್ತು Edge ನಲ್ಲಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ.

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