CSS :has() در عمل: الگوهای کاربردی

:has() قدرتمندترین سلکتور جدید CSS است. ببینید چگونه در پروژه‌های واقعی استفاده شود.

الگوهای کاربردی

فرم با خطا: form:has(input:invalid). منو فعال: nav:has(.active). کارت با تصویر: .card:has(img).

• form:has(:invalid) → استایل خطا
• nav:has(.active) → هایلایت
• figure:has(figcaption) → لایه‌بندی

ترکیب با سلکتورهای دیگر

:has() با :not()، :where() و Container Queries ترکیب‌های قدرتمندی ایجاد می‌کند.

جمع‌بندی

:has() CSS را از زبان استایل‌دهی به زبان منطقی ارتقا داده.