JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<div style="width:200px">w 200</div>
<div style="width:210px">w 210</div>
<div style="width:300px">w 300</div>
<div class="w200">c:w 200</div>
<div class="w210">c:w 210</div>
<div class="w300">c:w 300</div>

CSS

div {
    font-weight: bold;
}

.w200 {
    width: 200px;
}

.w210 {
    width: 210px;
}

.w300 {
    width: 300px;
}

.red {
    border: 1px solid red;
}

.green {
    color: green;
}

JavaScript

console.clear();

(function($){
    $.expr[':'].test = function(obj, index, meta, stack){
       // obj - текущий элемент DOM
       // index - текущий индекс при обходе массива элементов
       // meta - метаданные селектора
       // stack - массив всех просматриваемых элементов
       // Return true если элемент соответствует селектору
       // Return false если элемент не соответствует селектору
    };
    // Использование:
    //$('.foo:test').doSomething();
})(jQuery);

(function($){
    $.extend($.expr[':'],{
       width: function(a,i,m) {
          if(!m[3]||!(/^(<|>)\d+$/).test(m[3])) {return false;}
          return m[3].substr(0,1) === '>' ?
             $(a).width() > m[3].substr(1) : $(a).width() < m[3].substr(1);
       }
    });
})(jQuery);

$('div:width(>200)').addClass('red'); // Все DIVs с шириной более 200px
$('div:width(>200):width(<300)').addClass('green'); // Все DIVs с шириной в интервале от 200 до 300 px