Выбор всех псевдоэлементов элементов с классом/идентификатором 'x'

Я ищу способ выбрать все псевдоэлементы элемента, который имеет класс galleryBlock, а также способ выбрать все псевдоэлементы элемента с определенным идентификатором.

Мой код настроен как таковой: сетка из нескольких взаимосвязанных блоков, некоторые из которых охватывают несколько столбцов, некоторые охватывают несколько строк.

введите здесь описание изображения

Каждый из этих блоков также имеет класс galleryBlock, а также второй класс — то, что представляет собой второй класс, зависит от отношения блоков, так как псевдоэлементы этих вторых классов используются для придания блоку определенного отношения.

Например, .square имеет псевдоэлемент, определенный :after, чтобы придать этому блоку квадратное соотношение и т. д.

Я хочу иметь возможность при наведении на любой .galleryBlock переходить его непрозрачность на 0,5. Я также хотел бы иметь возможность индивидуально устанавливать цвет каждого псевдоэлемента — свой цвет для каждого псевдоэлемента.

Вот код, который я пытаюсь:

.galleryBlock:hover *:after {
    opacity:0.5
}
.galleryBlock *:after {
    transition: opacity 0.2s;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
}
#one *:after {
    background: linear-gradient(red, blue);
}
#two *:after {
    background: linear-gradient(green, yellow);
}
/* etc, etc */

Но это не работает. Я подозреваю, что неправильно выбираю псевдоэлементы. Как мне это сделать?


css css-selectors pseudo-element
person GtwoK    schedule 07.04.2015    source источник
comment
Не могли бы вы также привести пример вашей HTML-структуры?   -  person Jesse Kernaghan    schedule 08.04.2015
comment
Вместо этого попробуйте .galleryBlock:after и .galleryBlock:hover:after.   -  person Hashem Qolami    schedule 08.04.2015
comment
@HashemQolami О боже, да, это работает безупречно. Если вы хотите указать это как ответ, я отмечу его как правильный!   -  person GtwoK    schedule 08.04.2015

Ответы (1)


arrow_upward
2
arrow_downward

Поскольку все ящики имеют класс .galleryBlock — либо у них есть определенные идентификаторы, либо нет — псевдоэлементы ::after могут быть сопоставлены следующим образом:

.galleryBlock:after {
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

И в состоянии :hover:

.galleryBlock:hover:after {
    opacity: 0.5;
}

В этом случае между простыми селекторами не должно быть пробелов. потому что пробел используется как комбинатор потомков.

Другими словами, используя .galleryBlock:hover :after, браузер пытается сопоставить каждый псевдоэлемент ::after потомков элементов, имеющих класс .galleryBlock, в состоянии наведения. Пока ищем псевдоэлемент ::after самих .galleryBlockов.

Также обратите внимание, что в конце селектора CSS можно добавить только один псевдоэлемент:

4. Синтаксис селектора

Селектор — это цепочка из одной или нескольких последовательностей простых селекторов, разделенных комбинаторами. Один псевдоэлемент может быть добавлен к последней последовательности простых селекторов в селекторе.

Простой селектор может быть селектором типа, универсальным селектором, селектором атрибута, селектором класса, селектором идентификатора или псевдоклассом.

Поэтому селектор должен быть таким: .galleryBlock:hover:after, а не .galleryBlock:after:hover.

person Hashem Qolami    schedule 07.04.2015