Pelvis Posted July 26, 2017 Share Posted July 26, 2017 Hello everybody! -- If for example I have this line of code for the styling of Right column panels: =========== <div id="columnRight" class="col-md-2"> <div class="panel panel-default"> <div class="panel-body text-center"> </div> </div> </div> =========== And I want to target the CSS to change "panel-default" or "panel-body" how can I do it to target only the Right column panels and not the panels of the whole page? The only thing I have as a unique element is that <id="columnRight"> Which is the CSS code I need to use? Link to comment Share on other sites More sharing options...
multimixer Posted July 26, 2017 Share Posted July 26, 2017 #columnRight .panel-body{} My community profile | Template system for osCommerce - New: Responsive | Feedback channel Link to comment Share on other sites More sharing options...
Pelvis Posted July 26, 2017 Author Share Posted July 26, 2017 George ...! ...Still here? We have spoken by phone Thanks! Link to comment Share on other sites More sharing options...
MrPhil Posted July 26, 2017 Share Posted July 26, 2017 If that doesn't quite work, you might try #columnRight > div.panel-body, #columnRight > div.panel-default {} to get both divs. Also try without the ">". Link to comment Share on other sites More sharing options...
Pelvis Posted July 26, 2017 Author Share Posted July 26, 2017 Thanks! Phil! Your tip #columnRight > div.panel-body has finally worked. Link to comment Share on other sites More sharing options...
Pelvis Posted July 26, 2017 Author Share Posted July 26, 2017 All works Georges & Phils. Thanks for help! Link to comment Share on other sites More sharing options...
multimixer Posted July 27, 2017 Share Posted July 27, 2017 There is no reason to make css selectors "stronger" if not necessary Using the "direct child" selector (>) will not do anything to .panel-body since it is not a direct child of #columnRight unless you have a different markup. Your direct child is only panel-default. You use a direct child selector only if you want to exclude items with same class name further down in the markup tree. If there are no such items, you don't have to use it Targeting both selectors may be useful or not depending on what you want to achieve. If e.g. you want to add a padding, you'll end up having a "double" padding in the inner div (panel-body) My community profile | Template system for osCommerce - New: Responsive | Feedback channel Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.