Clean Up Your HTML Code By Making Use of Descendant Selectors

I’ve seen a few aspiring web designers who go overboard with the use of unnecessary div tags as well as the unnecessary assignment of class and id selectors. Here is one recent example I came across.

<div id="menuContainer">
<ul id="menu">
<li class="menuListItem"><a class="menuLink" href="link1.html"><span class="menuText">Item1</span></a></li>
<li class="menuListItem"><a class="menuLink" href="link2.html"><span class="menuText">Item2</span></a></li>
<li class="menuListItem"><a class="menuLink" href="link3.html"><span class="menuText">Item3</span></a></li>
<li class="menuListItem"><a class="menuLink" href="link4.html"><span class="menuText">Item4</span></a></li>
</ul>
</div>

Very messy and loaded with unnecessary code. This well meaning code writer apparently thought he had to assign a selector for every single item he wanted to target, and then wrap the whole thing in a div tag to supply yet another selector to target.

Everything that can be accomplished with the code above, can also be accomplished with the following code.

<ul id="menu">
<li><a href="link1.html"><span>Item1</span></a></li>
<li><a href="link2.html"><span>Item2</span></a></li>
<li><a href="link3.html"><span>Item3</span></a></li>
<li><a href="link4.html"><span>Item4</span></a></li>
</ul>

As you can see, the above code is much cleaner and tidier than the first example. Note that the only selector in this block of HTML is the ul tag with the id of menu. Also missing is the div that wrapped around the whole block of code. Since the ul is already acting as a container for the content, wrapping everything in another container is simply redundant and unnecessary.

So how do you go about targeting the other elements you need to apply styling to, such as the li, a, and span tags? That’s where descendant selectors come to play. A descendant selector allows you to target any of the elements that are a descendant of another element. In the example above, the li, a, and span tags are all descendants of the ul tag.

To take it a step further, in addition to being a descendant of the ul tag, the a tags are also a descendant of the li tags. Then it should follow that the span tags are descendants of the ul, a and li tags. To sum it up, any HTML element that is nested inside another HTML element becomes a descendant of the parent element it is nested within.

Using descendant selectors each element can be targeted for styling like so:
To target the li tags:
#menu li{}
To target the a tags:
#menu a{}
You could also use a more specific selector:
#menu li a{}
To target the span tags:
#menu span{}
Or to be more specific with your selection, any of the following could work:
#menu li span{}
#menu a span{}
#menu li a span{}
You’re probably asking by now, why would you need to be more specific? If #menu span{} works, then why would you ever want to use #menu li a span{}? Well, for this example you probably wouldn’t, but consider the following:
<div id="content">
<p>This is a <span>paragraph</span></p>
<p>This is another <span>paragraph</span></p>
<ol>
<li>This is a <span>list item</span></li>
<li>This is another <span>list item</span></li>
</ol>
</div>

In this example we want to make the span tags within the paragraph bold and the span tags within the ordered list italic, but not bold. If we simply used #content span{}, then we would be affecting the span tags in both the paragraphs and the ordered list. In this case we need to be more specific.
To target the span tags in the paragraph and make only that text bold without affecting any text in the ordered list, we would use:
#content p span{
font-weight: bold;
}

To target the span tags within the ordered list and make only that text italic without affecting any text in the paragraphs we would use:
#content li span{ //you could also use #content ul li span{}
font-style: italic;
}

If, by chance, you did want to target all the span tags in both the paragraphs and within the ordered list to, let’s say, make the font blue, then you would simply use:
#content span{
color: blue;
}

This would make the text wrapped with span tags blue in both the paragraphs and the ordered list.
So there you have it, cleaner, tidier html/xhtml code by making better use of descendant selectors.

This entry was posted in CSS, HTML/xHTML and tagged , , . Bookmark the permalink.

7 Responses to Clean Up Your HTML Code By Making Use of Descendant Selectors

  1. How long did it take you to write this? This is Absolutely fantastic.

  2. Appreciate you sharing, great post.Much thanks again. Really Great.

  3. Got alot of information from this blog, fanastic work, keep it up. :)

  4. These are very useful tips thanks for sharing! Im going to have to tell everyone.

  5. You must take part in a contest for among the finest blogs on the web. I’ll advocate this site!

  6. click here says:

    If you dont mind, where do you host your weblog? I am hunting for a great host and your weblog seams to be extremely fast and up all the time

  7. Hostgator – I have been very happy with them. Thanks for asking.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Proudly powered by WordPress.
preloaded image preloaded image preloaded image preloaded image preloaded image