Jump to content
Latest News: (loading..)

Recommended Posts

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?
Edited by Pelvis

Share this post


Link to post
Share on other sites

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 ">".

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×