0

In the following example, the child divs one and two have the font-style of the parent but do not have the float style. Is there a list of which styles should cascade and which will not?

Link to jsfiddle demo

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    body > div {
      float: left;        /* not inherited by child div */
      font-style: italic; /* is inherited by child div */
    }
    body > div > div {
      /*float: left;*/  /* uncommenting this have let the child div have the correct style */
    }
  </style>
</head>
<body>
  <div>
    parent
    <div>
      one
    </div>
    <div>
      two
    </div>
  </div>
</body>
</html>
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
AJP
  • 26,547
  • 23
  • 88
  • 127
  • Almost no styles are not inherited by default. This is pretty much always a good thing because it'd be way more work to undo automatic inheritance than to explicitly declare it. In my experience, it's mostly only styles related to the text/font which are the only ones that will be inherited automatically. All styles, however, have the option to inherit values from their parent. If you wanted the float of your 'body > div > div' selector to be inherited (rather than specify it twice), you could do 'float: inherit' instead. – Michael Mar 17 '14 at 10:56
  • 1
    http://www.w3.org/TR/CSS2/propidx.html have a look at the inherited column – Pete Mar 17 '14 at 10:58
  • 3
    FYI, "cascade" and "inherit" are two completely different concepts. They are not synonymous. All styles are affected by the cascade which happens on a per-element basis, but not all styles are inherited by descendants by default. See http://www.w3.org/TR/CSS21/cascade.html for what the terms mean. – BoltClock Mar 17 '14 at 11:22
  • What should we do with this question: close it? Or does someone want to summarise these excellent comments and references into an answer? – AJP Mar 17 '14 at 14:09
  • @MrLister "Shows no effort"?! ;) No seriously though I did search for 10 minutes, but the confusion between cascade and inherit was what tripped me up. Thanks for link to "duplicate". – AJP Mar 17 '14 at 21:10
  • Sorry about that; I didn't fully realise that the terminology was such a stumbling block. I googled for "which css styles inherit" and the duplicate question was the first thing that turned up. But you're right, googling for "which css styles cascade" doesn't yield obvious results like that. My apologies. – Mr Lister Mar 17 '14 at 21:51
  • No worries. Marking as duplicate is good. – AJP Mar 18 '14 at 10:51

0 Answers0