How to make a div and its children to ignore its parent styles?


Tags: html,css,twitter-bootstrap,responsive-design

Problem :

Lets say I have the following markup:-

<div class="house">
  <p>...</p>
  <div class="room">
    <p>...</p>
  </div>
</div>

<div class="house">
  <p>...</p>
  <div class="room porch">
     <p>...</p>
  </p>
</div>

CSS:-

.house .room { /* Some styling done here */ }

.porch { /* Some different styling done here */ }

Now, I'd like my div with the classes room and porch to consider only the class porch and ignore the styles of house and room. Is this possible? This is just a simple example, I have a case where in place of the class porch, there are many more classes, so overriding just one class with !important won't work, as there could be a lot of classes with various styles.

How can this be achieved?



Solution :

you could use :not

.house .room:not(.porch) { 
      /* .room elements only when they have not .porch class */ 
}

.porch { 
      /* all .porch elements */
}

Browser support : https://developer.mozilla.org/en-US/docs/Web/CSS/:not


    CSS Howto..

    CSS: How to add classes to existing grid that allow skipping columns on the left side

    CSS: How to set 100% width on the first li of ul

    How to align 2 divs inside one div container with CSS (see image)

    How to indicate that an LI with a link was pressed.

    How do I get this div to be positioned below this search form?

    How a css selector is applied when reffering to multiple classes, ids, or elements?

    How to change CSS over selected element only using $(this)

    How do I show annotations on my Google Chart that extracts data from a Google Spreadsheet?

    How can I separate a column on a web page depending on whether or not the browser is mobile?

    How to make a number of breaks in CSS? [closed]

    How to bring a specific overlayed image to the foreground

    How should I handle this CSS Inheritance conundrum?

    how to add two widths to one class in css

    how to place an image at the center of the browser irrespective of the resolution?

    How to reference JSF image resource as CSS background image url

    How to create responsive blocks by using just CSS and HTML

    How can we cache inline SVG in Browsers?

    How to put those things next to eachother? CSS

    why is .show() making the target div appear at top of page?

    How to align 3 divs with CSS retaining relative position while scaling window

    CSS: How to get an animated gif background-image on top of a div

    how to align divs with different width within another parent div?

    yui-css grid: how to get a 1/4 - 2/4 - 1/4 grid set up?

    How to select a group of elements after every nth-element in CSS?

    How can I control button margins using CSS (IE8 compatible)

    Show text at bottom with css

    How to style the entire first row of a table in css

    How to deselect a table's head and certain tds with css

    How to put a list of images in a fixed div

    How to change elements opacity based on if checkbox is or is not checked with CSS only?