Как установить цвет посещённого дива с ссылкой внутри него?

Question

[Чёкатилло]

Есть простое решение для установки цвета посещённой ссылки здесь: htmlbook.ru/faq/kak-ustanovit-tsvet-poseshchennoy-...

a {
    color: #800000; /* Цвет обычной ссылки */
   }
   a:visited {
    color: #808000; /* Цвет посещенной ссылки */
   }

А можно ли наложить поверх посещенного блока с ссылкой цвет (блок с цветом)
Или как-то еще обозначить посещенную ссылку вместе с родительским дивом?

Эти блоки у меня- превью постов с изображением, с сылкой, с категориями, датой Это все находится внутри блока, который и надо например затемнить, если ссылку этого блока превью уже посетил пользователь

Сайт на Вордпресс
Спасибо

Answer 1

[Сергей delphinpro]

<a class="block-a" href="visited.html"></a>
<div class="block">
    <a  class="block__link" href="visited.html">Ссылка</a>
</div>

.block-a:visited + .block { opacity: 0.5; }

Размещаем перед блоком пустую ссылку (или как-то прячем ее иначе) с тем же самым адресом, что и у ссылки внутри блока и используем сестринский селектор для стилизации блока.

Answer 2

[DTX]

Либо как посоветовал @dpr
Либо, если не хочится плодить якори, на чистом css:
.block:has(a:visited) { opacity: 0.5; }

З.ы. Как вставить линк на профиль пользователя тостера??
Если есть вариант отличный от ручного добавления ссылки, то вопрос ещё актуален)

Comments

[Anton Bobylev]

С поддержкой has все плохо: caniuse.com/#search=%3Ahas

[Ankhena]

dpigo: это даже не "плохо", это просто никак :)

[DTX]

dpigo: хм, а мне казалось, что я пользовал подобное уже.. Видимо дело было с jQuery. Но пример всё равно полезный))

[Сергей delphinpro]

З.ы. Как вставить линк на профиль пользователя тостера??

Просто скопировать ник с собачкой, линк вставится сам
@DirecTwiX => DTX

[DTX]

Сергей: видимо, такое прокатывает только в комментах, но не в ответах на вопрос. Я пробовал писать Сергей в ответе на вопрос, но ссылкой он не стал.