در بیشتر تاریخچه CSS، انتخابگرها محدود به هدف قرار دادن عناصر بر اساس والدینشان در درخت DOM بوده اند. این ساختار HTML را در نظر بگیرید:

 <div> <p>Paragraph 1</p> <div> <main> <div> <p>Paragraph 2</p> </div> <main>

اعمال سبک ها در پاراگراف 2 در CSS بی اهمیت است، زیرا می تواند توسط گره والد <main> هدف قرار گیرد.

 main p { color: blue; }

این به پاراگراف 2 استایل می دهد، اما نه به پاراگراف 1 ، زیرا پاراگراف دوم در عنصر <main> موجود است.

با این حال، چیزی که از لحاظ تاریخی ساده نبوده، استایل دادن به گره <main> بر اساس وجود تگ <p> در زیر آن بود.

 <main> Don't Style This </main> <main> <p>Style This</p> </main>

با نگاه کردن به سمت بالا در درخت DOM، هیچ راهی برای اعمال استایل ها به عنصر دوم <main> و نه اولی (البته بدون استفاده از کلاس ها یا شناسه ها) وجود نداشت.

معرفی انتخابگر :has().

در هسته خود، انتخابگر :has() یک شبه کلاس رابطه ای است. این بدان معنی است که به شما امکان می دهد یک عنصر را بر اساس رابطه آن با عناصر دیگر انتخاب کنید. به طور خاص، اگر عنصری را انتخاب می کند که حاوی عنصر دیگری باشد که با انتخابگر معین مطابقت داشته باشد.

در مثال بالا اکنون می توانیم کارهای زیر را انجام دهیم:

 main:has(p) { color: blue; }

این امکان‌های متعددی را برای طراحی کارآمدتر و با کد کمتر به صفحات وب شما باز می‌کند.

مثال 1 - برجسته کردن مقالات با تصاویر

یک صفحه وب را در نظر بگیرید که فهرستی از مقالات را نمایش می دهد که هر کدام در یک برچسب <article> محصور شده اند. اگر بخواهیم مقالاتی را که حاوی تصاویر هستند برجسته کنیم، انتخابگر :has() یک راه حل ساده ارائه می دهد:

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

این قانون CSS یک حاشیه آبی را در اطراف هر تگ <article> که حاوی عنصر <img> است اعمال می کند و مقالات دارای تصاویر را از نظر بصری متمایز می کند.

مثال 2 - طراحی منوهای پیمایش با منوهای فرعی

در اینجا یک مثال دیگر است. در این مثال، انتخابگر :has() برای گفت ن یک عنصر شبه :before() به هر آیتم منویی که دارای منوهای فرعی است استفاده می‌شود - یعنی هر عنصر <li> که حاوی عنصر فرزند با کلاس .sub-menu است. .

 .main-menu > li:has(.sub-menu):before { content: "▼"; margin-left: 5px; font-size: 0.75em; }

پشتیبانی مرورگر

از مارس 2024، انتخابگر :has() توسط تقریباً 92٪ از مرورگرهای وب در سراسر جهان پشتیبانی می شود، از جمله همه مرورگرهای رایج مدرن مانند آخرین نسخه های Chrome، Firefox، Safari و Edge. برای مرورگرهای پشتیبانی نشده، از کتابخانه های تشخیص ویژگی مانند Modernizr برای اعمال سبک های جایگزین استفاده کنید.

همچنین ایده خوبی است که CSS خود را به گونه‌ای طراحی کنید که به‌خوبی کاهش یابد، و اطمینان حاصل کنید که صفحات وب شما حداقل عملکردی و بصری در مرورگرهایی که از انتخابگر :has() پشتیبانی نمی‌کنند، باقی می‌مانند.

امروز آماده استفاده است

انتخابگر :has() سطح جدیدی از انعطاف‌پذیری و قدرت را در CSS ارائه می‌کند و شما را قادر می‌سازد تا شیوه نامه‌های تمیزتر و کارآمدتری بنویسید. با انتخاب عناصر بر اساس محتوای آنها، انتخابگر :has() بسیاری از چالش‌های رایج استایل‌سازی را از برجسته کردن مقالات با تصاویر گرفته تا طرح‌بندی‌های واکنش‌گرا ساده می‌کند.

همانطور که پشتیبانی مرورگر همچنان در حال رشد است، سال 2024 بهترین سال برای شروع به کارگیری انتخابگر :has() در CSS شما است.

یک ظاهر زیبا - و با خیال راحت سعی کنید CSS خود را در یکی از پروژه های مبتدی در https://traintocode.com/projects به کار ببرید.

خبرکاو