Как определить конкретный элемент списка (li)?

Question

[mardari98]

Есть список 'li'. Нужно сделать эффект при нажатии на элемент, который будет применяться к тому элементу, на который я нажал.

Лучше показать на примере:

Допустим, есть список:

<ul>
    <li>текст</li>
    <li>текст</li>
    <li>текст</li>
</ul>

Как определить и применить стиль именно на тот элемент, на который я нажал? Например изменить цвет текста.

Answer 1

[Равиль]

CSS
Срабатывает только в промежуток нажима по элементу

li:active {
    color: red;
}

Срабатывает, когда элемент (input формы в основном) получает фокус
по клику или TAB

li:focus {
    color: red;
}

JS

const list = document.querySelector('ul');

list.addEventListener('click', (event) => {
    event.target.style.color = 'red';
});

Или так:
(В этом случае, событие сработает и за пределами списка)

document.addEventListener('click', (event) => {
    event.target.style.color = 'red';
});

event - объект события
target - элемент, на который кликнули

Comments

[mardari98]

Спасибо. Идеальный ответ. Ещё один вопрос. А если внутри li есть другой элемент? И я хочу изменить его при клике на li ?
Пробовал так, но не работает:

const list = document.querySelector('.items');

list.addEventListener('click', (event) => {
    event.target.querySelector('.description').style.height = '246px';
});

[Равиль]

mardari98,
При клике на родительский элемент,
задаст указанные свойства первому элементу внутри него

const list = document.querySelector('ul');

list.addEventListener('click', (event) => {
    const childElement = event.target.querySelector('*');
    childElement.style.color= 'white';        
});

Конечно, желательно использовать классы)

P.S. Наверняка, есть ещё много способов решения этой задачи,
но это решение показалось мне простым и действенным.

[mardari98]

Равиль, Странно. Сделал так. 1 раз получилось, а последующие, сколько бы не кликал, ничего не изменяется.

[mardari98]

Равиль, Вот что говорит консоль:
script.js:35 Uncaught TypeError: Cannot read property 'style' of null
at HTMLUListElement. (script.js:35)