CSS de sınıf olmayan ama sınıf gibi davranan ve seçici olarak kullanılan seçicilere css sözde sınıflar denir.
Eğer CSS Seçiciler hakkında bilginiz yoksa, öncesinde o konuyu öğrenmenizi tavsiye ederiz.
Örneğin link etiketine tıkladığımızda veya üzerine geldiğimizde bazı özellikleri değiştirmesini sağlamak için kullandığımız seçicilere css de sözde sınıflar denir.
Yazım biçimi:”selector:pseudo class{css kodları}” şeklindedir.
1. CSS link Sözde Sınıfı Kullanımı
Daha önce açılmamış linklerin rengini tanımlamak için kullanılır. Diğer özelliklerini değiştirebiliriz ama yaptığımız etki tıklandıktan sonra da kalır ama renk değişir.
Örneğin yazıyı “link” sözde sınıfı ile kalın ve rengini kırmızı yaptığımızda ilk tıklamaya kadar kalın ve kırmızı olur, tıklandıktan sonra rengi değişir ama yazı kalınlığı değişmez.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
a:link{
color:red;
}
</style>
</head>
<body>
<a href="https://www.tasarimveyazilim.com/"> Tasarım ve Yazılım </a><br/>
<a href="https://www.trt.com.tr/"> TRT </a><br/>
<a href="https://www.msn.com/"> MSN </a><br/>
</body>
</html>Tarayıcıdaki Sonucu:
Yukarıdaki örnekte “TRT” ve “MSN” linklerini kırmızı yaparken “Tasarım ve Yazılım” linkini yapmadı. Bunun sebebi bu tarayıcıda daha önce açılmış olmasıdır. Hiç açılmayan linklerin rengini değiştirmeye olanak verir.
Eğer tıklanan linkler için herhangi bir renk tanımlamadı iseniz varsayılan renk (mavi tonu) haline gelir.
Eğer tarayıcı geçmişini sıfırlarsanız verdiğiniz tüm linklerin rengi, atadığınız renk olur.
NOT: CSS Sözde sınıflar konusunun örnekleri yaparken tarayıcıyı sıfırlayarak yapmanız nasıl çalıştığını anlamanız adına önemlidir.
2. CSS Hover Sözde Sınıfı Kullanımı
Seçtiğimiz elemanın üzerine mouse ile geldiğimizde Css kodları çalışır, mouse ile elemanın üzerinden ayrıldığımızda kodlar çalışmaz.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
div:hover, p:hover{
color:red;
}
</style>
</head>
<body>
<h1>Egitimler</h1>
<div>HTML</div>
<div>CSS</div>
<div>JS</div>
<p> Web Eğitimleri </p>
</body>
</html>Tarayıcıdaki Sonucu:
Gördüğümüz gibi üzerine mouse ile geldiğinizde kırmızı oluyor, ayrıldığımızda eski rengi ne ise o renk oluyor.
3. CSS Active Sözde Sınıfı Kullanımı
Seçtiğimiz eleman aktif olduğunda yani üzerine tıklanmış olduğu durumda iken kodlarımızın çalışır. Yani Mouse sol tuşa bastığımızda çalışır, mouse sol tuşu basmayı bıraktığımızda kodlar pasif olur.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
div:active{
color:red;
}
</style>
</head>
<body>
<h1>Egitimler</h1>
<div>HTML</div>
<div>CSS</div>
<div>JS</div>
</body>
</html>Tarayıcıdaki Sonucu:
4. CSS Visited Sözde Sınıfı Kullanımı
Seçtiğimiz elemanın tıklandıktan sonraki rengini tanımlar. Bir linke tıkladıktan sonra rengini değiştirmek istediğimizde kullanılan seçicidir.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
a:visited{
color: red;
}
</style>
</head>
<body>
<h1>Egitimler</h1>
<a target="blank" href="https://www.tasarimveyazilim.com">HTML</a> <br>
<a target="blank" href="https://www.tasarimveyazilim.com">CSS</a> <br>
<a target="blank" href="https://www.tasarimveyazilim.com">JS</a> <br>
</body>
</html>Tarayıcıdaki Sonucu:
5. CSS any link Sözde Sınıfı Kullanımı
Html link etiketlerinin url si boş değilse yani “url” si olanlar için Css kodları tanımladığımızda çalışır. “href” özelliğini tanımlamamız yeterlidir. “href” özelliğini yazıp içerisine url yazmasak bile “url” varmış gibi kodlarımız çalışır.
“any-link” tarayıcılarda çalışırken farklılık vardır. Daha önceki derslerimizde anlattığımız prefix önek tanımlama burada gerecektir. Eğer bu konuyu bilmiyorsanız Prefix Önek Tanımlama dersimize bakabilirsiniz.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
a:-webkit-any-link{
color: red;
}
a:-moz-any-link{
color: red;
}
a:-o-any-link{
color: red;
}
a:-ms-any-link{
color: red;
}
a:any-link{
color: red;
}
</style>
</head>
<body>
<h1>Egitimler</h1>
<a>HTML</a> <br>
<a href="">CSS</a> <br>
<a href="https://www.tasarimveyazilim.com">JS</a>
</body>
</html>Tarayıcıdaki Sonucu:
6. CSS focus Sözde Sınıfı Kullanımı
Belirtiğimiz elemana odaklandığımızda tanımladığımız css ler çalışır, odaklanmayı bıraktığımızda eski durumuna gelir.
Genelde form’lar da kullanılır.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"]:focus{
background-color:yellow;
}
</style>
</head>
<body>
<p>Adınız
<input type="text" name="" id="">
</p>
<p>Soyadınız
<input type="text" name="" id="">
</p>
</body>
</html>Tarayıcıdaki Sonucu:
7. CSS lang() Sözde Sınıfı Kullanımı
Belirtiğimiz Html elemanının lang(dil) özelliğine göre biçimlendirme yapabiliyoruz.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
p:lang(tr){
color:red;
}
</style>
</head>
<body>
<p lang="tr">Merhaba Dünya </p>
<p lang="en">Hello World</p>
</body>
</html>Tarayıcıdaki Sonucu:
“lang() kullanılırken sadece bir değil de bütün etiketlere uygulanması isteniyorsa CSS de ” :lang(istenilen dil){ css kodlar }” şeklinde kodlarımızı yazarak yaparız.
8. CSS target Sözde Sınıfı Kullanımı
Belirttiğimiz Html elemanına çapa türünde link ler ile bağlanıldığında hedef verdiğimiz elemanlara biçimlendirme yapmamızı sağlar.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
:target{
color:red;
}
</style>
</head>
<body>
<a href="#html-dersleri">HTML</a>
<a href="#css-dersleri">CSS</a>
<h1 id="html-dersleri">HTML DERSLERİ</h1>
<p>Lorem ipsum dolor sit amet <br>
consectetur adipisicing elit. <br>
Neque perspiciatis quaerat
.</p>
<h1 id="css-dersleri">CSS DERSLERİ</h1>
<p>Lorem ipsum dolor sit amet <br>
consectetur adipisicing elit. <br>
Neque perspiciatis quaerat
.</p>
</body>
</html>Tarayıcıdaki Sonucu:
9. CSS root Sözde Sınıfı Kullanımı
Html in kök elementine (html) biçimlendirme yapmamızı sağlar. Yani Css de “:root{css kodları}” şeklinde yazdığımız ile “html{css kodları}” yazdığımız kodlar aynı seçimi yapar, ama root seçicisinin önceliği daha yüksektir.
10. CSS empty Sözde Sınıfı Kullanımı
Belittiğimiz Html elemanın içi tamamen boş ise biçimlendirme yapmamızı sağlar. İçine herhangi bir karakter girilmeyen html elementlerini seçip biçimlendirme yapabiliriz.
Boşluk bir karakterdir. Bir elemente boşluk karakteri girerseniz o elementi seçmez.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
:empty{
background-color:red;
width: 100%; /* genişlik */
height: 2px; /* yükseklik*/
}
</style>
</head>
<body>
<div></div>
<h1>HTML</h1>
<p></p>
<p>CSS</p>
<h2></h2>
<span>JS</span>
</body>
</html>Tarayıcıdaki Sonucu:
Yukarıdaki örnekte boş olan elementlere genişlik ve yükseklik değeri atamamızın sebebi görülmesi içindir.
11. CSS not() Sözde Sınıfı Kullanımı
Belirtiğimiz element hariç diğer bütün Html elementlerine biçimlendirme yapar. CSS not() kullanımı diğer sözde sınıflar dan biraz farklıdır. Css de kod yazarken önce hariç tutacağımız elementin css kodlarını yazarız, sonra “:not{css kodları}” şeklinde diğer elementlere kodlarımızı yazarız.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
h2{
color: red;
}
:not(h2){
color: black;
font-style: italic;
}
</style>
</head>
<body>
<div></div>
<h2>HTML</h2>
<p>Lorem ipsum, dolor sit amet
consectetur adipisicing elit.
Eaque, ex.</p>
<h2>CSS</h2>
<p>Lorem ipsum, dolor sit amet
consectetur adipisicing elit.
Eaque, ex.</p>
</body>
</html>Tarayıcıdaki Sonucu:
12. CSS checked Sözde Sınıfı Kullanımı
Belirttiğimiz element de seçim yaptığımızda biçimlendirme yapar, seçimi kaldırdığımızda biçimlendirme eski haline gelir.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
input:checked{
height: 25px;
width: 25px;
}
</style>
</head>
<body>
<h4>Bildikleriniz</h4>
<form action="">
<input type="checkbox" checked="checked">HTML <br>
<input type="checkbox">CSS <br>
<input type="checkbox">JS <br>
<input type="checkbox">C# <br>
<input type="checkbox">Bootstrap <br>
</form>
<h4>Cinsiyetiniz</h4>
<form action="">
<input type="radio" name="cinsiyet" checked="checked">Erkek <br>
<input type="radio" name="cinsiyet">Kadın <br>
</form>
</body>
</html>Tarayıcıdaki Sonucu:
Bu örnekte tipi “radio” ve “checkbox” olan elemanların biçimlendirmelerini ayrı ayrı yapılabilir.
“input[type=”checkbox”]:checked{ css kodları }”seçimi ile tipi “checkbox” olanı ve “input[type=”radio”]:checked{ css kodları }” seçimi ile de tipi “radio” olanı seçeriz. Farklı biçimlendirme kodları yazarak farklı biçimlendirmeler oluşturabiliriz.
13. CSS disabled Sözde Sınıfı Kullanımı
Belirttiğimiz eleman aktif olmadığında biçimlendirme yapmamızı sağlar. Disabled seçici, devre dışı bırakılmış elemanları seçer diyebiliriz.
Html Elementinin attribute değerlerinde “disadled” olmalıdır ve “value” değerine yazdığımız değer input un içine atanır.
Üyelik formlarında herkes için sabit girilecek değerlerde çok kullanılır.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
input:disabled {
color: blue;
}
</style>
</head>
<body>
<h4>Üyelik Formu</h4>
<form action="">
Adınız: <input type="text"><br>
Soyadınız: <input type="text"><br>
Ülkeniz: <input type="text" value="Türkiye" disabled><br>
Şehir: <input type="text" value="İstanbul" disabled><br>
E-mail: <input type="email">
</form>
</body>
</html>Tarayıcıdaki Sonucu:
Bu örnekte gördüğümüz gibi disabled olan input alanlarına herhangi bir karakter giremiyoruz. Varsayılan bir background (arka plan) rengi vardır. Herkes için sabit girilecek değerlerde bu işlem yapılabilir.
14. CSS enabled Sözde Sınıfı Kullanımı
Belirttiğimiz eleman aktif olduğunda biçimlendirme yapmamızı sağlar. Devre dışı bırakılmamış elemanları seçmek için kullanılır diyebiliriz.
“input” elemanları desabled özelliği yazılmadığında enabled özelliği geçerlidir. Yani “input” elemanlarına “enabled” yazmamıza gerek yoktur.
Disabled örneğine enabled ekleyerek örneğimizi genişletmiş olalım.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
input:disabled {
background: #dddddd;
}
input:enabled{
color: red;
}
</style>
</head>
<body>
<h4>Üyelik Formu</h4>
<form action="">
Adınız: <input type="text"><br>
Soyadınız: <input type="text"><br>
Ülkeniz: <input type="text" value="Türkiye" disabled><br>
Şehir: <input type="text" value="İstanbul" disabled><br>
E-mail: <input type="email">
</form>
</body>
</html>Tarayıcıdaki Sonucu:
15. CSS read only Sözde Sınıfı Kullanımı
Sadece okunabilen elemanlara biçimlendirme yapmamızı sağlar.
Html elementinin attribute değerlerinde “readonly” özelliği olmalıdır ve “value” değerine yazdığımız değer input un içine atanır.
Genelde input elemanlarında ve textarea da kullanılır. Sadece okunur, herhangi bir değişiklik yapılamaz. Disabled seçici ye benzerdir, ama disabled daki gibi varsayılan background rengi yoktur.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
input:read-only {
color:red;
}
</style>
</head>
<body>
<h4>Üyelik Formu</h4>
<form action="">
Adınız: <input type="text"><br>
Soyadınız: <input type="text"><br>
Ülkeniz: <input type="text" value="Türkiye" readonly><br>
Şehir: <input type="text" value="İstanbul" readonly><br>
E-mail: <input type="email">
</form>
</body>
</html>Tarayıcıdaki Sonucu:
16. CSS read-write Sözde Sınıfı Kullanımı
Hem okunabilen hemde yazılabilen elemanlara biçimlendirme yapmamızı sağlar. Enabled özelliğine benzerdir.
Html elementinin attribute değerlerinde herhangi bir değer girmemize gerek yok.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
input:read-only {
color: red;
}
input:read-write {
color: blue;
}
</style>
</head>
<body>
<h4>Üyelik Formu</h4>
<form action="">
Adınız: <input type="text"><br>
Soyadınız: <input type="text"><br>
Ülkeniz: <input type="text" value="Türkiye" readonly><br>
Şehir: <input type="text" value="İstanbul" readonly><br>
E-mail: <input type="email">
</form>
</body>
</html>Tarayıcıdaki Sonucu:
Bu örnekte de gördüğümüz gibi “read-only” olan kısımda herhangi bir değişiklik yapamıyoruz ve rengi kırmızı oldu. “read-write” olan kısımda karakter girdiğimizde bizim biçimlendirmeye göre işlem yapıyor.
17. CSS required Sözde Sınıfı Kullanımı
Html elementine girişin zorunlu olduğunda durumlarda biçimlendirme yapmamızı sağlar.
Örneğin e-devlete girerken TCKN ve şifre girilmesi zorunludur. Bu gibi durumlarda biçimlendirme yapmamız için kullandığımız seçicidir.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
input:required {
border:2px solid red;
}
</style>
</head>
<body>
<h4>Yorumunuz</h4>
<form action="">
Adınız: <input type="text" required><br>
Soyadınız: <input type="text"><br>
E-mail: <input type="email" required><br>
Mesajınız: <input type="text" required><br>
<input type="submit" value="Gönder">
</form>
</body>
</html>Tarayıcıdaki Sonucu:
18. CSS optional Sözde Sınıfı Kullanımı
Html elementine girişin isteğe bağlı olduğu durumlarda biçimlendirme yapmamızı sağlar.
Required seçici de verdiğimiz örneği burada da optional seçici kullanarak yapalım. Required alanları yine kırmızı yapalım, optional olan alanları mavi yapalım.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
input:required {
border:2px solid red;
}
input[type="text"]:optional {
border:2px solid blue;
}
</style>
</head>
<body>
<h4>Yorumunuz</h4>
<form action="">
Adınız: <input type="text" required><br>
Soyadınız: <input type="text"><br>
E-mail: <input type="email" required><br>
Mesajınız: <input type="text" required><br>
<input type="submit" value="Gönder">
</form>
</body>
</html>Tarayıcıdaki Sonucu:
19. CSS valid Sözde Sınıfı Kullanımı
Html elementine geçerli bir giriş yapıldığında biçimlendirme yapmamızı sağlar. Eğer geçerli olmayan bir giriş yapılırsa biçimlendirme eski haline döner.
Aynı örnekte bu kez e-mail kısmını valid seçici ile kullanalım.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
input[type="email"]:valid{
background: green;
}
</style>
</head>
<body>
<h4>Yorumunuz</h4>
<form action="">
Adınız: <input type="text" required><br>
Soyadınız: <input type="text"><br>
E-mail: <input type="email" required><br>
Mesajınız: <input type="text" required><br>
<input type="submit" value="Gönder">
</form>
</body>
</html>Tarayıcıdaki Sonucu:
Örneğimizde gördüğümüz gibi email kriterlerine dogru mail girince bizim css de yazdığımız koda göre arka plan rengini yeşil yaptı.
20. CSS invalid Sözde Sınıfı Kullanımı
Html elemnetine geçerli bir giriş yapılmadığında biçimlendirme yapmamızı sağlar. Eğer geçerli bir giriş yapılırsa biçimlendirme eski haline döner.
Valid seçici de kullandığımız örneği invalid için kullanalım.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
input[type="email"]:invalid{
background: red;
}
</style>
</head>
<body>
<h4>Yorumunuz</h4>
<form action="">
Adınız: <input type="text" required><br>
Soyadınız: <input type="text"><br>
E-mail: <input type="email" required><br>
Mesajınız: <input type="text" required><br>
<input type="submit" value="Gönder">
</form>
</body>
</html>Tarayıcıdaki Sonucu:
Örneğimizde gördüğümüz gibi eğer değer boş veya yanlış değer olduğu anlarda arka planı kırmızı yapıyor, doğru olduğunda varsayılan renge dönüyor.
21. CSS in-range Sözde Sınıfı Kullanımı
Belirttiğimiz elemana girilen değer belirtilen değerler içinde ise biçimlendirme yapmamızı sağlar. Eğer belirtilen değerler dışında ise biçimlendirme eski haline döner.
Doğum tarihi girişi yapılan input’lar da günümüz ve öncesi gibi aralık belirlemek gibi…
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
input[type="number"]:in-range{
background: lightgreen;
}
</style>
</head>
<body>
Adınız: <input type="text"> <br>
Soyadınız: <input type="text"><br>
Dogum Yılınız: <input type="number" min="1900" max="2019">
</body>
</html>Tarayıcıdaki Sonucu:
Örnekte gördüğümüz gibi değer aralığında değer girince arka plan rengini atadığımız renk yaptı.
22. CSS out-of-type Sözde Sınıfı Kullanımı
Belirttiğimiz elemana girilen değer belirtilen değerler dışında ise biçimlendirme yapmamızı sağlar.
Eğer belirtilen değerler içinde ise biçimlendirme eski haline döner. in-range seçici deki işlemin tersidir.
Aynı örneği burada out-of-range için yapalım.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
input[type="number"]:out-of-range{
background: red;
}
</style>
</head>
<body>
Adınız: <input type="text"> <br>
Soyadınız: <input type="text"><br>
Dogum Yılınız: <input type="number" min="1900" max="2019">
</body>
</html>Tarayıcıdaki Sonucu:
Değerin dışında değer yazdığımız için arka planı atadığımız renk kırmızı yaptı.
23. CSS first-child Sözde Sınıfı Kullanımı
Belirttiğimiz element baz alınarak, üst elementine bitişik ilk çocuk (child) elemente biçimlendirme yapmamızı sağlar. Belirttiğimiz element ilk bitişik çocuk element değilse biçimlendirme yapmaz.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child{
background-color: red;
}
</style>
</head>
<body>
<p>HTML.</p>
<p>CSS.</p>
<p>JS.</p>
<div>
<span>Photoshop</span>
<p>Illustrator.</p>
<p>After Effect</p>
</div>
<div>
<p>C#</p>
<p>C</p>
<p>C++</p>
</div>
</body>
</html>Tarayıcıdaki Sonucu:
24. CSS last-child Sözde Sınıfı Kullanımı
Belirttiğimiz element baz alınarak, üst elementine bitişik son çocuk (child) elemente biçimlendirme yapmamızı sağlar.
Yani üst elementin kapanış etiketine bitişik olmalıdır. Belirttiğimiz element son bitişik çocuk element değilse biçimlendirme yapmaz.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
p:last-child{
background-color: red;
}
</style>
</head>
<body>
<p>HTML.</p>
<p>CSS.</p>
<p>JS.</p>
<div>
<span>Photoshop</span>
<p>Illustrator.</p>
<p>After Effect</p>
</div>
<div>
<p>C#</p>
<p>C</p>
<p>C++</p>
</div>
</body>
</html>Tarayıcıdaki Sonucu:
25. CSS first-of-type Sözde Sınıfı Kullanımı
Belirttiğimiz element baz alınarak, üst elementine göre ilk çocuk (child) elemente biçimlendirme yapmamızı sağlar.
“first-child” bitişik ilk elemente yapıyordu, “first-fo-type” da bitişik olması istenmiyor, belirtilen element ilk nerede rastlanırsa o seçiliyor.
Yine aynı örnekte bu seçiciyi kullanalım.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
p:first-of-type{
background-color: yellow;
}
</style>
</head>
<body>
<p>HTML.</p>
<p>CSS.</p>
<p>JS.</p>
<div>
<span>Photoshop</span>
<p>Illustrator.</p>
<p>After Effect</p>
</div>
<div>
<p>C#</p>
<p>C</p>
<p>C++</p>
</div>
</body>
</html>Tarayıcıdaki Sonucu:
26. CSS last-of-type Sözde Sınıfı Kullanımı
Belirttiğimiz element baz alınarak, üst elementine göre son çocuk (child) elemente biçimlendirme yapmamızı sağlar.
“last-child” bitişik son elemente yapıyordu, “last-fo-type” da bitişik olması istenmiyor, belirtilen element sondan bakılarak ilk nerede rastlanırsa o seçiliyor.
Yine aynı örnekte bu seçiciyi kullanalım.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
p:last-of-type{
background-color: yellow;
}
</style>
</head>
<body>
<p>HTML.</p>
<p>CSS.</p>
<p>JS.</p>
<div>
<span>Photoshop</span>
<p>Illustrator.</p>
<p>After Effect</p>
</div>
<div>
<p>C#</p>
<p>C</p>
<p>C++</p>
</div>
</body>
</html>Tarayıcıdaki Sonucu:
27. CSS only-child Sözde Sınıfı Kullanımı
Belirttiğimiz element baz alınarak, üst elementine göre bitişik tek çocuk (child) elemente biçimlendirme yapmamızı sağlar. Yani belirtiğimiz element p ise, tek element p olmalıdır.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
p:only-child{
background-color: blue;
}
</style>
</head>
<body>
<p>HTML.</p>
<p>CSS.</p>
<p>JS.</p>
<div>
<p>Photoshop</p>
</div>
<div>
<span>C#</span>
<p>C++</p>
</div>
</body>
</html>Tarayıcıdaki Sonucu:
28. CSS only-of-type Sözde Sınıfı Kullanımı
Belirttiğimiz element baz alınarak, üst elementine göre aynı türde tek çocuk (child) elemente biçimlendirme yapmamızı sağlar.
Örneğin body içinde bir tane p elementi varsa “p:only-of-type{css kodları}” diyerek seçip özelliklerini değiştirebiliriz.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
p:only-of-type{
background-color: blue;
}
</style>
</head>
<body>
<p>HTML.</p>
<div>
<p>Photoshop</p>
<p>Illustrator</p>
<p>After Effect</p>
</div>
<div>
<span>C#</span>
<p>C++</p>
</div>
</body>
</html>Tarayıcıdaki Sonucu:
29. CSS nth-child Sözde Sınıfı Kullanımı
Belirttiğimiz element baz alınarak, üst elementine göre kardeş elementlerin ilk elementinden başlayarak sıra numaralarına göre biçimlendirme yapmamızı sağlar. Kardeş elementlerin türüne bakılmadan sıra numarasına göre seçim yapılır.
Genelde tablolarda ve listelerde daha rahat okumayı sağlamak için satır renklerini düzenlemede çok sık kullanılır.
Farklı kullanım şekilleri vardır. En çok kullanımlarından “nth-child(odd)” tek numara sırası olan kardeş elementleri seçmek için ve “nth-child(even)” ise çift numara sırası olan kardeş elementleri seçmek için kullanılır. Kullanım şekillerini örneklerle anlatalım.
Örnek: “odd” ve “even” kullanım şekli örneği
<!DOCTYPE html>
<html>
<head>
<style>
li:nth-child(odd){
background-color: #b9b9b9;
}
li:nth-child(even){
color: red;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>ASP</li>
<li>PHP</li>
</ul>
</body>
</html>Tarayıcıdaki Sonucu:
Yukarıdaki örnekte gördüğümüz gibi “odd” seçici ile tek sıra numaralı <li> etiketlerinin arka plan rengini değiştirdik.
“even” seçici ile de çift sıra numaralı <li> etiketlerinin rengini değiştirdik.
Örnek: nth-child(1)/ nth-child(4)… kullanım şekli örneğini yukarıdaki örnekte kullandığımız html kodlarını kullanalım. Sadece css kodlarımızı değiştirelim.
CSS kodlarımız:
li:nth-child(1){
background-color:red;
}
li:nth-child(4){
background-color:blue;
}Tarayıcıdaki Sonucu:
Gördüğümüz gibi “nth-child(tamsayı)” şeklinde yazdığımızda, yazdığımız tam sayı hangi satır ise o satıra yazdığımız css kodlarını uyguluyor.
Örnek: nth-child(2n+1)/nth-child(3n+1) kullanım şekli örneğini yukarıdaki örnekte kullandığımız html kodlarını kullanalım sadece css kodlarımızı değiştirelim.
CSS kodlarımız:
li:nth-child(2n+1){
background-color:#bbbbbb;
}
li:nth-child(3n+1){
color:red;
}Tarayıcıdaki Sonucu:
Gördüğümüz gibi “(2n+1)” seçimi ile ilk satırdan başlayarak iki satırda bir seçim yaparak ve arka plan rengini değiştirmiş oluyoruz.
“(3n+1)” seçimi ile ilk satırdan başlayarak üç satırda bir seçim yaparak ve yazı rengini değiştirmiş oluyoruz.
Örnek: nth-child(2n+3)/nth-child(3n+2) kullanım şekli örneğini yukarıdaki örnekte kullandığımız html kodlarını kullanalım sadece css kodlarımızı değiştirelim.
CSS kodlarımız:
li:nth-child(2n+3){
background-color:#bbbbbb;
}
li:nth-child(3n+2){
color:red;
}Tarayıcıdaki Sonucu:
Gördüğümüz gibi “(2n+3)” seçimi ile üçüncü satırdan başlayarak iki satırda bir seçim yaparak ve arka plan rengini değiştirmiş oluyoruz.
“(3n+2)” seçimi ile ikinci satırdan başlayarak üç satırda bir seçim yaparak ve yazı rengini değiştirmiş oluyoruz.
Örnek: nth-child(n+3) kullanım şekli örneğini yukarıdaki örnekte kullandığımız html kodlarını kullanalım sadece css kodlarımızı değiştirelim.
CSS kodlarımız:
li:nth-child(n+3){
background-color:#bbbbbb;
}Tarayıcıdaki Sonucu:
Gördüğümüz gibi “(n+3)” seçimi ile üçüncü satırdan başlayarak her satırı seçim yaparak ve arka plan rengini değiştirmiş oluyoruz.
30. CSS nth-last-child Sözde Sınıfı Kullanımı
Belirttiğimiz element baz alınarak, üst elementine göre kardeş elementlerin son elementinden başlayarak sıra numaralarına göre biçimlendirme yapmamızı sağlar. Kardeş elementlerin türüne bakılmadan sıra numarasına göre seçim yapılır.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
li:nth-last-child(2){
color:red;
}
li:nth-last-child(2n+1){
background-color:#bbbbbb;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>JQUERY</li>
<li>ASP</li>
<li>PHP</li>
</ul>
</body>
</html>Tarayıcıdaki Sonucu:
31. CSS nth-of-type Sözde Sınıfı Kullanımı
Belirttiğimiz element baz alınarak, üst elementine göre kardeş elementlerin ilk elementinden başlayarak sıra numaralarına göre biçimlendirme yapmamızı sağlar. Belirttiğimiz elementin türüyle aynı türde olan kardeş elementlerin sıra numarasına göre seçim yapılır.
“nth-child seçici” ile benzer yapıya sahiptir ancak nth-of-type da aynı tür elementler seçilir. Yani belirttiğimiz element p ise, sadece p kardeş elementler belirtilen sıra numarasına göre seçilir.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
div:nth-of-type(2){
color:red;
}
p:nth-of-type(2n+1){
background-color:#bbbbbb;
}
</style>
</head>
<body>
<div>HTML</div>
<p>CSS</p>
<p>JS</p>
<div>JQUERY</div>
<p>ASP</p>
<span>PHP</span> <br>
<div>C / C++ </div>
<p>C#</p>
</body>
</html>Tarayıcıdaki Sonucu:
32. CSS nth-last-of-type Sözde Sınıfı Kullanımı
Belirttiğimiz element baz alınarak, üst elementine göre kardeş elementlerin son elementinden başlayarak sıra numaralarına göre biçimlendirme yapmamızı sağlar. Belirttiğimiz elementin türüyle aynı türde olan kardeş elementlerin sıra numarasına göre seçim yapılır.
Yukarıdaki aynı örneği bu seçici ile de kullanalım.
Örnek:
<!DOCTYPE html>
<html>
<head>
<style>
div:nth-last-of-type(1){
color:red;
}
p:nth-last-of-type(2n+1){
background-color:#bbbbbb;
}
</style>
</head>
<body>
<div>HTML</div>
<p>CSS</p>
<p>JS</p>
<div>JQUERY</div>
<p>ASP</p>
<span>PHP</span> <br>
<div>C / C++ </div>
<p>C#</p>
</body>
</html>Tarayıcıdaki Sonucu:
CSS sözde sınıflar yazımız biraz uzun oldu ama konu bütünlüğü olması açısından tek yazı olarak yazdık. CSS de seçicileri kullanılırken daha çok kullandığımız sözde sınıflar hover, focus, active, visited, nth-child ve nth-last-child seçicileridir.
Diğer Seçiciler ile İlgili Derlerimiz
- Genel Seçici (*) ler, tüm Html elemanlarını seçmemize olanak verir. Seçmeyi “*” karakteri ile yaparız.
- Element Seçici (Element), seçtiğimiz Html Elementini seçer. Yani seçmek istediğimiz elementi yazarız ve seçmiş oluruz.Örneğin <h1> elementini seçmek için “h1” yazmak gibi.
- ID Seçici (#ID), Html elementine yazdığımız ID ile seçeriz. Elementlerin “id” attribute değerine bir isim veririz ve o isimi CSS de kullanırız.
- Class Seçici (.class), Html elementine yazdığımız class ile seçeriz. Elementlerin “class” attribute değerine bir isim veririz ve o isimi CSS de kullanırız. Birden fazla elemente aynı class ı verebiliriz.
- Child Seçici (Element>Element), Html etiketinin altındaki (çocuk) elementi seçmek için.
- Descendant Seçici(Element Element), Html etiketinin altındaki (torun düzeyinde) descendant elementi seçmek için.
- Genel Kardeş (Sibling) Seçici (Element ~ Element), Html etiketinin belirtiğimiz sibling etiketini seçer.
- Bitişik Sibling (Kardeş) Seçici (Element + Element), Html etiketinin belirtiğimiz bitişik sibling etiketini seçer.
- Çoklu (Multiple) Seçici (Element, Element), Bir veya daha fazla Html etiketlerini seçebiliriz.
- Attribute ( Özellik)Seçici (Element[özellik-adı]), Html Etiketini özellik değeri ile seçmemize olanak veriyor.
- CSS Sözde Element(Pseudo Element) Seçiciler, Element olmayıp element gibi davranan ve seçim yapmamızı sağlayan yapılardır.
Başka bir yazımızda görüşmek dileğiyle…
