JSFiddle - React, Tailwind, and code Playground

by jasonkylefrank

HTML

<h2>Illustrating IE (v9 or earlier) CSS selector-count limit of 4095</h2>
<br />

<div class="ie9_css_element_id1">CSS is applied on this text with the element id 1</div>
<br/>
<br/>
<div class="ie9_css_element_id3500">CSS is applied on this text with the element id 3500</div>
<br/>
<br/>
<div class="ie9_css_element_id4095">CSS is applied on this text with the element id 4095</div>
<br/>
<br/>
<div class="ie9_css_element_id4096">Is CSS applied on this text with the element id 4096?</div>
<br />
<br />
<p>Note: the 4095 limit is on the number of <strong>selectors</strong>, not rules. You can verify this by editing the CSS to double-up on selectors for one of the rules.
</p>

CSS

.ie9_css_element_id1 {
    text-align: center;
}
.ie9_css_element_id2 {
    text-align: center;
}
.ie9_css_element_id3 {
    text-align: center;
}
.ie9_css_element_id4 {
    text-align: center;
}
.ie9_css_element_id5 {
    text-align: center;
}
.ie9_css_element_id6 {
    text-align: center;
}
.ie9_css_element_id7 {
    text-align: center;
}
.ie9_css_element_id8 {
    text-align: center;
}
.ie9_css_element_id9 {
    text-align: center;
}
.ie9_css_element_id10 {
    text-align: center;
}
.ie9_css_element_id11 {
    text-align: center;
}
.ie9_css_element_id12 {
    text-align: center;
}
.ie9_css_element_id13 {
    text-align: center;
}
.ie9_css_element_id14 {
    text-align: center;
}
.ie9_css_element_id15 {
    text-align: center;
}
.ie9_css_element_id16 {
    text-align: center;
}
.ie9_css_element_id17 {
    text-align: center;
}
.ie9_css_element_id18 {
    text-align: center;
}
.ie9_css_element_id19 {
    text-align: center;
}
.ie9_css_element_id20 {
    text-align: center;
}
.ie9_css_element_id21 {
    text-align: center;
}
.ie9_css_element_id22 {
    text-align: center;
}
.ie9_css_element_id23 {
    text-align: center;
}
.ie9_css_element_id24 {
    text-align: center;
}
.ie9_css_element_id25 {
    text-align: center;
}
.ie9_css_element_id26 {
    text-align: center;
}
.ie9_css_element_id27 {
    text-align: center;
}
.ie9_css_element_id28 {
    text-align: center;
}
.ie9_css_element_id29 {
    text-align: center;
}
.ie9_css_element_id30 {
    text-align: center;
}
.ie9_css_element_id31 {
    text-align: center;
}
.ie9_css_element_id32 {
    text-align: center;
}
.ie9_css_element_id33 {
    text-align: center;
}
.ie9_css_element_id34 {
    text-align: center;
}
.ie9_css_element_id35 {
    text-align: center;
}
.ie9_css_element_id36 {
    text-align: center;
}
.ie9_css_element_id37 {
    text-align: center;
}
.ie9_css_element_id38 {
    text-align: center;
}
.ie9_css_element_id39 {
    text-align: center;
}
.ie9_css_element_id40 {
    text-align:...