Inheritance

ancestors

Certain styles can be inheritedA feature of some types of styling indicating that it can be passed on from an ancestor in the tree representation of the document. from a containing element, that is, an ancestorThe parent or parent of the parent or so on. in a tree. A style is inherited only when no declaration for that aspect applies directly to the element itself.

If there are multiple ancestors with properties that can be inherited, the closer the ancestor, the higher the priority. That is, a declaration for the parentThe node "above" a node in a tree, connected by an edge. will have priority over a declaration for the parent of the parent, which will have priority over a declaration for the parent of the parent of the parent, and so on.

This illustration depicts part of the tree representation of the main elementAn element that contains the main content of the page. in a document; the dashed red arrows indicate that the tree continues downwards. The yellow paragraph elementAn element consisting of text that forms a paragraph. has three ancestors depicted in the illustration, and above them the body elementAn element that contains all the content of the page. and html elementAn element for the entire document. of the document (not shown in the illustration). The article elementAn element that designates a self-contained part of the content. will have highest priority, followed by the section elementAn element used as a thematic grouping of material., and then the main elementAn element that contains the main content of the page.. After that the body element and html element would be considered.

None of the following can be inherited:

  • margins
  • padding
  • borders
  • background colours
  • properties related to positioning