Example: Inheritance
Try to figure out what the styling will be before clicking on the Load page button. The reasons are explained below.
The unordered list element
There are declarations that apply directly to the unordered list element and to the hyperlink elements, but none that applies directly to the list item element with the text Not a link
. As a consequence:
- The list item element with the text
Not a link
inherits colour, font size, and italics from its parent. - The hyperlink elements inherit italics from the parent, but the colour and font size are determined by the colour and font size of properties applied directly to them.
The table element
Here there are declarations that apply to the table element and declarations that apply to the first table row element.
- The table data elements in the first row inherit their colour, font size, and italics from the closer ancestor of the two, namely the table row element.
- The table header elements and the table data elements in the second row inherit their colour and font size from the table element, which is their closest ancestor.
Note:
Hints:
- undefined
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
<!DOCTYPE html>
<html lang="en">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
.closer {
color: blue;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX