CSS'de pseudo-sınıflar (pseudo-classes), bir öğenin belirli bir durumunu stilize etmek için kullanılır. Öğenin yapısı ya da konumu yerine, kullanıcı etkileşimi gibi duruma bağlı değişiklikleri tanımlarlar. Bu, öğelerin farklı durumlarına göre farklı stiller uygulamanızı sağlar, örneğin bir bağlantının üzerine gelindiğinde, odaklandığında veya bir form elemanının kontrol edildiğinde.

Yaygın Kullanılan Pseudo-sınıflar

:hover: Bir kullanıcı bir öğenin üzerine fare ile geldiğinde uygulanır.

:active: Bir öğe (genellikle bir bağlantı veya düğme) tıklandığında ve kullanıcı fare tuşunu hala basılı tutarken uygulanır.

:focus: Bir öğe (örneğin, bir form alanı) odaklandığında uygulanır.

:visited: Kullanıcı tarafından daha önce ziyaret edilmiş bir bağlantı için uygulanır.

🔗 Henüz ziyaret edilmemiş bir bağlantı için uygulanır.

:first-child: Bir ebeveynin ilk çocuğu olan öğeler için uygulanır.

:last-child: Bir ebeveynin son çocuğu olan öğeler için uygulanır.

:nth-child(an+b): Ebeveynin çocukları arasından belirli bir sıraya sahip öğeleri seçmek için kullanılır, burada "n" sıfırdan başlayan bir sayaçtır ve "b" başlangıç noktasıdır.

:checked: Bir form elemanı (örneğin, bir radyo butonu veya checkbox) kontrol edildiğinde uygulanır.

:disabled: Bir form elemanı devre dışı bırakıldığında uygulanır.

TailwindCSS:

<div class="bg-black hover:bg-white ...">
  <!-- ... -->
</div>

<input class="border-gray-300 focus:border-blue-400 ..." />

<div class="focus-within:shadow-lg ...">
  <input type="text" />
</div>

<button class="focus:outline-none focus-visible:ring ...">
  Submit
</button>

<button class="bg-blue-500 active:bg-blue-600 ...">
  Submit
</button>

<a href="https://seinfeldquotes.com" class="text-blue-600 visited:text-purple-600 ...">
  Inspiration
</a>

<div id="about" class="target:shadow-lg ...">
  <!-- ... -->
</div>

<ul>
  {#each people as person}
    <li class="py-4 first:pt-0 ...">
      <!-- ... -->
    </li>
  {/each}
</ul>

<ul>
  {#each people as person}
    <li class="py-4 last:pb-0 ...">
      <!-- ... -->
    </li>
  {/each}
</ul>

<ul>
  {#each people as person}
    <li class="py-4 only:py-0 ...">
      <!-- ... -->
    </li>
  {/each}
</ul>

<table>
  {#each people as person}
    <tr class="bg-white odd:bg-gray-100 ...">
      <!-- ... -->
    </tr>
  {/each}
</table>

<table>
  {#each people as person}
    <tr class="bg-white even:bg-gray-100 ...">
      <!-- ... -->
    </tr>
  {/each}
</table>

<nav>
  <img src="/logo.svg" alt="Vandelay Industries" />
  {#each links as link}
    <a href="#" class="ml-2 first-of-type:ml-6 ...">
      <!-- ... -->
    </a>
  {/each}
</nav>

<nav>
  <img src="/logo.svg" alt="Vandelay Industries" />
  {#each links as link}
    <a href="#" class="mr-2 last-of-type:mr-6 ...">
      <!-- ... -->
    </a>
  {/each}
  <button>More</button>
</nav>

<nav>
  <img src="/logo.svg" alt="Vandelay Industries" />
  {#each links as link}
    <a href="#" class="mx-2 only-of-type:mx-6 ...">
      <!-- ... -->
    </a>
  {/each}
  <button>More</button>
</nav>

<ul>
  {#each people as person}
    <li class="empty:hidden ...">{person.hobby}</li>
  {/each}
</ul>

<input class="disabled:opacity-75 ..." />

<input class="enabled:hover:border-gray-400 disabled:opacity-75 ..." />

<input type="checkbox" class="appearance-none checked:bg-blue-500 ..." />


<input type="checkbox" class="appearance-none indeterminate:bg-gray-300 ..." />

<input type="checkbox" class="default:ring-2 ..." />

<input class="required:border-red-500 ..." />

<input class="valid:border-green-500 ..." />

<input class="invalid:border-red-500 ..." />

<input min="1" max="5" class="in-range:border-green-500 ..." />

<input min="1" max="5" class="out-of-range:border-red-500 ..." />

<input class="placeholder-shown:border-gray-500 ..." placeholder="you@example.com" />

<input class="autofill:bg-yellow-200 ..." />

<input class="read-only:bg-gray-100 ..." />