JSFiddle - React, Tailwind, and code Playground
HTML
<div class="foo">Foo</div>
<div class="foo bar">Foo Bar</div>
<div class="foo bar baz">Foo Bar Baz</div>
<div class="foo bar baz bug">Foo Bar Baz Bug</div>
JavaScript
(function($){
$.expr[':'].classes = function(o,i,m,s){
var c = o.className.match(/\s*(.*)\s*/)[0].split(/\s+/).length;
// Hard [fixed] limit
// :classes(N)
if (/^\d+$/.test(m[3])) {
var n = parseInt(m[3], 10);
return o.className.split(/\s+/).length == n;
}
// Expression:
// :classes(>N) :classes(>=N)
// :classes(>N) :classes(<=N)
else if (/^[<>]=?\d+$/.test(m[3])) {
var e = m[3].match(/^[><]=?/)[0],
n = m[3].match(/\d+$/)[0];
switch (e){
case '<':
return c < n;
case '<=':
return c <= n;
case '>':
return c > n;
case '>=':
return c >= n;
}
}
// Range
// :classes(4-6)
else if (/^\d+\-\d+$/.test(m[3])) {
var ln = parseInt(m[3].match(/^(\d+)/)[0], 10),
hn = parseInt(m[3].match(/(\d+)$/)[0], 10);
return ln <= c && c <= hn;
}
// all else fails
return false;
};
})(jQuery);
// Elements with exactly 2 classes
$('div:classes(2)').css('color','red');
// Elements with 3+ classes
$('div:classes(>=3)').css('font-weight', 'bold');
// Elements with between 4 and 5 classes
$('div:classes(4-5)').css('background-color','blue');