JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<p>Hello World</p>

<p>Hello World</p>

<p>Hello World</p>

<p>Hello World</p>

<p>Hello World</p>

<p>Hello World</p>

<p>Hello World</p>

<p>Hello World</p>

<p>Hello World</p>

<p>Hello World</p>

<p>Hello World</p>

<p>Hello World</p>

CSS

p {
 width: 190px;
    height: 100px;
  display: block;
   float: left;
    margin: 0 0 0 30px;
    border: 1px solid #000;
    
}

JavaScript

(function($) {
    function getNthIndex(cur, dir) {
        var t = cur, idx = 0;
        while (cur = cur[dir] ) {
            if (t.tagName == cur.tagName) {
                idx++;
            }
        }
        return idx;
    }
    function isNthOf(elm, pattern, dir) {
        var position = getNthIndex(elm, dir), loop;
        if (pattern == "odd" || pattern == "even") {
            loop = 2;
            position -= !(pattern == "odd");
        } else {
            var nth = pattern.indexOf("n");
            if (nth > -1) {
                loop = parseInt(pattern, 10);
                position -= (parseInt(pattern.substring(nth + 1), 10) || 0) - 1;
            } else {
                loop = position + 1;
                position -= parseInt(pattern, 10) - 1;
            }
        }
        return (loop<0 ? position<=0 : position >= 0) && position % loop == 0
    }
    var pseudos = {
        "first-of-type": function(elm) {
            return getNthIndex(elm, "previousSibling") == 0;
        },
        "last-of-type": function(elm) { 
            return getNthIndex(elm, "nextSibling") == 0;
        },
        "only-of-type": function(elm) { 
            return pseudos["first-of-type"](elm) && pseudos["last-of-type"](elm);
        },
        "nth-of-type": function(elm, b, match, all) {
            return isNthOf(elm, match[3], "previousSibling");
        },
        "nth-last-of-type": function(elm, i, match) {
            return isNthOf(elm, match[3], "nextSibling");
        }        
    }
    $.extend($.expr[':'], pseudos);
})(jQuery);

$("body p:nth-of-type(4n+1)").css({"background":"red","clear":
"left"});