---
title: "Graceful degrading w/ CSS3 selectors"
author: Garrett Winder
date: 2010-01-10
source: GANDR Web Design
weight: archive
url: https://garrettwinder.com/gandrwebdesign/graceful-degrading-with-css3-selectors/
---

# Graceful degrading w/ CSS3 selectors

> From the archive. Shows how Garrett got here; not his current views, services or prices. Written January 2010, GANDR Web Design. For what’s current, see https://garrettwinder.com/agents.md.

> I hate when I finish templating a web project, open up an older browser and an easy CSS layout is broken. In a strange little way, CSS3 fixes that issue (without IE specific stylesheets). Basically, _If the browser can’t read it, the styling doesn’t exist_.

After reading Andy Clark’s [Ignorance Is Bliss](https://24ways.org/2009/ignorance-is-bliss/) post over at [24 Ways](http://24ways.org/) I’ve been putting _way too much thought_ into how I can implement CSS3 functions & features into my everyday work.

We’re currently realigning our [single page website design](http://gandrweb.com/services/single-page-website-design) service and I figured this would be a good time to put the thoughts to the test. This example is with [CSS3 Selectors](http://www.w3.org/TR/2009/PR-css3-selectors-20091215). Looks great in Safari & Firefox, looks good in Internet Explorer.

### The HTML

For this example we are going to use a definition list. It fits perfectly for the task at hand. Below is the HTML:

`Benefits of 1 Pagers

    Full cms integration
    We integrate an easy to use cms into your website allowing you to easily make changes.
    Search engine friendly
    We write really clean code, meaning our sites are more likely to pop up in search engines.
    Trackable results
    Track who your visitors are, where they are coming from and what they are doing.
    Award-winning design
    Our website design work has been featured in showcases all over the web.
`
### Basic CSS

Now we’re going to style it up a bit. Basic code for the not-so-smart web browsers:

`dt {
	font-size: 14px;
	font-weight: bold;
	line-height: 1.05em;
	margin-bottom: 4px;
	text-transform: capitalize;
}
dd {
	margin-bottom: 10px;
	line-height: 1.2em;
}`

With that basic HTML & CSS we get a result that should look something like this:

Simple, clean & usable. Looks good, works good. But lets make use of advanced CSS3 selectors to give people using modern web browsers a little more eye candy.

### CSS with CSS3 Selector Magic
`dt:first-of-type, dd:first-of-type,
    dt:nth-of-type(2), dd:nth-of-type(2),
    dt:nth-of-type(3), dd:nth-of-type(3),
    dt:last-of-type, dd:last-of-type {
        display: inline;
        float: left;
        position: relative;
        margin: 0 10px;
        padding-left: 60px;
        width: 160px;
    }
    dt:nth-of-type(odd), dd:nth-of-type(odd) {
        margin-left: 0;
        padding-right: 60px;
    }
    dt:nth-of-type(even), dd:nth-of-type(even) { margin-right: 0; }
    dt:first-of-type {
        background: url(image1.png) no-repeat 0 0;
        height: 40px;
    }
    dd:first-of-type { margin-top: -20px; }
    dt:nth-of-type(2) {
        background: url(image2.png) no-repeat 0 0;
        height: 75px;
        margin-top: -40px;
    }
    dd:nth-of-type(2) { margin-top: -55px; }
    dt:nth-of-type(3) {
        background: url(image3.png) no-repeat 0 0;
        height: 41px;
        margin-top: 30px;
    }
    dd:nth-of-type(3) { margin-top: -21px; }
    dt:last-of-type {
        background: url(image4.png) no-repeat 0 0;
        height: 64px;
        margin-top: -41px;
    }
    dd:last-of-type { margin-top: -44px; }`

Okay, that’s a lot of code. I gave individual styles to every line of the HTML via CSS3 Selectors and voilà – It looks like this:

So, there it is – How to gracefully degrade your websites with CSS3 Selectors. I understand that code isn’t perfect and I went a little over the top but that’s what this post was for. Hope you enjoyed it.