CSS ile HTML öğelerinin özel durumlarını tanımlamak için sözde sınıflar kullanılır. Örneğin bir öğeye odaklanıldığında, mouse imlecini bir öğenin üstüne getirildiğinde veya bir linkin farklı durumlarına (ziyaret edilmiş veya edilmemiş gibi) stil vermek isteyebiliriz. Tüm bunlar için CSS Sözde Sınıfların kullanımı ile gerçekleştirilebilir.
Yazım Kuralı;
|
1 2 3 4 5 |
selector:pseudo-class { property:value; } |
Şimdi bu sözde sınıfların kullanımına dair bazı örnekler görelim.
Örnek;
Aşağıdaki örneğimiz bir linki farklı durumlarını ele almaktadır. Link bildiğiniz üzere <a> etiketi ile tanımlanır. Ancak farklı durumları vardır. Bunlar;
- link : Link ziyaret edilmemiş durum
- visited : Link ziyaret edilmiş durum
- hover : Mouse imleci linkin üstünde
- active : Link seçilmiş durum
Bir link için bu farklı durumları tek tek ele alıp, CSS sözde sınıfları şeklinde kullanabilir, stil tanımlayabiliriz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <style> /* Ziyaret Edilmemiş Link */ a:link { color: red; } /* Ziyaret Edilmiş Link */ a:visited { color: green; } /* Mouse Üzerinde İken */ a:hover { color: orange; } /* Seçilmiş Olduğu An */ a:active { color: blue; } </style> </head> <body> <a href="#">Bu bir Link</a> </body> </html> |
Not : Link için kullanılan sözde sınıflar link, visited, hover, active sıralamasında olmalıdır.
Örnek;
Sözde sınıflarını “class” tanımlaması yapılmış CSS sınıflarıyla birlikte kullanabilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <style> a.menu:hover { color: #ff0000; } </style> </head> <body> <a class="menu" href="#">CSS Dersleri</a> </body> </html> |
hover Kullanımı
hover Sahte Sınıfı mouse imlecinin üzerine geldiği durumu ifade etmektedir. Tabi ki bu durum özellikle linklerde sıklıkla kullanılsa da, sadece ona mahsus değildir. Diğer HTML öğelerinde kullanabilirsiniz.
Örnek;
Aşağıdaki örneğimizde hover sözde sınıfı bir <div> öğesi için kullanılmıştır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <style> div { background-color: green; color: white; padding: 25px; text-align: center; } div:hover { background-color: red; } </style> </head> <body> <div>Bu bir div öğesidir.</div> </body> </html> |
Örnek;
hover Sözde Sınıfını bir <p> öğesiyle birlikte kullanabilirsiniz.
Aşağıdaki örneğimizde bir öğenin üzerine geldiğimizde açılan ve tooltip adıyla bildiğimiz basit bir balon ifadesi oluşturacağız.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <style> p { display: none; background-color: yellow; padding: 10px; } div:hover p { display: block; } </style> </head> <body> <div>CSS Sözde Sınıflar <p>hover kullanımı</p> </div> </body> </html> |
first-child Kullanımı
:first-child Sözde sınıfı bir öğenin kapsamında bulunan ilk öğeyi belirtmek için kullanılır.
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <style> p:first-child { color: red; } </style> </head> <body> <p>Bu bir paragraf</p> <p>Bu bir paragraf</p> <p>Bu bir paragraf</p> </body> </html> |
Örnek;
Aşağıdaki örnekte seçici, tüm <p> öğelerindeki ilk <i> öğesiyle eşleşir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <style> p i:first-child { color: red; } </style> </head> <body> <p>Lorem Ipsum, <i>dizgi</i> ve <i>baskı</i> endüstrisinde kullanılan <i>mıgır</i> metinlerdir.</p> <p>Lorem Ipsum, <i>dizgi</i> ve <i>baskı</i> endüstrisinde kullanılan <i>mıgır</i> metinlerdir.</p> <p>Lorem Ipsum, <i>dizgi</i> ve <i>baskı</i> endüstrisinde kullanılan <i>mıgır</i> metinlerdir.</p> </body> </html> |
Örnek;
Aşağıdaki örnekte seçici, başka bir öğenin ilk alt öğesi olan <p> öğelerindeki tüm <i> öğeleriyle eşleşir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <style> p:first-child i { color: red; } </style> </head> <body> <p>Lorem Ipsum, <i>dizgi</i> ve <i>baskı</i> endüstrisinde kullanılan <i>mıgır</i> metinlerdir.</p> <p>Lorem Ipsum, <i>dizgi</i> ve <i>baskı</i> endüstrisinde kullanılan <i>mıgır</i> metinlerdir.</p> <p>Lorem Ipsum, <i>dizgi</i> ve <i>baskı</i> endüstrisinde kullanılan <i>mıgır</i> metinlerdir.</p> </body> </html> |
last-child Kullanımı
:last-child Sözde sınıfı bir öğenin kapsamında bulunan son öğeyi belirtmek için kullanılır.
Örnek;
Aşağıdaki örneğimizde seçici <p> öğelerinin sonuncusu ile eşleşmiştir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <style> p:last-child { background: #ff0000; } </style> </head> <body> <p>Bu bir paragraftır.</p> <p>Bu bir paragraftır.</p> <p>Bu bir paragraftır.</p> <p>Bu bir paragraftır.</p> </body> </html> |
not(selector) Kullanımı
:not(selector) Sözde sınıfı bildiriminde yer alan seçici (selector) dışında kalan tüm öğeleri seçmek için kullanılır.
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <style> p { color: blue; } :not(p) { color: red; } </style> </head> <body> <h2>Bu bir başlıktır.</h2> <p>Bu bir paragraftır.</p> <p>Bu bir paragraftır.</p> <span>Bu bir span öğesidir.</span> <div>Bu bir div öğesidir.</div> <a href="#">Bu bir linktir</a> </body> </html> |
nth-child(n) Kullanımı
:nth-child Sözde Seçicisi (n) ile bildirilen sıradaki öğeyi seçmek için kullanılır. Aşağıdaki örnekler ile kullanımını inceleyiniz;
Örnek;
Aşağıdaki örneğimizde nth-child sözde seçicisi 2. <p> öğesi ile eşleşmektedir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <style> p:nth-child(2){ background-color: green; color:white; } </style> </head> <body> <p>Bu bir paragraftır.</p> <p>Bu bir paragraftır.</p> <p>Bu bir paragraftır.</p> <p>Bu bir paragraftır.</p> <p>Bu bir paragraftır.</p> </body> </html> |
Örnek;
Aşağıdaki örneğimizde nth-child sözde seçicisinin odd parametresi tek nolu sıradaki even ise çift nolu sıradaki <p> öğeleri ile eşleşir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> <style> p:nth-child(odd){ background-color: green; color:white; } p:nth-child(even){ background-color: red; color:white; } </style> </head> <body> <p>Bu bir paragraftır.</p> <p>Bu bir paragraftır.</p> <p>Bu bir paragraftır.</p> <p>Bu bir paragraftır.</p> <p>Bu bir paragraftır.</p> </body> </html> |
Örnek;
Aşağıdaki örneğimizde nth-child sözde seçicisi bir formülü parametre almaktadır. Hangi sıradaki <p> öğelerini seçeceği formülde yer alan n yerine 0’dan başlamak suretiyle sayma sayıları getirilerek hesaplanır. Örneğimizde;
- n=0 için 3n+1=1
- n=1 için 3n+1=4
- n=2 için 3n+1=7
- n=3 için 3n+1=10 . sıradaki <p> öğeleri seçilmiş ve stil uygulanmıştır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <style> p:nth-child(3n+1){ background-color: green; color:white; } </style> </head> <body> <p>Bu bir paragraftır.</p> <p>Bu bir paragraftır.</p> <p>Bu bir paragraftır.</p> <p>Bu bir paragraftır.</p> <p>Bu bir paragraftır.</p> <p>Bu bir paragraftır.</p> <p>Bu bir paragraftır.</p> <p>Bu bir paragraftır.</p> <p>Bu bir paragraftır.</p> <p>Bu bir paragraftır.</p> </body> </html> |
nth-last-child(n) Kullanımı
nth-last-child Sözde Sınıfı nth-child Sözde sınıfının etkilerine sahiptir. Tek fark sayma işlemini sondan başa doğru gerçekleştirmesidir.
Örnek;
Aşağıdaki örneğimizde sondan 1. <p> öğesi seçilmiş ve stil uygulanmıştır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <style> p:nth-last-child(1){ background-color: green; color:white; } </style> </head> <body> <p>Bu bir paragraftır.</p> <p>Bu bir paragraftır.</p> <p>Bu bir paragraftır.</p> <p>Bu bir paragraftır.</p> </body> </html> |
lang Kullanımı
:lang Sözde sınıf farklı diller için özel kurallar tanımlamanızı sağlar.
Örnek;
Aşağıdaki örnekte, :lang Sözde sınıfı lang = “ozel” olan <q> öğelerinin tırnak işaretlerini tekrar tanımlar.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <style> q:lang(ozel) { quotes: "~" "~"; background-color:aqua; } </style> </head> <body> <p>Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan <q lang="ozel">consectetur</q> sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır.</p> </body> </html> |
focus Kullanımı
Bir öğeye odaklandığınızda focus Sözde sınıfına ait CSS bildirimleriniz gerçekleşir.
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <style> input:focus { background-color: yellow; } </style> </head> <body> <form action="#" method="get"> Ad: <input type="text" name="ad"><br> Soyad: <input type="text" name="soyad"><br> <input type="submit" value="Submit"> </form> </body> </html> |
[…] […]