В настоящее время у меня есть классы CSS, которые отличаются, но для элементов, имеющих дочерние ChildClass
одного класса (ChildClass
). Я хочу изменить непрозрачность дочернего класса, когда родительские классы активны. Сейчас я делаю это со многими объявлениями CSS (см. Пример ниже). Можно ли это сделать с одной декларацией?
Текущий CSS
.class1 {
...elided...
}
.class2 {
...elided...
}
.class1:active .ChildClass {
...elided...
}
.class2:active .ChildClass {
...elided...
}
Для обоих, изменение дочернего класса будет одинаковым. Могу ли я сделать что-то вроде этого?
Что я хотел бы сделать
.class1:active,class2:active .ChildClass {
...elided...
}
Будет ли это работать? Что браузер поддерживает?
Нет, вам нужно поместить FULL селекторные строки в каждый раздел с разделителями-запятыми, поэтому вам нужно:
.class1:active .ChildClass, class2:active .ChildClass {
...elided...
}
.class1:active
вас был таргетинг .class1:active
и .class2:active.ChildClass
а не .ChildClass
для каждого. Запятые отдельные полные селекторные строки, аббревиатуры нет, что имеет смысл, если вы думаете об этом, потому что с помощью сложного селектора CSS не будет никакого способа узнать, где начинается сокращение "ярлыка".
Если вы заинтересованы в сокращении CSS или других способах экономии времени и энергии пальца при наборе сложных селекторов, я рекомендую посмотреть в SASS или другой препроцессор (LESS, Stylus и т.д.).
Просто запятая отделите все свои объявления:
.class1, .class2, .class1:active .ChildClass, .class2:active .ChildClass {
...elided...
}
Второй пример - это не то, что вы ищете, так как это эквивалентно:
.class1:active {
...elided...
}
class2:active .ChildClass {
...elided...
}