فرض کنید در صفحهای که لیستی از پستهای وبلاگ را نشان میدهد، یک عنوان اصلی (h1) دارید که بلافاصله بعد از آن، یک عنوان فرعی (h2) قرار دارد. اگر این عنوان فرعی (h2) وجود داشته باشد و مهم باشد، ممکن است بخواهید عنوان اصلی (h1) را بیشتر برجسته کنید. قبلاً برای انجام این کار باید یک تابع جاوا اسکریپت مینوشتید.
تابع جاوا اسکریپت زیر به دنبال همه h1 هایی است که یک h2 بلافاصله پس از آن قرار دارد و یک کلاس به نام highlight-content را برای برجسته سازی h1 به عنوان یک مقاله مهم به آن اعمال میکند.
اکنون میتوانید از :has() برای دستیابی به همان کاری که تابع JS انجام میداد استفاده کنید. CSS زیر دنبال هر h1 میگردد و با استفاده از sibling combinator بررسی میکند که آیا یک h2 بلافاصله پس از آن وجود دارد تا رنگ متن آن (h1) را آبی کند.
خروجی کد بالا بهصورت زیر خواهد بود:
اینجا را ببینید
نمیتوان :has() را درون یک :has() دیگر قرار داد.