Question: we have a partial html:

```
<ul>
    <li class="class1">AFFECTED</li>
    <li class="class1 class2">NOT</li>
    <li class="class1">NOT</li>
</ul>

<ul>
    <li class="class1 class2">NOT</li>
    <li class="class1">AFFECTED</li>
    <li class="class1">NOT</li>
</ul>

<ul>
    <li>NOT</li>  
    <li class="class1">AFFECTED</li>
    <li class="class1">NOT</li>
</ul>

```

I need a ***universal* css-selector** for the first li's of any list with only class1.

* li's with extra classes (class2) MUST NOT be affected.
* only first li with class1 should be selected (to change the
appearance of A.
* no JS/jQuery.
* li's are float, so no hard coded nth-child.
* code is generated automatically, so no way add/remove custom classes.

I've tried to use :not(class2), [class2] :first-child & :first-of-type but with no avail.

Thanks!

Solution: <http://jsfiddle.net/6hxZa/3/>

Answer: 
You should be able to capture only the elements with `.class1` and no other using this selector:

```
li[class="class1"]

```

You won't be able to match only the *first* out of these elements because there isn't a selector to do that. `:first-child` only selects the very first child within the `ul` regardless of what classes it has, and `:first-of-type` selects the first `li`, also regardless of its classes (effectively making it the same as `:first-child` for `li` elements). You'll have to use the technique given [here](https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class/8539107#8539107) (where it also explains why these two pseudo-classes don't work) to apply the rule to all such elements then undo it for subsequent ones:

```
li[class="class1"] {
    /* Apply styles... */
}

li[class="class1"] ~ li[class="class1"] {
    /* ... and remove them after the first */
}

```

Note that the same selector is used so both classless elements and elements with `.class2` are completely unaffected.

This jsFiddle demonstrates the desired effect with the provided HTML: <http://jsfiddle.net/Cmypc/4/>
Try this

```
li:first-child
{
...
}

```

this is only for class 1

```
li.class1:first-child
{
color:#ff0000;
}

```

and here is a [fiddle](http://jsfiddle.net/x7Ezh/)

and if you dont want the list with class2 to be affected 
maybe this can work for you

```
    li.class1.class2:first-child
    {
        ...
        code that will reset
    }

```