IE and :first-of-type

Question

I'm a beginner, so if u know other solution tell me ;) I want to make menu on my website look like this:

link / link / link / link / link

Menu is in so here's what I've made:

li:before {
    content: "/";
}

li:first-of-type {
    color: #FFF; /* I've made first "/" same color as background, so we don't see it */
}

There are some padding tags so it looks nice, but I want to make it simple to read for You.

In most browsers it looks fine, but of course older Internet Explorer doesn't support :first-of-type tag. How can I work it out, so the user don't see just the first slash?

Answer 1

li:first-child:before {
    content: '';
}

The :first-child pseudo class is supported by IE7 and later.

Note that IE7 supports :first-child (with some caveats), but not until IE9 did it support its friend :last-child.

Also, to hide content added with content property, don't change the color to match the background color, as that is what I would call an ugly hack.

Instead, set its content to an empty string, like in the example above.