html - How to use :before for the third <li> element? -

how add > before third <li> element without adding new classes or id's?

here jsfiddle.

html:

<ol class="breadcrumb-tasks">   <li>ethernet</li>   <li>compputer</li>   <li>design</li> </ol> 

css:

.breadcrumb-tasks{   padding: 0;   list-style: none; }  .breadcrumb-tasks li {   color: #999;   display: inline-block; }  .breadcrumb-tasks li + li:before {   color: #ccc;   content: "/\00a0"; } 

for old browsers don't support :nth-child() pseudo class use adjacent sibling selector follows:

.breadcrumb-tasks li + li + li:before {     content: ">\00a0"; } 

and override content 4th, 5th,... list items as:

.breadcrumb-tasks li + li:before,           /* selects 2nd+ list items  */ .breadcrumb-tasks li + li + li +li:before { /* selects 4th+ list items  */   color: #ccc;   content: "/\00a0"; } 

working demo

but modern browsers support css3 selector (including ie9+):

.breadcrumb-tasks li:nth-child(3):before {     content: ">\00a0"; } 

working demo.