Как изменить фон блока и картинку одного элемента при свойстве :focus в css?

Question

[Jooyless]

Есть код:

<li>
                                <div class="faq-question-title">
                                    <img src="./Img and icon/Ellipse 1.svg" alt="" class="faq-img">
                                    <h3 class="faq-question">Брифинг и начало работы</h3>
                                </div>
                                
                                <p class="faq-answer">Постановка задачи, обсуждение проекта с клиентов, расчет стоимости работы. После этого клиент вносит предоплату равную 30% от общей суммы проекта и предоставляет имеющиеся необходимые материалы для сайта</p>
                              </li>

Хочу, чтобы при нажатии на этот блок показывало текст p.faq-answer (это уже сделано), .faq-image менялось на другою картинку и чтобы весь блок менял фон на другой.

Как это сделать?

Comments

[Ankhena]

Нужно понимать 2,5 основные вещи:
1. В фокус могут попасть только интерактивные элементы. Нажатие и фокус это разные вещи. (Можно, конечно, добавить tabindex, но хорошо бы помнить о семантике и функциональности исходных тегов)
2. Как работают селекторы в CSS. В частности, почитать про дочерние, контекстные и соседние селекторы.
https://htmlbook.ru/samcss/kontekstnye-selektory

Возможно, вам понравится тег details

Answer 1

[Сергей delphinpro]

<li tabindex=0>

li:focus { background: red; }
li:not(:focus) .img2 { display: none; }
li:focus .img1 { display: none; }
li:focus .answer { display: block; }