Kode Program

Pseudo-Classes pada Hover, Focus, dan Other States dalam Tailwind CSS (Styling based on Parent State)

03 May 2026 0

Halo gais! Tailwind CSS merupakan Framework CSS yang banyak digunakan di Aplikasi Web Modern saat ini. Kali ini kita akan membuat Program Pseudo-Classes pada Hover, Focus, dan Other States dalam Tailwind CSS, khususnya pada Penataan berdasarkan Status Induk (Styling based on Parent State).

Sumber : Tailwindcss.com

Saat Anda ingin memberi gaya pada sebuah elemen berdasarkan kondisi atau status elemen induknya, beri elemen induk tersebut kelas group, lalu gunakan varian group-* seperti group-hover untuk mengatur tampilan elemen target.

Arahkan kursor ke kartu untuk melihat kedua teks berubah warna secara bersamaan.

<a href="#" class="group ...">
  <div>
    <svg class="stroke-sky-500 group-hover:stroke-white ..." fill="none" viewBox="0 0 24 24">
      <!-- ... -->
    </svg>
    <h3 class="text-gray-900 group-hover:text-white ...">New project</h3>
  </div>
  <p class="text-gray-500 group-hover:text-white ...">Create a new project from a variety of starting templates.</p>
</a>

Contoh :

<a
  href="#"
  class="group mx-auto block max-w-xs space-y-3 rounded-lg bg-white p-4 shadow-lg ring-1 ring-gray-900/5 hover:bg-sky-500 hover:ring-sky-500 dark:bg-white/5 dark:ring-white/10"
  ><div class="flex items-center space-x-3">
    <svg
      class="h-6 w-6 stroke-sky-500 group-hover:stroke-white"
      fill="none"
      viewBox="0 0 24 24"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M11 19H6.931A1.922 1.922 0 015 17.087V8h12.069C18.135 8 19 8.857 19 9.913V11"
      ></path>
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M14 7.64L13.042 6c-.36-.616-1.053-1-1.806-1H7.057C5.921 5 5 5.86 5 6.92V11M17 15v4M19 17h-4"
      ></path>
    </svg>
    <div
      class="text-sm font-semibold text-gray-900 group-hover:text-white dark:text-white"
    >
      New project
    </div>
  </div>
  <p class="text-sm text-gray-500 group-hover:text-white dark:text-gray-400">
    Create a new project from a variety of starting templates.
  </p></a
>

Membedakan Grup Bersarang

Saat menyusun grup bersarang, Anda dapat menata sesuatu berdasarkan status grup induk tertentu dengan memberikan nama grup unik pada induk tersebut menggunakan kelas group/{name}, dan menyertakan nama tersebut dalam varian menggunakan kelas seperti group-hover/{name} :

<ul role="list">
  {#each people as person}
    <li class="group/item ...">
      <!-- ... -->
      <a class="group/edit invisible group-hover/item:visible ..." href="tel:{person.phone}">
        <span class="group-hover/edit:text-gray-700 ...">Call</span>
        <svg class="group-hover/edit:translate-x-0.5 group-hover/edit:text-gray-500 ..."><!-- ... --></svg>
      </a>
    </li>
  {/each}
</ul>

Contoh :

<ul
  role="list"
  class="mx-auto max-w-md border-x border-x-gray-200 p-2 dark:border-x-gray-800 dark:bg-gray-950/10"
>
  <li
    class="group/item relative flex items-center justify-between rounded-xl p-4 hover:bg-gray-100 dark:hover:bg-white/5"
  >
    <div class="flex gap-4">
      <div class="flex-shrink-0">
        <img
          class="h-12 w-12 rounded-full"
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80"
          alt=""
        />
      </div>
      <div class="w-full text-sm leading-6">
        <a href="#" class="font-semibold text-gray-900 dark:text-white"
          ><span class="absolute inset-0 rounded-xl" aria-hidden="true"></span
          >Leslie Abbott</a
        >
        <div class="text-gray-500">Co-Founder / CEO</div>
      </div>
    </div>
    <a
      href="#"
      class="group/edit invisible relative flex items-center rounded-full py-1 pr-3 pl-4 text-sm whitespace-nowrap text-gray-500 transition group-hover/item:visible hover:bg-gray-200 dark:text-gray-400"
      ><span class="font-semibold transition group-hover/edit:text-gray-700"
        >Call</span
      ><svg
        class="mt-px h-5 w-5 text-gray-400 transition group-hover/edit:translate-x-0.5 group-hover/edit:text-gray-500"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd"
          d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
          clip-rule="evenodd"
        ></path></svg
    ></a>
  </li>
  <li
    class="group/item relative flex items-center justify-between rounded-xl p-4 hover:bg-gray-100 dark:hover:bg-white/5"
  >
    <div class="flex gap-4">
      <div class="flex-shrink-0">
        <img
          class="h-12 w-12 rounded-full"
          src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80"
          alt=""
        />
      </div>
      <div class="w-full text-sm leading-6">
        <a href="#" class="font-semibold text-gray-900 dark:text-white"
          ><span class="absolute inset-0 rounded-xl" aria-hidden="true"></span
          >Hector Adams</a
        >
        <div class="text-gray-500">VP, Marketing</div>
      </div>
    </div>
    <a
      href="#"
      class="group/edit invisible relative flex items-center rounded-full py-1 pr-3 pl-4 text-sm whitespace-nowrap text-gray-500 transition group-hover/item:visible hover:bg-gray-200 dark:text-gray-400"
      ><span class="font-semibold transition group-hover/edit:text-gray-700"
        >Call</span
      ><svg
        class="mt-px h-5 w-5 text-gray-400 transition group-hover/edit:translate-x-0.5 group-hover/edit:text-gray-500"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd"
          d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
          clip-rule="evenodd"
        ></path></svg
    ></a>
  </li>
  <li
    class="group/item relative flex items-center justify-between rounded-xl p-4 hover:bg-gray-100 dark:hover:bg-white/5"
  >
    <div class="flex gap-4">
      <div class="flex-shrink-0">
        <img
          class="h-12 w-12 rounded-full"
          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80"
          alt=""
        />
      </div>
      <div class="w-full text-sm leading-6">
        <a href="#" class="font-semibold text-gray-900 dark:text-white"
          ><span class="absolute inset-0 rounded-xl" aria-hidden="true"></span
          >Blake Alexander</a
        >
        <div class="text-gray-500">Account Coordinator</div>
      </div>
    </div>
    <a
      href="#"
      class="group/edit invisible relative flex items-center rounded-full py-1 pr-3 pl-4 text-sm whitespace-nowrap text-gray-500 transition group-hover/item:visible hover:bg-gray-200 dark:text-gray-400"
      ><span class="font-semibold transition group-hover/edit:text-gray-700"
        >Call</span
      ><svg
        class="mt-px h-5 w-5 text-gray-400 transition group-hover/edit:translate-x-0.5 group-hover/edit:text-gray-500"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd"
          d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
          clip-rule="evenodd"
        ></path></svg
    ></a>
  </li>
</ul>

Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.

Terima Kasih 😀😊😘👌👍 :)

Kode Program

Join the conversation

Pseudo-Classes pada Hover, Focus, dan Other States dalam Tailwind CSS (Styling based on Parent State)

Keep reading

Apa itu OpenCode? Open Source AI Coding Agent Secara Gratis (Beserta dengan Tutorial Penggunaannya)

Program Deret Bilangan Ganjil-Genap dengan JavaScript dan HTML (Input Type)

Program Deret Bilangan Ganjil-Genap dengan PHP dan HTML (Input Type)