Select an HTML element with one class, but don’t select others with multiple classes?

Question

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

Open to any advanced selector that is implemented in the 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 the attribute selector ( fiddle )

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

Answer 2

You can use the direct descendant selector in combination with the attribute selector to exactly match the class attribute. The following will correspond to all elements whose parent element is .table-view , where the class attribute is exactly equal to "table-cell" .

jsFiddle

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

---

Alternatively, you can do this with :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.

Answer 3

You can use:

 div.table-view > div[class="table-cell"] { color: #f00; } 

This means that the class exactly matches the "table-cell", without additional functions.

You can also use [class*="table-cell"] , which means that it is contained anywhere in the attribute of the class, so it will correspond to the class "table-cell-blargh". You can also use ^= (starts with) and $= (ends), and you can search for any attribute (e.g. href) using this method.

See this article on attribute selectors.