HTML and CSS Reference
In-Depth Information
Figure 6-1.
Example HTML hierarchy
Inheritance
Inheritance is another important concept in CSS. It makes certain styles apply not only
to the specified element but also to all its descendant elements. For example, the
color
property is inherited; the
border
property is not. This default inheritance is usually the
intended behavior, making inheritance very intuitive. Any property can also explicitly be
given the value
inherit
to use the same value as the one the parent element has for that
property.
/* Inherit parent's border */
p { border: inherit; }
Inheritance enables you to apply a style to a common ancestor whenever you find
a place in which every descendant element needs that same style. This process is more
convenient and maintainable than applying the style to every descendant element that
needs that specific style. For example, if the text for an entire document needs to be set
to a particular color, you can apply the style to the
<body>
element, which is the common
ancestor for all visible elements.
/* Set document text color to gray */
body { color: gray; }
Now that you have an understanding of the HTML hierarchy and the inheritance
concept, the relationship selectors of CSS can be discussed.
Adjacent selector
The adjacent sibling selector selects the second element if it comes directly after the first
element.
div+p { color: red; }
