:hover, :focus, :nth-child, ::before, ::after ile ileri CSS teknikleri.
Pseudo-class elementlerin belirli durumlarını, pseudo-element ise elementlerin belirli parçalarını hedefler.
HTML'e dokunmadan dekoratif elementler ekler. content özelliği zorunludur. Boş string (content: "") ile görsel şekiller yapılabilir.
:nth-child(2n) çift, :nth-child(2n+1) tek, :nth-child(3n) her üçüncü elementi seçer.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<style>
body { font-family: sans-serif; padding: 24px; }
/* 1. Tablo zebra deseni */
table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
th { background: #1e293b; color: white; padding: 10px 16px; text-align: left; }
td { padding: 10px 16px; border-bottom: 1px solid #e2e8f0; }
tr:nth-child(even) { background: #f8fafc; }
tr:hover { background: #ede9fe; }
td:last-child { font-weight: bold; color: #6366f1; }
/* 2. ::before ile özel liste */
.ozel-liste { list-style: none; padding: 0; }
.ozel-liste li {
padding: 10px 0 10px 32px;
position: relative;
border-bottom: 1px solid #e2e8f0;
font-size: 14px;
}
.ozel-liste li::before {
content: "✓";
position: absolute;
left: 0;
color: #10b981;
font-weight: bold;
font-size: 16px;
}
/* 3. ::after ile araç ipucu (tooltip) */
.ipucu {
position: relative;
cursor: help;
color: #6366f1;
text-decoration: underline dotted;
}
.ipucu::after {
content: attr(data-ipucu); /* data özelliğini oku */
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: #1e293b;
color: white;
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
z-index: 10;
}
.ipucu:hover::after { opacity: 1; }
/* 4. Input focus durumu */
input {
width: 100%;
padding: 10px;
border: 2px solid #e2e8f0;
border-radius: 8px;
font-size: 14px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
margin-top: 12px;
}
input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
input:valid { border-color: #10b981; }
input:invalid:not(:placeholder-shown) { border-color: #ef4444; }
</style>
</head>
<body>
<h3>Zebra Tablo</h3>
<table>
<tr><th>İsim</th><th>Dil</th><th>Seviye</th></tr>
<tr><td>Furkan</td><td>PHP</td><td>İleri</td></tr>
<tr><td>Ahmet</td><td>JavaScript</td><td>Orta</td></tr>
<tr><td>Ayşe</td><td>CSS</td><td>İleri</td></tr>
<tr><td>Mehmet</td><td>Python</td><td>Başlangıç</td></tr>
</table>
<h3>::before ile Özel Liste</h3>
<ul class="ozel-liste">
<li>HTML5 semantik etiketler</li>
<li>CSS Grid ve Flexbox</li>
<li>JavaScript ES6+</li>
<li>PHP ve MySQL</li>
</ul>
<h3>::after ile Araç İpucu</h3>
<p>Bu cümledeki
<span class="ipucu" data-ipucu="Cascading Style Sheets">CSS</span>
kelimesinin üzerine gelin.
</p>
<h3>Input Durum Stilleri</h3>
<input type="email" placeholder="E-posta girin..." required>
</body>
</html>