Using css .first to create list item dividers

Please reference the this example:

I'm trying to create vertical dividers between my list items (But not at the ends) using a combination of left-border and .first css rules. How come I still have a border in front of the first element?

HTML:

<ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
    <li>Item5</li>
</ul>

CSS:

ul li {
    display:inli开发者_开发知识库ne;
    border-left: 1px solid #000;
    padding-left:6px;
}

ul li.first {
    border-left: none;
}

I think you are looking for :first-child and not .first (DEMO)

ul li:first-child {
    border-left: none;
}

To further clarify, .first (link) implies a class named first whereas :first-child (link) is a pseudo-selector

You're using the CSS wrong. .first is a class, named first :first-child is a pseudo class resolving to exactly the first child.

Check this revised fork on jsfiddle.

You should use first-child instead of .first. The dot indicates a classname instead of an selector. Your css would look like this;

ul li {
    display:inline;
    border-left: 1px solid #000;
    padding-left:6px;
}

ul li:first-child {
    border-left: none;
}