CSS selector for element that is NOT inside another element

[james.crosswell]

Bootstrap has a couple of classes that are usually nested together (modal and modal-header):

<div class="modal">  <div class="modal-header">  </div></div>

This is used to create modal dialogs. However I'm working with an app that sometimes sees the modal-header rendered on its own (i.e. not wrapped by an element with the "modal" class applied to it) and in those cases I'd like to override the styling for the modal-header class. So I need a selector that says: give me all elements with the modal-header class applied to them that are not descendants of an element with the modal class. Is this possible? I know typically this would be achieved by styling the modal-header element using a descendant selector... but I'd like to avoid altering the bootstrap source if possible (since it will make upgrading to new versions and using CDN hosted assets easier). So I'm really after a way to override the modal-header style in this particular case (when it's not wrapped in a modal element). TIA. Cheers,James

[jeffman]

Try adding another class that has a ruleset overriding the primary class:

<div class="modal-header other-class">