Как применить стиль к sibling-элементу, если он псевдоэлемент?

Question

[Кирилл]

К обычным элемента по типу p + p применять стиль получается, но для случаев p + :after ничего не получается. Вот вёрстка:

<div>
    <p>Привет!</p>
</div>

Вот стили:

div:after {
    display: block;
    content: "";
    width: 100px;
    height: 100px;
    background: red;
}

p:hover + div:after {
    background: green;
}

Пол логике при наведении на p псевдоэлемент div:after должен поменять цвет, но ничего не получается. Существуют ли способы решения проблем с оператором + и ~ для псевдоэлементов?

Comments

[Ankhena]

Псевдоэлемент никому не сиблинг, его вообще нет в DOM.

p:hover + div:after

Вот это значит, что вы хотите найти after у div'а, который находится ПОСЛЕ p. Но в коде-то div это родитель p.

Решение на JS - добавлять какой-то класс div'у при наведении на p. И дальше к этому классу ::after.

Answer 1

[Андрей]

Конечно есть, надо p сделать не потомком div, а соседом как и задумано ;)
https://jsfiddle.net/4qrmdckp/

Comments

[Кирилл]

Интересно.. ) Ведь :after и p находятся на одном уровне? оба — потомки div

[Кирилл]

Но мне обязательно нужно, чтобы p был внутри div. Так задумано. Как тогда решить?

[Андрей]

Кирилл: чтобы р был внутри div’a и только именно при наведении на р срабатывал hover на after родителя? Что мешает div:hover:after такую штуку сделать?
Да и в любом случае, обращение к родителю средствами css невозможно, как и к соседу слева (без использования order)

[Сергей Горячев]

Кирилл: На CSS нельзя обратиться к родителю.
Только к потомкам и соседям.

[Сергей Горячев]

как и к соседу слева (без использования order)

Блин, гениально же))) А мне как-то нужно было решить эту задачу, блок был слева) Ох, не додумался)))

[Андрей]

Сергей Горячев: это действительно выручает в некоторых случаях :)

[ⓒⓢⓢ]

Сергей Горячев: Используя связку input+label
Можно извратиться и обратиться и к родителю, и к потомкам родителя.
https://jsfiddle.net/4jgLzwc0/

Связка даёт простор, можно например построить вкладки\табы на страницах, без использования js, используя только input[type="radio"]:checked и label

[Андрей]

JRK_DV: Про табы согласен, можно, но вот это вот детище доктора франкенштейна в песочнице я осознать не могу, к тому же, слава комплюктерным богам, это не работает в сафари и даже в сафари тп.

[Ankhena]

JRK_DV: уж лучше 3 строчки JS, чем то, что в примере.

[ⓒⓢⓢ]

Ankhena W: чем лучше, можно пример?
Про кроссбраузерность нечего не сказано
Естественно по вопросу ТС

Существуют ли способы решения проблем с оператором + и ~ для псевдоэлементов?
Но мне обязательно нужно, чтобы p был внутри div. Так задумано. Как тогда решить?

[Ankhena]

JRK_DV: Вопросы по верстке без адекватной кроссбраузерности это нонсенс.
Кроме этого есть еще семантика. И легко понятная логика.

Answer 2

[Виктор Янышев]

div:hover:after {
    background: green;
}

https://codepen.io/anon/pen/GvNbdZ

Comments

[Кирилл]

Нет, надо чтобы только при p:hover.

[Виктор Янышев]

Кирилл: JS