Здравствуйте. Имею вопрос, всплывший в процессе верстки:
кем являются псевдоэлементы по отношению к элементам, из которых они были созданы?
Допустим, есть элемент <div class="main-element"></div>
Если относительно него были созданы псевдоэлементы main-element::before и .main-element::after, кто они и по отношению к main-element?
К чему такой вопрос:необходимо сделать анимацию на основе css, состоящую из трех элементов. Создала див, два псевдоэлемента, но когда стал вопрос о порядке отображения, z-index, не сработал на основном элементе (т.е. при большом индексе его всё еще перекрывал элемент с меньшим индексом). Где-то на форуме нашла, что псевдоэлементы являются дочерними относительно своего эл-та-прородителя. Хорошо.
Потом пошла использовать это св-во на :hover. На сколько знаю, hover работает по принципу
родитель:hover дочерний элемент {св-во css}. Но блин! Если исходить из того, что элемент-прородитель является родителем псевдоэлементу, то для ховера это не сработало! Пришлось указывать родителя повыше, чтобы св-во заработало.
Итого - вопрос: кем же являются псевдоэлементы по отношению к элементам-прородителям: равными или дочерними? И Почему одно св-во работает как для дочернего, а другое - как для равного?
Дочерний элемент – тот, который имеет свой собственный тег. А псевдоэлемент – это псевдоэлемент. Его можно рассматривать как нечто, продолжающее основной тег, но дочерним называть не следует, ИМХО.
Если не работает z-index, то сначала проверьте какое позиционирование задано для элементов. z-index работает для элементов с абсолютным или относительным позиционированием. Второе, это как правильно заметили выше, контекст наложения. Тут надо код смотреть, так не скажешь в чём конкретно проблема.
С ховером тоже не совсем понятно. Селектор типа .element:hover::after {color: red;} должен работать нормально. Там опять таки надо код смотреть и разбираться.
Итого ответ: скорее всего, в коде имеют место другие проблемы, не связанные с неправильным поведением псевдоэлементов. Ну а псевдоэлементы ведут себя, в целом, как дочерние элементы с некоторыми особенностями. Не как равные, разумеется.
Спасибо за ответ. Тут ещё откопала (сама HTML академия делала видео процесса верстки), что иногда нужно вообще давать отрицательный Z-индекс и только тогда нужный порядок срабатывает. При этом все элементы относительно и абсолютно спозиционированы. И даже непосредственно дочерние.Не знаю, с чем это связано.