JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

div[id$="_LoginPanel"] = Заканчивается
<div id="1_LoginPanel">1_LoginPanel</div>
<div id="2_LoginPanel">2_LoginPanel</div>
<div id="3_LoginPanel">3_LoginPanel</div>
<div id="4_LoginPanel">4_LoginPanel</div>
<div id="5_LoginPanel">5_LoginPanel</div>
<hr> div[class^="LoginPanel_"] = Начинается с
<div class="LoginPanel_1">LoginPanel_1</div>
<div class="LoginPanel_2">LoginPanel_2</div>
<div class="LoginPanel_3">LoginPanel_3</div>
<div class="LoginPanel_4">LoginPanel_4</div>
<div class="LoginPanel_5">LoginPanel_5</div>
<hr> div[class*="Login_Panel"] = Содержит
<div class="1_Login_Panel_1">1_Login_Panel_1</div>
<div class="2_Login_Panel_2">2_Login_Panel_2</div>
<div class="3_Login_Panel_3">3_Login_Panel_3</div>
<div class="4_Login_Panel_4">4_Login_Panel_4</div>
<div class="5_Login_Panel_5">5_Login_Panel_5</div>
<hr> .nav1 li:not(.highlight) = Не содержит
<ul class="nav1">
  <li>Blog</li>
  <li>About</li>
  <li>Videos</li>
  <li class="highlight">Music</li>
  <li>Merch</li>
</ul>
<hr> input:not([disabled]) = Не содержит
<div class="inputF">
  <input type="text" />
  <input type="text" disabled/>
  <input type="text" />
</div>
<hr> .pF p::first-letter = первый символ
<div class="pF1">
  <p>Как создать анимацию и переходы</p>
</div>
<hr> .pF2 p:first-child::first-letter = первый тег "p", первый символ
<div class="pF2">
  <p>Как создать</p>
  <p>анимацию и</p>
  <p>переходы</p>
</div>
<hr> .pF3 p:last-child::first-letter = последний тег "p", первый символ
<div class="pF3">
  <p>Как создать</p>
  <p>анимацию и</p>
  <p>переходы</p>
</div>
<hr> table.table1 tr:first-of-type = первый "tr"<br>
 table.table1 tr:last-of-type = последний "tr"<br>
table.table1 td:first-of-type = первый "td" каждого "tr"<br>
table.table1 td:last-of-type = последний "td" каждого "tr"
<table class="table1">
  <tr>
    <td>&nbsp;</td>
    <td>1998</td>
    <td>1999</td>
    <td>2000</td>
    <td>2001</td>
    <td>2002</td>
    <td>2003</td>
  </tr>
  <tr>
    <td>Нефть</td>
    <td>3</td>
   ...

CSS

div[id$="_LoginPanel"] {
  color: #ff0000;
  margin: 0 10px;
  padding: 2px;
}

div[class^="LoginPanel_"] {
  color: #00cc00;
  margin: 0 10px;
  padding: 2px;
}

div[class*="Login_Panel"] {
  color: #0000cc;
  margin: 0 10px;
  padding: 2px;
}

.nav1 li:not(.highlight) {
  color: #00cccc;
  margin: 0 10px;
  padding: 2px;
}

.inputF input {
  margin: 10px;
}

.inputF input:not([disabled]) {
  border: 1px solid #00cc00;
}

.pF1 p::first-letter {
  color: #ff0000;
}

.pF2 p:first-child::first-letter {
  color: #bbbb00;
  font-size: 25px;
}

.pF3 p:last-child::first-letter {
  color: #00bbbb;
  font-size: 25px;
}

table.table1 {
  border-collapse: collapse;
  width: 100%;
  border-spacing: 0;
}

table.table1 td {
  border: 1px solid #6A3E14;
  padding: 4px;
}

table.table1 tr:first-of-type {
  background: #808990;
  color: #fff;
}
table.table1 tr:last-of-type { 
  background: #00cc00;
}
table.table1 td:first-of-type {
  background: #CFD6D3;
}
table.table1 td:last-of-type { 
  background: #ff0000;
}