Menu icon Foundation
Simple CSS Selector Question

Hello. I have a pretty simple CSS question that I haven't been able to figure out yet:

I have a page with a small grid of products. Each product is an individual panel, but I want to override just a few parts of the default .panel class. These revisions can be see in my .sp-product_grid class (text alignment, background color and border). The problem I'm having is I need to declare the background and border elements as !important, which I don't really want to do. But it's the only way I can get around it right now.

Is there any selector trick I can use in my CSS to get past this? Or should I just not use the panels?

Thanks!
Steven

/* CSS: */
.sp-product_grid {
    text-align: center;
	background-color: #fff !important;
	border: none !important;
}


<!-- Html: -->
<div class="sp-product_grid large-12 column">

    <div class="large-3 medium-6 column">
    
        <div class="panel">
        
            <h3 class="sp-h3">Vehicle Graphics</h3>
            
            <p>Olipa nuori Joukahainen, laiha. Se kavi kylassa...</p>
            
        </div> <!-- / .panel -->
    </div> <!-- / .large-3, .medium-6, .column -->
</div> <!-- .sp-product_grid, .large-12, .column -->

cssclassesmultiple classesselector

Hello. I have a pretty simple CSS question that I haven't been able to figure out yet:

I have a page with a small grid of products. Each product is an individual panel, but I want to override just a few parts of the default .panel class. These revisions can be see in my .sp-product_grid class (text alignment, background color and border). The problem I'm having is I need to declare the background and border elements as !important, which I don't really want to do. But it's the only way I can get around it right now.

Is there any selector trick I can use in my CSS to get past this? Or should I just not use the panels?

Thanks!
Steven

/* CSS: */
.sp-product_grid {
    text-align: center;
	background-color: #fff !important;
	border: none !important;
}


<!-- Html: -->
<div class="sp-product_grid large-12 column">

    <div class="large-3 medium-6 column">
    
        <div class="panel">
        
            <h3 class="sp-h3">Vehicle Graphics</h3>
            
            <p>Olipa nuori Joukahainen, laiha. Se kavi kylassa...</p>
            
        </div> <!-- / .panel -->
    </div> <!-- / .large-3, .medium-6, .column -->
</div> <!-- .sp-product_grid, .large-12, .column -->
Gabriel Martin about 5 years ago

Here's a great article on specificity of css, and one from MDN which is a little drier, but is also good:

http://css-tricks.com/specifics-on-css-specificity/ (readable)

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity (MDN)

This seems like an opportunity to avoid using !important (another Coyier article on that: http://css-tricks.com/when-using-important-is-the-right-choice/) by leveraging specificity in your CSS.

Steven Thate about 5 years ago

Thanks, Gabriel!

I read the last CSS Tricks article you mentioned, When Using !Important Is The Right Choice, but never came across the first one before. That one helped!

I made it more specific and now it's working great.

div.sp-product_grid div.panel {
background-color: whatever;
}