Question

Right now, I have CSS like this:

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

The particular .panel-col-first .pane-node-title will occurred in more than one DIV. I do not want to use syntax like

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

It will make CSS very long. How to make the above markups shorter?

Thank you.

Answer 1

If your logic must explicitly follow “apply to A only when it appears in B and only if B is also in ( C | D | E | F …)

Then, sorry, but there is no other way to specify this logic with CSS.

Note: you don’t have to run all the selectors on one line. E.g., you could write:

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

If you still don’t like such lengthy selectors, one thing to consider is shorter class-names. Do you have access to the code to change them?

And you have access to modify all the potential target elements’ class-names, you might want to just create a new class for that situation, apply all the styles to that class, and make sure that this class is put on the target elements. Your CSS selectors then would no longer expresses this logic explicitly, but it would still work. Specificity might still be an issue, though, if you’re trying to override other styles applied to those elements.