Kijelölők II. – pszeudók

<p>
  <a href="rolam.html">Vidd rám az egeret</a>
</p>
<p>
  <a href="arak.html">Vagy rám</a>
</p>

a {
  color: #0369a1;
  text-decoration: none;
  border-bottom: 2px solid #bae6fd;
  padding-bottom: 2px;
}

a:hover {
  color: #be123c;
  border-bottom-color: #be123c;
}

a:active {
  color: #f59e0b;
}

<p>
  <label for="a">Név</label><br>
  <input type="text" id="a">
</p>
<p>
  <label for="b">E-mail</label><br>
  <input type="email" id="b">
</p>
<p><button>Küldés</button></p>

input, button {
  padding: 6px 10px;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  font-size: 15px;
}

input:focus, button:focus {
  outline: 3px solid #fb7185;
  outline-offset: 2px;
  border-color: #be123c;
  background-color: #fff5f7;
}

<p>
  <input type="checkbox" id="a">
  <label for="a">Extra sajt</label>
</p>
<p>
  <input type="checkbox" id="b">
  <label for="b">Gomba</label>
</p>
<p>
  <input type="email" placeholder="Írj be egy e-mailt"
         size="24" required>
</p>
<p>
  <input type="text" value="Nem szerkeszthető" disabled>
</p>

/* a bejelölt négyzet UTÁNI címke */
input:checked + label {
  color: #047857;
  font-weight: bold;
}

input:disabled {
  background-color: #e5e7eb;
  color: #9ca3af;
}

input:invalid {
  border: 2px solid #be123c;
}

input:valid {
  border: 2px solid #047857;
}

<ul class="lista">
  <li>Első</li>
  <li>Második</li>
  <li>Harmadik</li>
  <li>Negyedik</li>
  <li>Ötödik</li>
</ul>

.lista li {
  padding: 4px 8px;
  border-bottom: 1px solid #e5e7eb;
}

.lista li:first-child {
  color: #047857;
  font-weight: bold;
}

.lista li:last-child {
  color: #be123c;
  border-bottom: none;
}

.lista li:nth-child(3) {
  background-color: #fef3c7;
}

<table>
  <tr><th>Név</th><th>Pont</th></tr>
  <tr><td>Anna</td><td>92</td></tr>
  <tr><td>Béla</td><td>78</td></tr>
  <tr><td>Cili</td><td>85</td></tr>
  <tr><td>Dani</td><td>64</td></tr>
  <tr><td>Emese</td><td>97</td></tr>
</table>

table {
  border-collapse: collapse;
}

td, th {
  padding: 6px 14px;
  text-align: left;
}

th {
  background-color: #be123c;
  color: white;
}

tr:nth-child(even) {
  background-color: #fce7f3;
}

<ul class="sor">
  <li>1</li><li>2</li><li>3</li>
  <li>4</li><li>5</li><li>6</li>
  <li>7</li><li>8</li><li>9</li>
</ul>

.sor {
  list-style: none;
  padding: 0;
}

.sor li {
  display: inline-block;
  width: 32px;
  padding: 8px 0;
  margin: 2px;
  text-align: center;
  border: 1px solid #d1d5db;
}

/* minden harmadik */
.sor li:nth-child(3n) {
  background-color: #be123c;
  color: white;
}

/* az első három */
.sor li:nth-child(-n+3) {
  border-color: #047857;
  border-width: 3px;
}

<p>
  <button>Mentés</button>
  <button>Mégse</button>
  <button disabled>Törlés</button>
</p>

<ul>
  <li>Alma</li>
  <li class="kesz">Kenyér</li>
  <li>Tej</li>
</ul>

button {
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
}

/* csak a NEM letiltott gombokra */
button:not(:disabled) {
  background-color: #be123c;
  color: white;
  cursor: pointer;
}

/* minden li, kivéve a .kesz osztályút */
li:not(.kesz) {
  font-weight: bold;
}

li.kesz {
  text-decoration: line-through;
  color: #9ca3af;
}

<ul class="teendok">
  <li class="kesz">Bevásárlás</li>
  <li>Takarítás</li>
  <li class="kesz">Mosogatás</li>
</ul>

<p class="kotelezo">E-mail cím</p>

<p class="ar">3490</p>

.teendok {
  list-style: none;
  padding: 0;
}

.teendok li::before {
  content: "☐ ";
  color: #9ca3af;
}

.teendok li.kesz::before {
  content: "☑ ";
  color: #047857;
}

.kotelezo::after {
  content: " *";
  color: #be123c;
  font-weight: bold;
}

.ar::after {
  content: " Ft";
  color: #7c6b74;
}

<p class="bevezeto">
  Egyszer volt, hol nem volt, volt egyszer
  egy weboldal, amelyiknek nagyon szép
  volt az első betűje.
</p>

<p>
  <input type="text" size="26"
         placeholder="Írj ide valamit…">
</p>

.bevezeto::first-letter {
  font-size: 44px;
  color: #be123c;
  font-weight: bold;
  line-height: 1;
}

::selection {
  background-color: #fbcfe8;
  color: #831843;
}

::placeholder {
  color: #be123c;
  font-style: italic;
}