Accessibility Links

Search Blink-Design

Forget IE6, use more efficient CSS

Thanks largely to IE6 a surprising number of developers never utilise CSS to its full potential. You can navigate the DOM with so much more than class, ID and element selectors.

I’m going to touch on a few of the selectors that you can start using right now thanks to support in IE7. As we gradually move away from the 8 year old IE6 it’s time to start fully utilising CSS.

Attribute Selectors

These are great for styling forms. They allow you to grab hold of an element based on any of its attributes. There are many variations on how you can do it, including exact matches, part matches or only if it doesn’t match. Let’s look at the most common one.


<input type=”text” name=”first-name” maxlength=”32” />

A common HTML input element. Usually you’d need to stick a class or id on there which is not a huge problem, but we can grab hold of either the type=”text” or name=”first-name” to style our input.


input[type=text] {
border:  none;
}

or


input[name=first-name] {
border:  none;
}

Either of these selectors will allow you to style the form input. And you are of course free to use this on any element and using any value of attribute.

Child Selector

The child selector will allow you to grab hold of all elements that are directly children of another element. Consider the following common markup structure


<ul class=”list”>
      <li>
             <ul>
                   <li>Sub menu item</li>
                   <li>Sub menu item</li>
             </ul>   
      </li>
</ul>

Let’s say we only wanted to style the parent li elements and not the inner ones contained in the ul. Before, we would have to apply styles like ul.list li and then override the inner items with ul.list li li which is a pain and wastes needless CSS selectors.
All you need to really do is this:


ul.list  > li {
border:  1px solid #ccc;
}

This will only apply the border to li items that are directly children of the .list ul element. Seeing as the inner li elements are children of another ul element they will remain unaffected. Very handy as you’d be overwriting the border with another rule.

Adjacent Selector

I hate adding a class to an element just because I can’t get at it any other way. The adjacent selector helps solve a lot of these problems by letting you grab hold of elements that are next to each other in the DOM.

An example is below:


<div id=”content”></div>
<p>I’m a lonely orphan paragraph</p>
<div id=”footer”></div>

We can simply use this CSS to get to the lonely paragraph


#content + p  {
color:  red;
}

You can also chain these together to get to a paragraph further down the list. Say for example there were four lonely paragraphs in the above example. We could use this to get to the fourth:


#content + p + p + p + p {
color: red;
}

That’s slightly long-winded but it does mean you can keep your HTML clean!

:first-child pseudo class

A really handy one. It lets you style the first child of any group of elements. A common example is (and used on this very blog!) to style the first paragraph differently on a news or blog post. We can easily achieve this with :first-child.


#post p:first-child {
font-weight: bold;
}

Simple!

CSS 3 supports :last-child which every modern browser supports except IE8 and lower. Microsoft only just about managed to nail CSS 2.1 and are miles behind as usual.

General sibling combinator

This selector is very similar to the adjacent selector but it doesn’t care what is between the two designated elements. Say for example you had a long document that was separated with h3 elements and in between those you might have p elements, div elements etc. 

You want the first h3 to have no margins but all the following ones need to have a margin of 10px. Instead of a unique class or id you can use this:


h3 ~ h3 {
margin: 10px;
}

This is saying “After the first h3 find all other h3 elements and apply this rule, but don’t worry about what is between them”

That’s supported by IE7 too!

There are so many more selectors but hopefully this little selection (ha) has given you food for thought.

Handy Links

Posted on Tuesday, May 26th 2009 and there are 17 comments

Categories: CSS, Tricks n Tips

17 Comments

Contribute

Fields marked with * are required. Your email will not be shown.

  • Please enter the word you see in the image below:

Site Navigation