Select HTML element with single class but do not select others with multiple classes?

Question

Suppose I have a component .table-view that has a .table-cell child, and I want to keep my classes clean, how do I select a .table-cell that has no other classes and is a direct descendant of table-view?

Open to any kind of advanced selector that is implemented in relatively new Webkit.

<div class="table-view">
    <div class="table-cell">
       <!-- How to select this HTML element without selecting the others? -->
    </div>
    <div class="table-cell split">
        <div class="table-cell">

        </div>
        <div class="table-cell">

        </div>
    </div>
</div>

Answer 1

You can use element - attribute selector (fiddle)

.table-view > div[class=table-cell] {
  /* Styles goes here */
}

Answer 2

You can use the direct descendant selector combined with the attribute selector to match exactly again the class attribute. The following will match all elements whose parent is .table-view where the class attribute is exactly "table-cell".

jsFiddle

.table-view > [class="table-cell"] {
    background-color:red;
}

---

Alternatively you can do this with the :not() pseudo-class

jsFiddle

.table-view > .table-cell:not(.split)

This will consider .table-cell elements that do not contain the .split class but may contain other classes.