Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Alex Watts
Alex Watts
8,396 Points
Posted by Alex Watts
Alex Watts
8,396 Points

Is this acceptable CSS (see code).

To create lines between the list items in my navigation I used the following code:

.navigation li:nth-child(-n+3)::after {
 content: "|";
 padding: 5px 5px 0px;
}

The code works but is this acceptable in browsers like IE 8. I am concerned that it will not work. If there is a better alternative to my code please reply.

Thanks.

2 Answers

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

Internet Explorer 8 is only compatible with single colon selector and will not understand the double colon.

.navigation li:nth-child(-n+3):after {
 content: "|";
 padding: 5px 5px 0px;
}

IE7 and below are the only browsers that will not support this code (Including all mobile/tablet browsers and all versions).

The only solution I can think of as an alternative for these browsers would be to use jQuery or Javascript to insert a DOM element instead.

Alex Watts
Alex Watts
8,396 Points
Alex Watts
Alex Watts
8,396 Points

Thanks for your help Ashely!