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 use knockout and i18next for a specfic screen size?

    how to make “before” li is fixed at the bottom of li?

    How to change angularJS's default css styles? Search box etc

    how to make css sub menu links longer than parent link

    How to stretch segment of image in html/css

    how to set auto div height from ul/li elements variable height

    css: how to surround an image with two other images vertically centered around the first one?

    How to Programatically Toggle a Zurb Foundation Switch Control, in Chrome?

    How can mono social icon work without a class per icon?

    How to align the navigation menu in wordpress?

    HTML/CSS - How to make text-overflow in line with each other?

    How to set HTML table cell to inherit its size?

    How do I get two adjacent spans to display their text vertically?

    How can i make an inline li 100% width of window with horizontal scrolling viewport

    Html, CSS - How to create a donut chart like this?

    How to create a wrapper with different angles in CSS

    How to include by default icon inside a textarea

    How does max-width property make images responsive?

    How to use font-face with cssless?

    CSS - How to place div side by side with no space at left and right

    How do I make text and other items look like chalk without a specialized font using only HTML and CSS? [closed]

    How can I set a height of document [duplicate]

    How can I set the style of a dojo-element?

    Content property in CSS - how to put content into several paragraphs

    Use css to not show the text box

    How to pull images out of WordPress content?

    Menu - Show up the Submenuitems under the whole Menuitems - HTML/CSS

    How to identify unused css definitions [closed]

    How to style the parent element when hovering a child element?

    How to prevent css keyframe animation to run on page load?