JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<p>Adding the style-attribute to a selector makes it more specific. Why doesn't [style=""] count anymore when it comes to :nth-child?</p>

<div style="display: block"></div>
<div style="display: none;"></div>
<div style="display: block"></div>
<div style="display: block"></div>
<div style="display: block"></div>
<div style="display: block"></div>


<ol>
    <li data-status="1">1</li>
    <li data-status="2">2</li>
    <li data-status="21">3</li>
    <li data-status="2">4</li>
    <li data-status="1">5</li>
    <li data-status="1">6</li>
    <li data-status="1">7</li>
    <li data-status="1">8</li>
    <li data-status="1">9</li>
    <li data-status="1">10</li>
    <li data-status="1">11</li>
</ol>

CSS

div {
  height: 100px;
  width: 100px;
  background: yellow;
}

div[style="display: block"] {
  background: red;
}

div:not([style="display: block"]) {
  background: gold;
}

div:nth-child(even)[style="display: block"] {
  background: teal;
}
/*
div[style="display: block"] {
  background: gold;
}*/

li:nth-child(2n+1)[data-status="1"] {
    background: #f90;
}