JSFiddle - React, Tailwind, and code Playground

by mojtaba

HTML

<div id="x">
  <p style="display: none;">P</p>
  <p style="display: none;">P</p>
  <p style="display: none;">P</p>
  <p>P</p>
  <p>P</p>
  <p>P</p>
  <p>P</p>
  <p style="display: none;">P</p>
  <p style="display: none;">P</p>
</div>

CSS

#x p { display: block !important; }

#x p[style*='display'][style*='none'] {
  background: gray;
}

#x p:not([style*='display']):not([style*='none']) {
  background: yellow;
}

#x p:not([style*='display']):not([style*='none']):last-of-type {
  background: red;
}