Kode Program · 2/23/2026
Pseudo-Classes pada Hover, Focus, dan Other States dalam Tailwind CSS (:first, :last, :odd, dan :even)
12 min 0
.png&w=3840&q=75)
Hello guys! 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 :first, :last, :odd, dan :even.
.png)
Sumber : Tailwindcss.com
Berikan gaya pada elemen saat ia merupakan anak pertama atau anak terakhir menggunakan varian pertama dan terakhir :
<ul role="list">{#each people as person}<!-- Remove top/bottom padding when first/last child --><li class="flex py-4 first:pt-0 last:pb-0"><img class="h-10 w-10 rounded-full" src={person.imageUrl} alt="" /><div class="ml-3 overflow-hidden"><p class="text-sm font-medium text-gray-900 dark:text-white">{person.name}</p><p class="truncate text-sm text-gray-500 dark:text-gray-400">{person.email}</p></div></li>{/each}</ul>
Contoh :
<ulrole="list"class="divide-y divide-gray-200 p-6 dark:divide-gray-800"><li class="flex py-4 first:pt-0 last:pb-0"><imgclass="h-10 w-10 rounded-full"src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"alt=""/><div class="ml-3 overflow-hidden"><p class="text-sm font-medium text-gray-900 dark:text-white">Kristen Ramos</p><p class="truncate text-sm text-gray-500 dark:text-gray-400">kristen.ramos@example.com</p></div></li><li class="flex py-4 first:pt-0 last:pb-0"><imgclass="h-10 w-10 rounded-full"src="https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"alt=""/><div class="ml-3 overflow-hidden"><p class="text-sm font-medium text-gray-900 dark:text-white">Floyd Miles</p><p class="truncate text-sm text-gray-500 dark:text-gray-400">floyd.miles@example.com</p></div></li><li class="flex py-4 first:pt-0 last:pb-0"><imgclass="h-10 w-10 rounded-full"src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"alt=""/><div class="ml-3 overflow-hidden"><p class="text-sm font-medium text-gray-900 dark:text-white">Courtney Henry</p><p class="truncate text-sm text-gray-500 dark:text-gray-400">courtney.henry@example.com</p></div></li><li class="flex py-4 first:pt-0 last:pb-0"><imgclass="h-10 w-10 rounded-full"src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"alt=""/><div class="ml-3 overflow-hidden"><p class="text-sm font-medium text-gray-900 dark:text-white">Ted Fox</p><p class="truncate text-sm text-gray-500 dark:text-gray-400">ted.fox@example.com</p></div></li></ul>
Anda juga dapat memberi gaya pada elemen saat elemen tersebut merupakan anak ganjil atau genap dengan menggunakan varian ganjil dan genap :
<table><!-- ... --><tbody>{#each people as person}<!-- Use different background colors for odd and even rows --><tr class="odd:bg-white even:bg-gray-50 dark:odd:bg-gray-900/50 dark:even:bg-gray-950"><td>{person.name}</td><td>{person.title}</td><td>{person.email}</td></tr>{/each}</tbody></table>
Contoh :
<table class="min-w-full"><theadclass="border-b border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-950"><tr><thscope="col"class="px-6 py-3 text-left text-sm font-medium text-gray-900 dark:text-white">Name</th><thscope="col"class="px-6 py-3 text-left text-sm font-medium text-gray-900 dark:text-white">Title</th><thscope="col"class="px-6 py-3 text-left text-sm font-medium text-gray-900 dark:text-white"></th></tr></thead><tbody><trclass="odd:bg-white even:bg-gray-50 dark:odd:bg-gray-900/50 dark:even:bg-gray-950"><tdclass="px-6 py-4 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white">Jane Cooper</td><tdclass="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400">Regional Paradigm Technician</td><tdclass="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400">jane.cooper@example.com</td></tr><trclass="odd:bg-white even:bg-gray-50 dark:odd:bg-gray-900/50 dark:even:bg-gray-950"><tdclass="px-6 py-4 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white">Cody Fisher</td><tdclass="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400">Product Directives Officer</td><tdclass="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400">cody.fisher@example.com</td></tr><trclass="odd:bg-white even:bg-gray-50 dark:odd:bg-gray-900/50 dark:even:bg-gray-950"><tdclass="px-6 py-4 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white">Leonard Krasner</td><tdclass="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400">Senior Designer</td><tdclass="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400">leonard.krasner@example.com</td></tr><trclass="odd:bg-white even:bg-gray-50 dark:odd:bg-gray-900/50 dark:even:bg-gray-950"><tdclass="px-6 py-4 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white">Emily Selman</td><tdclass="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400">VP, Hardware Engineering</td><tdclass="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400">emily.selman@example.com</td></tr><trclass="odd:bg-white even:bg-gray-50 dark:odd:bg-gray-900/50 dark:even:bg-gray-950"><tdclass="px-6 py-4 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white">Anna Roberts</td><tdclass="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400">Chief Strategy Officer</td><tdclass="px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400">anna.roberts@example.com</td></tr></tbody></table>
Nama | Posisi | Email |
| Jane Cooper | Regional Paradigm Technician | jane.cooper@example.com |
| Cody Fisher | Product Directives Officer | cody.fisher@example.com |
| Leonard Krasner | Senior Designer | leonard.krasner@example.com |
| Emily Selman | VP, Hardware Engineering | emily.selman@example.com |
| Anna Roberts | Chief Strategy Officer | anna.roberts@example.com |
Gunakan varian nth-* dan nth-last-* untuk memberi gaya pada anak berdasarkan posisinya dalam daftar :
<div class="nth-3:underline"><!-- ... --></div><div class="nth-last-5:underline"><!-- ... --></div><div class="nth-of-type-4:underline"><!-- ... --></div><div class="nth-last-of-type-6:underline"><!-- ... --></div>
Anda dapat meneruskan angka apa pun yang Anda inginkan ke dalam pseudo-kelas ini secara default, dan menggunakan nilai arbitrer untuk ekspresi yang lebih kompleks seperti nth-[2n+1_of_li].
Tailwind juga menyertakan varian untuk pseudo-kelas struktural lainnya seperti :only-child, :first-of-type, :empty, dan lainnya.
Lihat referensi pseudo-kelas untuk daftar lengkap varian pseudo-kelas yang tersedia.
Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.
Terima Kasih 😀😊😘👌👍 :)
.png&w=3840&q=75)