Ви можете використовуйте псевдоклас CSS :has(), щоб вибрати батьківський елемент. Псевдоклас :has() приймає селектор або список селекторів як аргумент. Додайте псевдоклас :has() до елемента, щоб вибрати його, лише якщо він містить елемент, який відповідає переданому аргументу селектора.
The :has() псевдоклас, новий селектор, запропонований робочою групою CSS. Він діє як батьківський селектор, що дозволяє вам стилізувати батьківський елемент, якщо він містить певний елемент як дочірній.
Застосувати стиль до дочірнього елемента легко, але якщо ви хочете застосувати стиль до батьківського класу, який уже має дочірні елементи, ви можете використовуйте дочірній комбінатор селектора CSS ( > ), який розміщується між двома селекторами CSS. Наприклад, div > p вибирає всі елементи <p>, де батьківським є елемент <div>.
Селектор :nth-child(n) відповідає кожному елементу, який є n-м дочірнім елементом свого батька. n може бути числом, ключовим словом (парним або непарним) або формулою (як + b). Порада: подивіться на селектор :nth-of-type(), щоб вибрати елемент, який є n-м дочірнім елементом того самого типу (ім’я тегу) свого батька.
У батьківському компоненті створіть змінну, яка зберігає CSS для селектора :host. Потім створіть декоратор @Input, який прив’язує цю змінну до дочірнього компонента. У дочірньому компоненті створіть кнопку, яка видає подію з новим об’єктом CSS.