JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>testing</title>
  </head>
  <body>
    <div>
      <p name='test'>Item 1</p>
      <p name='test-2'>Item 1</p>
      <p name='test'>Item 1</p>
      <p name='test-2'>Item 1</p>
    </div>
    <div>
      <span class="spantest"><p name='test2'>test 2</p></span>
      <span class="spantest"><p >test2</p></span>
      <span class="spantest"><p name='test2'>test 2</p></span>
      <span class="spantest"><p >test2</p></span>
    </div>

  </body>
</html>

CSS

div > p[name='test'] {
        display: inline-block;
        padding: 20px;
        background: red;
      }

      div > p[name='test-2'] {
        display: inline-block;
        padding: 20px;
        background: green;
      }

      .spantest < p[name='test2'] {
        display: inline-block;
        padding: 20px;
        background: red;
      }