Question

I am looking for a way to apply a border-left on the first li only that is generated by the jQuery bxSlider plugin which is ‘active’, i.e. has a class of pager. This is the output generated by the bxSlider plugin:

<div class="bx-window" style="position:relative; overflow:hidden; width:969px;">
    <ul id="carousel_items" style="width: 999999px; position: relative; left: -323px;">
        <li style="width: 304px; float: left; list-style: none outside none; opacity: 1;">CONTENT IN HERE</li>
        <li class="pager" style="width: 304px; float: left; list-style: none outside none; opacity: 1;">CONTENT IN HERE</li>
        <!-- other LIs in here -->
    </ul>
</div>

I do not want to apply a 1px border-left on all elements as this would lead to a 2px border on joining elements as I also have a border-right of 1px.

Answer 1

#carousel_items.li:first-child { border-left:1px solid red; }