CODEWITHSUNDEEP
cssclasshtmlcss-selectors
Minghui Yu
Minghui Yu

Reputation: 1363

Multiple DIVs, same Classes, how to reduce css markups?

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.

Upvotes: 1

Views: 3087

Answers (2)

Faust
Faust

Reputation: 15394

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.

Upvotes: 1

Guidhouse
Guidhouse

Reputation: 1426

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

Then give the divs, where you want the styles to take effect, the clasname "SomedistinctiveClassName"( can be shorter), and you're ready

Upvotes: 0

Related Questions