html element, which has two children head and body. The head has a child element called title. The body has h1, ul, and p elements as children. Finally, the ul element has li elements as children, and the p element has a elements as children.<html>
<head>
<title>Figure 4-3: DOM</title>
</head>
<body>
<h1>Parody Tech Twitter Accounts</h1>
<ul>
<li>
<a href="http://twitter.com/BoredElonMusk">Bored Elon Musk</a>
</li>
<li>
<a href="http://twitter.com/VinodColeslaw">Vinod Coleslaw</a>
</li>
<li>
<a href="http://twitter.com/Horse_ebooks">horse ebooks</a>
</li>
</ul>
<h1>Parody Non-Tech Twitter Accounts</h1>
<p><a href="http://twitter.com/SeinfeldToday">Modern Seinfeld</a></p>
<p><a href="http://twitter.com/Lord_Voldemort7">Lord_Voldemort7</a></p>
</body>
</html>
This is how the code appears in the browser.
Styling a family tree of elements.This version shows a depiction of the code using the tree metaphor.
Parody Tech and Non-Tech Twitter accounts (browser view).Here, each relationship is shown once. For example, in the code, an a element is inside each of three li elements, and this image shows this ul li a relationship once.
Parody Tech and Non-Tech Twitter account (HTML tree or Document Object Model view).Bored Elon Musk is a parody of Elon Musk, the founder of PayPal, Tesla, and SpaceX. Vinod Coleslaw is a parody of Vinod Khosla, the Sun Microsystems cofounder and venture capitalist. Horse ebooks is a spambot that became an Internet phenomenon.
The HTML tree is called the DOM or document object model.
Child selector
The Parody Non-Tech Twitter account anchor tags are immediate children of the paragraph tags. If you want to style just the Parody Non-Tech Twitter accounts, you can use the child selector, which selects the immediate children of a specified element. A child selector is created by first listing the parent selector, then a greater-than sign (>), and finally the child selector.In the following example, the anchor tags that are immediate children of the paragraph tags are selected, and those hyperlinks are styled with a red font color and without any underline. The Parody Tech Twitter accounts are not styled because they are direct children of the list item tag.
p > a {
color: red;
text-decoration: none;
}
Child selector used to style the Parody Non-Tech Twitter accounts.If you use just the a selector here, all the links on the page would be styled instead of just a selection.
Descendant selector
The Parody Tech Twitter account anchor tags are descendants, or located within, the unordered list. If you want to style just the Parody Tech Twitter accounts, you can use the descendant selector, which selects not just immediate children of a specified element but all elements nested within the specified element. A descendant selector is created by first listing the parent selector, a space, and finally the descendant selector you want to target.In the following example, the anchor tags that are descendants of the unordered list are selected, and those hyperlinks are styled with a blue font color and are crossed out. The Parody Non-Tech Twitter accounts aren’t styled because they aren’t descendants of an unordered list.
ul a {
color: blue;
text-decoration: line-through;
}
Child selector used to style the Parody Tech Twitter accounts.Interested in styling just the first anchor tag within a list, like the Modern Seinfeld Twitter account, or the second list item, like the Vinod Coleslaw Twitter account? Go to w3schools.com and read more about the first-child, and nth-child selectors.
