Несколько DIV, одни и те же классы, как уменьшить CSS разметки?

Question

Прямо сейчас у меня есть CSS как это:

#lightbox2wrapper .panel-col-first .pane-node-title {
text-align:center;
color:#8A3B3B;
font-weight:bold;
font-size:inherit;
margin-bottom:5px;
}

Конкретный .panel-col-first .pane-node-title будет встречаться в нескольких DIV. Я не хочу использовать синтаксис вроде

#lightbox2wrapper .panel-col-first .pane-node-title, #div1 .panel-col-first .pane-node-title, #div 2 .panel-col-first .pane-node-title {
... ...
}

Это сделает CSS очень длинным. Как сделать вышеупомянутые наценки короче?

Спасибо.

Answer 1

Если ваша логика должна явно следовать «примените к A только тогда, когда она появляется в B и только если B также находится в (C | D | E | F ...)

Тогда, извините, но нетнет другого способа задать эту логику с помощью CSS.

Примечание: вам не нужно запускать все селекторы в одной строке. Например, вы можете написать:

 #lightbox2wrapper .panel-col-first .pane-node-title,  
 #div1 .panel-col-first .pane-node-title {    
    text-align:center;  
    color:#8A3B3B;  
    [etc.]  
 }

Если вывсе еще не нравятся такие длинные селекторы, нужно учитывать более короткие имена классов. У вас есть доступ к коду для их изменения?

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

Answer 2

div.SomedistinctiveClassName .panel-col-first .pane-node-title{
... ...
}

Затем передайте элементам div, где вы хотите, чтобы стили вступили в силу, классовое имя "SomedistinctiveClassName" (может быть короче), и вы готовы