CSS-селектор для дочернего элемента ЛЮБОГО родителя A или B (лучшая практика)?

Question

Короче говоря, я хотел бы выбрать дочерний элемент, который имеет либо Родитель A или Родитель B.

Мне интересно, есть ли способчтобы упростить мои селекторы в этом сценарии, или если то, что у меня есть здесь, это единственный способ сделать это.Кроме того, есть ли лучшая практика в этом сценарии?Ниже приведены несколько упрощенных примеров:

/* long example (probably not best practice) */
    #parent-a .common-child {
        color: #000;
    }
    #parent-b .common-child {
        color: #000;
    }

/* shortest example I know of */
    #parent-a .common-child, #parent-b .common-child {
        color: #000;
    }

Есть ли способ сделать что-то вроде:

#parent-a||#parent-b .common-child {
    color: #000;
}

В этих простых примерах это может показаться не таким уж большим делом, но в моем настоящемCSS У меня есть несколько десятков селекторов, которые немного цепляются по DOM, и я хочу оптимизировать размер файла / удобочитаемость.

Спасибо!

Answer 1

/* shortest example I know of */
#parent-a .common-child, #parent-b .common-child {
    color: #000;
}

Это было бы наиболее упрощенным решением.Они должны быть отделены.Все, что вы можете сделать, это объединить похожие стили в одну строку, как показано выше.

Однако я бы сказал, что вы почти покидаете область использования селектора идентификаторов.Идентификатор должен быть уникальным, и стили, которые к нему применяются, также должны быть уникальными.Если вы когда-нибудь добавите parent-c или более, вам определенно следует добавить к этим элементам отдельный класс, а не выбирать каждый по его идентификатору.

color: #000 - это очень широкий стиль.Если бы это был единственный стиль, применяемый к обоим этим элементам, было бы целесообразно установить стиль для родительского элемента выше, чтобы он наследовался всеми его дочерними элементами, внуками и т. Д.

Безвидя больше вашей структуры, мы не можем порекомендовать вам лучшие практики.CSS и его оптимизация очень сильно зависят от того, что вокруг него, а также от специфики.

Answer 2

К сожалению, нет более короткого способа сделать это, чем ваш последний пример.