How to override css grouped styles


Tags: html,css,twitter-bootstrap

Problem :

I'm looking for a way to override a bootstrap accordian style.

.panel-group .panel-heading+.panel-collapse .panel-body {
    border-top: 1px solid #ddd;
}

I am using an accordian inside a <div class="settings"><div>. I can therefore overide certain styles with the settings selector.

.settings .panel-heading {
    padding: 0;
    border: 0;
}

But when I use the settings selector with the grouped styles at the top it doesn't work...

.settings.panel-group .panel-heading+.panel-collapse .panel-body {
    border-top: 1px solid #ddd;
}

This also doesn't work...

.settings.panel-group .settings.panel-heading+.settings.panel-collapse .settings.panel-

body {
        border-top: 1px solid #ddd;
    }

Please can someone point me in the right direction?



Solution :

If your markup looks like this:

<div class="settings">
  <div class="panel-group" id="accordion">
  ...
  </div>
</div>

Then you need to have a space in your css selector between the .settings and .panel-group to indicate a descendant element.

.settings .panel-group ... { }

If you have .settings.panel-group without a space, it means the markup would have to be <div class="settings panel-group">.


    CSS Howto..

    How to switch left and right in a css file?

    How to keep the Parent menu hovered while the mouse in child menu in a Dropdown Menu

    CSS - how to make the end of the word blurry?

    How to change select element's background color when it's selected?

    How to use HTMLElement.classList(.toggle)?

    How to bring a specific overlayed image to the foreground

    How to display a div next to another div with no width defined?

    How to dynamically generate CSS3 keyframe steps using SASS?

    CSS How to use margins with different divs

    How to add javascript expression's output to my CSS?

    Bootstrap css, how to make always visible navbar-toggle?

    How to make responsive popup div?

    How to add text underneath the centered image

    CSS - How to hide extra images

    How do I make an entire
  • element a link?
  • How to make a vertical CSS menu with arrows on the right of each entry?

    How to add css-keyframes to vaadin components?

    How to automate background width in CSS

    HTML - How do css/javascript files get loaded?

    How to load chosen alternative css as default css? [closed]

    How to hide all element on html page except one div using css?

    How to Display a DIV with 'fixed' and 'inline-block' Added to its CSS Properties

    How to change CSS (background-image) from JQuery in Rails?

    How to stretch a background-image with css

    How can I select every other element that does not have a specific class?

    jQuery - How to get elements height value and use it in another element via css code?

    How to apply CSS Style to QMenu via an entire MainWIndow

    How to make border for UL if Li has style “float:left;”?

    How to put padding on SPAN only when not empty

    How do I get an element to always occupy a specific percentage of its parent element, even when the browser is resized?