CSS :has(): стил на контейнер според съдържанието

Полезно е да знаеш

:has() позволява избор на елемент според други елементи, описани с относителен селектор. Например .card:has(img) избира карта, която съдържа изображение. Така контейнерът може да получи различен стил според съдържанието си, без допълнителен клас само за този случай. [1]

Разликата между .card:has(img) и .card:has(> img) е съществена. Първият пример допуска изображение навътре в дървото, а вторият търси пряк дъщерен елемент. Ако стилът се задейства неочаквано, провери точно тази връзка.

Използвай условията достатъчно конкретно. Правило върху твърде широк набор от елементи е по-трудно за разбиране и поддръжка. :has() е средство за CSS подбор, а не валидатор на бизнес данни: наличието на поле в документа не доказва, че стойността му е правилна или че сървърът е приел формуляра.