Jump to content
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

CSS'de pseudo-sınıflar (pseudo-classes) ve TailwindCSS Sınıf Karşılıkları


Doğuhan ELMA

35 views

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:

Modifier CSS
hover &:hover
focus &:focus
focus-within &:focus-within
focus-visible &:focus-visible
active &:active
visited &:visited
target &:target
* & > *
has &:has
first &:first-child
last &:last-child
only &:only-child
odd &:nth-child(odd)
even &:nth-child(even)
first-of-type &:first-of-type
last-of-type &:last-of-type
only-of-type &:only-of-type
empty &:empty
disabled &:disabled
enabled &:enabled
checked &:checked
indeterminate &:indeterminate
default &:default
required &:required
valid &:valid
invalid &:invalid
in-range &:in-range
out-of-range &:out-of-range
placeholder-shown &:placeholder-shown
autofill &:autofill
read-only &:read-only
before &::before
after &::after
first-letter &::first-letter
first-line &::first-line
marker &::marker
selection &::selection
file &::file-selector-button
backdrop &::backdrop
placeholder &::placeholder
sm @media (min-width: 640px)
md @media (min-width: 768px)
lg @media (min-width: 1024px)
xl @media (min-width: 1280px)
2xl @media (min-width: 1536px)
min-[] @media (min-width: )
max-sm @media not all and (min-width: 640px)
max-md @media not all and (min-width: 768px)
max-lg @media not all and (min-width: 1024px)
max-xl @media not all and (min-width: 1280px)
max-2xl @media not all and (min-width: 1536px)
max-[] @media (max-width: )
dark @media (prefers-color-scheme: dark)
portrait @media (orientation: portrait)
landscape @media (orientation: landscape)
motion-safe @media (prefers-reduced-motion: no-preference)
motion-reduce @media (prefers-reduced-motion: reduce)
contrast-more @media (prefers-contrast: more)
contrast-less @media (prefers-contrast: less)
print @media print
supports-[] @supports ()
aria-checked &[aria-checked=“true”]
aria-disabled &[aria-disabled=“true”]
aria-expanded &[aria-expanded=“true”]
aria-hidden &[aria-hidden=“true”]
aria-pressed &[aria-pressed=“true”]
aria-readonly &[aria-readonly=“true”]
aria-required &[aria-required=“true”]
aria-selected &[aria-selected=“true”]
aria-[] &[aria-]
data-[] &[data-]
rtl [dir=“rtl”] &
ltr [dir=“ltr”] &
open &[open]

 

<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 ..." />

 

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...