فرهاد
فرهاد
خواندن ۱ دقیقه·۹ ماه پیش

قدرت شبه کلاس has در CSS

فرض کنید در صفحه‌ای که لیستی از پست‌های وبلاگ را نشان می‌دهد، یک عنوان اصلی (h1) دارید که بلافاصله بعد از آن، یک عنوان فرعی (h2) قرار دارد. اگر این عنوان فرعی (h2) وجود داشته باشد و مهم باشد، ممکن است بخواهید عنوان اصلی (h1) را بیشتر برجسته کنید. قبلاً برای انجام این کار باید یک تابع جاوا اسکریپت می‌نوشتید.

این HTML را در نظر بگیرید
این HTML را در نظر بگیرید


تابع جاوا اسکریپت زیر به دنبال همه h1‌ هایی است که یک h2 بلافاصله پس از آن قرار دارد و یک کلاس به نام highlight-content را برای برجسته سازی h1 به عنوان یک مقاله مهم به آن اعمال می‌کند.

راه حل قدیمی (جاوا اسکریپت)
راه حل قدیمی (جاوا اسکریپت)


اکنون می‌توانید از :has() برای دستیابی به همان کاری که تابع JS انجام می‌داد استفاده کنید. CSS زیر دنبال هر h1 می‌گردد و با استفاده از sibling combinator بررسی می‌کند که آیا یک h2 بلافاصله پس از آن وجود دارد تا رنگ متن آن (h1) را آبی کند.

راه حل جدید has در css
راه حل جدید has در css


خروجی کد بالا به‌صورت زیر خواهد بود:

خروجی
خروجی


چه مرورگر هایی از این قابلیت پشتیبانی می کنند؟

اینجا را ببینید

نکته

نمی‌توان :has() را درون یک :has() دیگر قرار داد.

cssfrontendhtmljavascript
علاقه‌مند به مهندسی نرم افزار، هوش مصنوعی و موسیقی
شاید از این پست‌ها خوشتان بیاید