Parents need CSS class names

We can't always write our own code and sometimes we get stuck with someone elses HTML and CSS. In these circumstances problems can arise such as the following.

<div> <h3>Heading</h3> <ul id="special-list"> <li class="list-items">List Item 1</li> <li class="list-items">List Item 2</li> <li class="list-items">List Item 3</li> <li class="list-items">List Item 4</li> </ul> </div>

The above code has a major problem with it. The outside div does not contain an id or a class name. This prevents us from targeting the outer div and also the h3 element. All we can do is target our list items. The only workaround for this is to use jquery to find the parent div and add a class name to it.

/* fix our list item holder so we can target it in our CSS file */ $('#special-list').parent().addClass('special-list-holder');

We can now target our div and also our h3 element but we are using a hack fix to achieve this. Therefore what we need to remember to do is always give our parent object a class name or id. That way we can target all our children. For example:

<div class="special-list"> <h3>Heading</h3> <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> <li>List Item 4</li> </ul> </div> <style> div.special-list { /* styles for div */ } div.special-list h3 { /* styles for h3 */ } div.special-list ul { /* styles for ul */ } div.special-list li { /* styles for li */ } </style>

A simple class name on our outer div is much better than filling up all our items within our div with names.