Jump to content
Latest News: (loading..)

Archived

This topic is now archived and is closed to further replies.

Pelvis

a small CSS question

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?

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


If you are running the "official" osC 2.3.4 or 2.3.4.1 download, your installation is obsolete! Get (stable) Frozen or (unstable) Edge. See also the naming convention and the latest community-supported responsive "Edge" release

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

×