Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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

Thanks for your help Ashely!