Question

I am trying to write a CSS selector that requires multiple (three criteria) to be met in order to enact an action.

$('div[class*="clickout"]')
$('div[class*="preferred"]')
$('div[class*="test"]')

Basically I want to ensure that all three conditions are met.

Answer 1

Chain the attribute selectors:

$('div[class*="clickout"][class*="preferred"][class*="test"]')

---

If you’re looking for an element with the three exact class names, like

<!-- 3 classes: "clickout", "preferred" and "test" -->
<div class="clickout preferred test"></div>

rather than with classes with the three words as partial or whole class names, like

<!-- 2 classes: "clickout-preferred" and "testing" -->
<div class="clickout-preferred testing"></div>

Then you should chain class selectors instead of attribute selectors:

$('div.clickout.preferred.test')