CSS'te Sözde Sınıflar
CSS'te pseudo-class'lar yani sözde sınıflar aslında sınıf olmayan fakan atandığı elemente bazı temel işlevsellikler katan bir tekniktir. Sözde sınıf yazılırken element adından sonra iki nokta üst üstte (:) konulur ve sözde sınıfın adı yazılır. Sözdizimi daima böyledir.
body {
font-family: Verdana, monospace, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: justify;
min-height: 800px;
}
#deneme {
width: 300px;
height: 150px;
padding: 20px;
background-color: skyblue;
}
Bu şekilde CSS kodlarına sahibiz.
Bu şekilde de bir ekran görüntüsüne sahibiz.
:hover
hover en çok kullanılan sözde sınıftır. Fare ile bir elementin üzerine gelindiğinde o anda yapılacak değişikliği gösterir.
#deneme {
width: 300px;
height: 150px;
padding: 20px;
background-color: skyblue;
}
#deneme:hover {
background-color: violet;
}
Bu örnekte fare ile deneme ID'sine sahip div'in üzerine gelince div'in arkaplan rengi maviden eflatuna dönecektir.
Şimdi yukarıdaki mavi div'in üzerine gelin. Renk değişimini fark etmiş olmalısınız.
#deneme2 {
width: 300px;
height: 150px;
padding: 20px;
background-color: skyblue;
}
#deneme2:hover {
opacity: 0.5;
}
:hover ile sadece arkaplan rengini değiştirmek zorunda değilsiniz. Şeffaflığı ile de oynayabilirsiniz.
Gördüğünüz gibi deneme2 ID'sine sahip div'in üzerine geldiğinizde şeffaflığı %50 oranında olacaktır.
#deneme3 {
width: 300px;
height: 150px;
padding: 20px;
background-color: skyblue;
}
#deneme3:hover {
opacity: 0.5;
background-color: violet;
}
Şimdi hem arkaplan rengini hem de şeffaflığı beraber değiştirelim.
Fare ile div'in üzerine gelince hem arkaplan renginin hem de şeffaflığın değiştiğini fark edeceksiniz.
:focus
focus dilimizde odaklanmak anlamına gelmektedir. Fare ile bir elementin üzerine geldiğinizde ve tıkladığınızda elementte meydana gelecek değişikliği belirtir. En çok veri girişi için kullanılan form etiketlerinde kullanılır.
<form>
<label>Adınız: </label> <input type="text"/> <br/><br/>
<label>Soyadınız: </label> <input type="text"/> <br/><br/>
<input type="submit" value="Gönder"/>
</form>
Kodlarına sahip bir formumuz olduğunu varsayalım.
Ekran çıktımız ise bu şekilde.
.change-color:focus {
background-color: skyblue;
}
change-color adında bir sınıf açıyorum ve focus olduğunda arkaplan renginin mavi olmasını istiyorum. Bu sınıfı ilk textbox'ıma ekliyorum.
<form>
<label>Adınız: </label> <input type="text" class="change-color"/> <br/><br/>
<label>Soyadınız: </label> <input type="text"/> <br/><br/>
<input type="submit" value="Gönder"/>
</form>
Adınız adlı metin kutusuna change-color sınıfımı ekledim.
Şimdi metin kutusuna tıklayın. Arkaplan renginin değiştiğini göreceksiniz. Farenizi başka yere götürseniz dahi arkaplan rengi mavi olarak kalacaktır. :hover'dan farkı budur.
:active
Bir link'e tıklandığında o anda yapılacak değişikliği gösterir. Çok nadir kullanılan sözde sınıflardan biridir.
#deneme4 {
width: 280px;
height: 30px;
line-height: 30px;
}
#deneme4 a:active {
color: red;
font-weight: bold;
font-size: 24px;
}
Bu şekilde CSS kodlarımız olduğunu düşünelim.
<div id="deneme4">
<a name="?">Bu bir linktir.</a>
</div>
HTML kodlarımız ise bu şekilde.
Şimdi farenizle link'in üzerine tıklayın fakat sol tuşu basılı tutun. Bıraktığınız zaman link'in tekrar eski haline geldiğini göreceksiniz.
:first-letter
Belirtilen elementteki ilk harfin özelliklerini değiştirmek için kullanılır.
#deneme5 {
width: 600px;
}
#deneme5 p:first-letter {
font-size: 24px;
font-weight: bold;
}
Bu şekilde CSS kodlarını kullandığımızı varsayalım. deneme5 ID'sine sahip div'imizin içindeki p elementinin ilk harflerinin büyüklüğünü 24px yapacağız ve kalın yazdıracağız.
<div id="deneme5">
<p>Bu bir satırdır.</p>
<p>Bu da bir satırdır.</p>
<p>Bu da üçüncü bir satırdır.</p>
</div>
Bu şekilde de HTML kodlarına sahibiz.
Bu bir satırdır.
Bu da bir satırdır.
Bu da üçüncü bir satırdır.
Görüldüğü ilk harfler kalın ve büyük yazıldı.
:first-line
Belirtilen elementteki ilk satırın özelliklerini değiştirmek için kullanılır.
#deneme6 {
width: 600px;
text-align: left;
}
#deneme6 p:first-line {
font-size: 16px;
font-weight: bold;
}
deneme6 ID'sine ait div'deki p elementinin ilk satırını büyük ve kalın yazdırmak istiyoruz. CSS kodlarımız bu şekilde.
<div id="deneme6">
<p>Duis et arcu et nibh consectetur faucibus. Curabitur hendrerit, tellus
isus nibh blandit orci, at iaculis tellus ipsum at elit. Donec sed nulla
Maecenas quis consectetur metus, ac tristique arcu. Vestibulum nec malesuada.</p>
</div>
HTML kodlarımız ise bu şekilde.
Duis et arcu et nibh consectetur faucibus. Curabitur hendrerit, tellus non dignissim ultrices,
isus nibh blandit orci, at iaculis tellus ipsum at elit. Donec sed nulla in nulla condimentum adipiscing.
Maecenas quis consectetur metus, ac tristique arcu. Vestibulum nec malesuada magna, ut porta lectus.
Görüldüğü gibi ilk satır büyük ve kalın yazdırıldı.
:first-child ve :last-child
En çok kullanılan sözde sınıflar arasındadırlar. :first-child bir div içinde belirtilen ilk elementi seçer ve özelliklerini değiştirir. :last-child ise son element içindir. Şimdi aşağıdaki örnekte ne demek istediğimi daha iyi anlayacaksınız.
#deneme7 {
width: 600px;
text-align: left;
}
#deneme7 p:first-child {
font-size: 16px;
font-weight: bold;
}
#deneme7 p:last-child {
font-size: 16px;
text-decoration: underline;
}
deneme7 ID'sine sahip div'imiz içindeki paragraflardan ilk satırın büyük ve kalın yazılmasını istedim. Son satırın ise büyük ve altı çizili olmasını istedim.
<div id="deneme7">
<p>Bu ilk satırdır.</p>
<p>Bu ikinci satırdır.</p>
<p>Bu üçüncü satırdır.</p>
<p>Bu dördüncü satırdır.</p>
<p>Bu beşinci satırdır.</p>
<p>Bu son satırdır.</p>
</div>
Bu şekilde de HTML kodlarına sahibiz.
Bu ilk satırdır.
Bu ikinci satırdır.
Bu üçüncü satırdır.
Bu dördüncü satırdır.
Bu beşinci satırdır.
Bu son satırdır.
Ekran çıktımız ise bu şekilde olacaktır. İlk satır kalın, son satır ise altı çizili yazdırıldı.
:nth-child(n)
Bir div içindeki belirtilen sıradaki elementin özelliğini değiştirmek için kullanılır.
#deneme8 {
width: 600px;
text-align: left;
}
#deneme8 p:nth-child(4) {
font-size: 16px;
text-decoration: underline;
color: purple;
}
deneme8 ID'sine sahip div içindeki p elementlerinden dördüncüsünün altı çizili ve mor renkte olmasını istedik.
<div id="deneme8">
<p>Bu ilk satırdır.</p>
<p>Bu ikinci satırdır.</p>
<p>Bu üçüncü satırdır.</p>
<p>Bu dördüncü satırdır.</p>
<p>Bu beşinci satırdır.</p>
<p>Bu son satırdır.</p>
</div>
Bu şekilde de HTML kodlarına sahibiz.
Bu ilk satırdır.
Bu ikinci satırdır.
Bu üçüncü satırdır.
Bu dördüncü satırdır.
Bu beşinci satırdır.
Bu son satırdır.
Ekran çıktımız ise bu şekilde olacaktır. Görüldüğü gibi dördüncü satır altı çizili ve mor bir şekilde yazdırıldı.
nth-of-type(n)
Bir div içindeki elementlerden belirtilen formülde olanları seçer.
#deneme9 {
width: 600px;
text-align: left;
}
#deneme9 p:nth-of-type(2n+1) {
font-size: 16px;
text-decoration: underline;
color: purple;
}
deneme9 ID'sine sahip div'imiz içindeki p elementlerinden tekinci sırada olanların özelliklerinin değişmesini istedik. 2n+1 yerine odd da yazabilirsiniz. odd dilimzde tek anlamına gelmektedir.
<div id="deneme9">
<p>Bu ilk satırdır.</p>
<p>Bu ikinci satırdır.</p>
<p>Bu üçüncü satırdır.</p>
<p>Bu dördüncü satırdır.</p>
<p>Bu beşinci satırdır.</p>
<p>Bu altıncı satırdır.</p>
<p>Bu yedinci satırdır.</p>
<p>Bu son satırdır.</p>
</div>
Bu şekilde HTML kodlarına sahibiz.
Bu ilk satırdır.
Bu ikinci satırdır.
Bu üçüncü satırdır.
Bu dördüncü satırdır.
Bu beşinci satırdır.
Bu altıncı satırdır.
Bu yedinci satırdır.
Bu son satırdır.
Görüldüğü gibi tek sayıya sahip satırlar altı çizili ve mor olarak yazdırıldı. Eğer çiftinci sıradakilere bu şekilde yapmak isteseydik 2n ya da even yazmamız yeterliydi. even dilimizde çift anlamına gelmektedir.
Bu dersin videosunu 1080p HD kalitesinde izleyebilirsiniz.
Bu derslik bu kadar. Bir sonraki dersimizde CSS'te özellik seçicileri konusuna değineceğiz.