Home

How to Style Specific Elements with CSS

|
|  Updated:  
2017-07-17 12:45:04
Getting Started with Coding
Explore Book
Buy On Amazon
When styling specific elements with CSS, it is helpful to visualize the HTML code as a family tree with parents, children, and siblings. In the following code example, the tree starts with the 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.

a family tree of elements 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 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.

an HTML tree or document object view 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 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 accounts 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.

About This Article

This article is from the book: 

About the book author:

Nikhil Abraham was Director of Business Development & Growth at Codecademy. In that role, he taught and trained thousands of beginning coders across a variety of professions. He helped refine Codecademy's online courses, which have introduced basic coding skills to millions of learners.