CSS Ancestors & Decendants
The DOM
Ancestors and decendants are used here with reference to the html document object model or DOM.
An understanding of the DOM is helpful to understanding how selectors work.
The DOM says:
- The entire document is a document node
- Every HTML element is an element node
- The text in the HTML elements are text nodes
- Every HTML attribute is an attribute node
- Comments are comment nodes
CSS is about targeting html elements and occasionally html attributes with high precision.
Parent, child and sibling
The main relationships you need understand are parent child and sibling.
These may not be quite what you expect. E.g. The paragraphs that come under a heading are NOT children of that heading.
A child needs to be contained within the parent tags. <parent><child></child> </parent> E.g.
<html><body></body></html> .......body is a child of parent html
<div id="my_div" ><h1></h1><p></p></div> .... h1 and p are children of the parent div
<div id="my_div" ><ul><li></li><li></li><li></li></ul></div> ....li are all siblings
(If you have been indenting your tags as is normally recommended then the children will be indented from the parent.)
Descendant selection and specificity
The style statement below will target every <li> tag in the webpage.
li { color:#FF0;}
Click here for an example
Descendant selection allows us to home in more specifically to given parts of the DOM. For example her we target only the <li> tags in unordered lists
ul li { color:#FF0;}
Click here for an example
And here we target only the <li> tags in unordered lists within my_div
#my_div ul li { color:#FF0;}
Click here to see an example
nth child selection
We can also home in on just the first (or nth) <li> tags in unordered lists within my_div
#my_div ul li:first-child { color:#FF0;}
Click here to see an example
Adjacent sibling selection
It is also feasible to target adjacent siblings: Examples of elements with the same parent in the document object.include:
- a heading and first paragraph under the same heading
- two list elements li under the same unordered list ul
- two divs within a parent div or two li within a ul .
The selection entails use of + as shown:
h2+p { color:red; }
<body>
<h2>This is a heading</h2>
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 3</p>
</body>
Click here to see an example
In CSS3 you can also target any sibling by using a tilde ~ instead of plus +
Click here to see an example of this
Parent selectors
This is a short section: they don't exist - or at least they don't exist in CSS at the time of writing.
It is possible to target the parent element via JavaScript - but that's not for this section of the website.
The Inherit property
Specifying a value of inherit for any CSS property that’s applied to an element will cause the element to gain its parent’s computed value.
E.g. Most browsers impose a standard format (blue and underlined) for link anchors.
a {color:inherit; }
<p> The work <a href="#">link</a> has inherited the paragraph color.<p>
You can click here to check this
Automatic Inheritance
Some - but not all - properties are automatically inherited
| Property | Inherited? | Property | Inherited? |
|---|---|---|---|
| 'background' | no | 'azimuth' | yes |
| 'background-attachment' | no | 'border-collapse' | yes |
| 'background-color' | no | 'border-spacing' | yes |
| 'background-image' | no | 'caption-side' | yes |
| 'background-position' | no | 'color' | yes |
| 'background-repeat' | no | 'cursor' | yes |
| 'border' | no | 'direction' | yes |
| 'border-color' | no | 'elevation' | yes |
| 'border-style' | no | 'empty-cells' | yes |
| 'border-width' | no | 'font' | yes |
| 'bottom' | no | 'font-family' | yes |
| 'clear' | no | 'font-size' | yes |
| 'clip' | no | 'font-style' | yes |
| 'content' | no | 'font-variant' | yes |
| 'counter-increment' | no | 'font-weight' | yes |
| 'counter-reset' | no | 'letter-spacing' | yes |
| 'cue' | no | 'line-height' | yes |
| 'cue-after' | no | 'list-style' | yes |
| 'cue-before' | no | 'list-style-image' | yes |
| 'display' | no | 'list-style-position' | yes |
| 'float' | no | 'list-style-type' | yes |
| 'height' | no | 'orphans' | yes |
| 'left' | no | 'pitch' | yes |
| 'margin' | no | 'pitch-range' | yes |
| 'margin-right' 'margin-left' | no | 'quotes' | yes |
| 'margin-top' 'margin-bottom' | no | 'richness' | yes |
| 'max-height' | no | 'speak' | yes |
| 'max-width' | no | 'speak-header' | yes |
| 'min-height' | no | 'speak-numeral' | yes |
| 'min-width' | no | 'speak-punctuation' | yes |
| 'outline' | no | 'speech-rate' | yes |
| 'outline-color' | no | 'stress' | yes |
| 'outline-style' | no | 'text-align' | yes |
| 'outline-width' | no | 'text-indent' | yes |
| 'overflow' | no | 'text-transform' | yes |
| 'padding' | no | 'visibility' | yes |
| 'page-break-after' | no | 'voice-family' | yes |
| 'page-break-before' | no | 'volume' | yes |
| 'page-break-inside' | no | 'white-space' | yes |
| 'pause' | no | 'widows' | yes |
| 'pause-after' | no | 'word-spacing' | yes |
| 'pause-before' | no | ||
| 'play-during' | no | ||
| 'position' | no | ||
| 'right' | no | ||
| 'table-layout' | no | ||
| 'top' | no | ||
| 'unicode-bidi' | no | ||
| 'vertical-align' | no | ||
| 'width' | no | ||
| 'z-index' | no | ||
| 'text-decoration' | no |
Click here to see an example of how color but not border is inherited.
Inherited relative to what?
We need to be a bit careful with inheritance when we use properties that scale elements.
E.g. If we set a font size to 1.2em when this is inherited from the parent it will become 1.2 x 1.2em =1.44em
For this reason people often use rem (relative to the root rather than the parent)
Click here to see an example of this