CSS, Pseudo - Class (Sözde Sınıf) Seçiciler
Psudo, kelime anlamı ile "sahte" manasına gelmektedir. Bu nedenle aslında bu işlemler içerisinde yapmış olduğumuz seçim işlemleri, doğrudan elementin sahip olduğu değerler değil, olması beklenen değerlerdir. CSS, Pseudo - Class Seçicileri konusunun daha iyi anlaşılması için 6 farklı başlık altında bir yazım gerçekleştireceğiz. Bunlar; Genel Pseudo-class seçiciler, Form elemanlarına yönelik Pseudo-class seçiciler, Ebeveyn - Çocuk ilişkisine yönelik Pseudo-class seçiciler, Elemanın türüne yönelik Pseudo-class seçiciler, İçerik durumuna yönelik Pseudo-class seçiciler ve en son olarak Kök eleman seçici şeklindedir.
CSS Genel Pseudo-class seçiciler
En sık kullanılan Pseudo-class seçicileridir. Birden çok Genel Pseudo-class yapısı bulunmaktadır. Bunlar aşağıdaki gibidir.
1) :active Herhangi bir elemente tıklanılma durumunu, CSS :active yapısı temsil etmektedir.
<a href="#">A element</a> <!-- ✔️ -->
<button>Button element</button> <!-- ✔️ -->
<div>Div element</div> <!-- ✔️ -->a:active{
color: red;
}
button:active{
background-color: orange;
}
div:active{
color: lightcoral;
}Yukarıdaki örnekte, seçilen bütün elementlerin :active yani tıklanılması durumuna başarılı bir şekilde müdahale yapılmıştır.
2) :hover CSS ile herhangi bir elementin üzerine mouse ile gelme durumunu temsil etmektedir.
<a href="#">A element</a> <!-- ✔️ -->
<button>Button element</button> <!-- ✔️ -->
<div>Div element</div> <!-- ✔️ -->a:hover{
color: red;
}
button:hover{
background-color: orange;
}
div:hover{
color: lightcoral;
}:hover, CSS'te yukarıdaki gibi kullanılmaktadır.
3) :link CSS'te sadece "a" elementleri için kullanılır ve ziyaret edilmemiş bağlantıları temsil eder.
<a href="#">A element</a> <!-- ✔️ -->a:link{
background-color: yellow;
}İlginç bir şekilde renk değerine bile doğrudan etki etmez! Fakat background değerine başarılı bir şekilde etki etmektedir.
4) :visited CSS'te sadece "a" elementleri için kullanılır ve ziyaret edilmiş bağlantıları temsil eder. :link durumun tersi olarak da düşünülebilir.
<a href="#">A element</a> <!-- ✔️ -->a:visited{
color: rgb(255, 168, 168);
background-color: rgb(100, 190, 255);
}5) :focus CSS'te "input" ve "textarea" elementleri üzerinde kullanılmaktadır ve ilgili elemente odaklanma durumunu temsil eder.
<input type="text"> <!-- ✔️ -->input:focus{
width: 250px;
background-color: orange;
}6) :target CSS'te tüm elementlerde hedef olma durumunu temsil etmektedir.
<a href="#news1">Son haberler</a>
<article id="news1">
<h1>Title</h1>
<p>Paragraf</p>
</article>article:target{
background-color: orange;
color: lightblue;
}Yukarıdaki örnekte HTML sayfa içi yönlendirme işlemi yapılmaktadır. Bu işlem sırasında "a" elementinin hedef olarak belirttiği element "target" olarak nitelendirilmektedir.
CSS Form Elemanlarına Yönelik Pseudo-class Seçiciler
Form elemanlarına özel olarak kullanılan Pseudo-class seçicilerdir. Bunlar aşağıdaki gibidir.
1) :checked Seçilmiş olan tüm input elemanlarını seçer.
<input type="checkbox" checked>Checkbox element</input> <!-- ✔️ -->
<input type="radio" checked>Radio element</input> <!-- ✔️ -->input:checked{
background-color: orange;
}Yukarıdaki örnekte, seçilmiş olan tüm input elemanlarının arka plan rengi değiştirilmiştir.
2) :default Varsayılan input elemanını seçer.
<input type="checkbox">Checkbox element</input> <!-- ✔️ -->input:default{
border: 2px solid blue;
}Yukarıdaki örnekte, varsayılan olarak seçili olan input elemanının kenarlığı değiştirilmiştir.
3) :disabled Pasif durumdaki tüm input elemanlarını seçer.
<input type="text" disabled>Text element</input> <!-- ✔️ -->input:disabled{
background-color: lightgrey;
}Yukarıdaki örnekte, pasif durumdaki tüm input elemanlarının arka plan rengi değiştirilmiştir.
4) :enabled Aktif durumdaki tüm input elemanlarını seçer.
<input type="text">Text element</input> <!-- ✔️ -->input:enabled{
background-color: white;
}Yukarıdaki örnekte, aktif durumdaki tüm input elemanlarının arka plan rengi değiştirilmiştir.
5) :in-range Belirtilen bir aralık içindeki değere sahip input elemanlarını seçer.
<input type="range" min="0" max="100" value="50"></input> <!-- ✔️ -->input:in-range{
background-color: green;
}Yukarıdaki örnekte, belirli bir aralık içindeki değere sahip olan input elemanlarının arka plan rengi değiştirilmiştir.
6) :indeterminate Belirsiz durumda olan input elemanlarını seçer.
<input type="checkbox">Checkbox element</input> <!-- ✔️ -->input:indeterminate{
background-color: yellow;
}Yukarıdaki örnekte, belirsiz durumda olan input elemanlarının arka plan rengi değiştirilmiştir.
7) :invalid Geçersiz değere sahip tüm input elemanlarını seçer.
<input type="email" value="invalid-email">Email element</input> <!-- ✔️ -->input:invalid{
border: 2px solid red;
}Yukarıdaki örnekte, geçersiz değere sahip input elemanlarının kenarlığı değiştirilmiştir.
8) :optional "required" özniteliği olmayan input elemanlarını seçer.
<input type="text">Text element</input> <!-- ✔️ -->input:optional{
border: 2px solid green;
}Yukarıdaki örnekte, "required" özniteliği olmayan input elemanlarının kenarlığı değiştirilmiştir.
9) :out-of-range Belirtilen bir aralık dışındaki değere sahip input elemanlarını seçer.
<input type="range" min="0" max="100" value="150"></input> <!-- ✔️ -->input:out-of-range{
background-color: red;
}Yukarıdaki örnekte, belirtilen bir aralık dışındaki değere sahip input elemanlarının arka plan rengi değiştirilmiştir.
10) :read-only "readonly" özniteliğine sahip input elemanlarını seçer.
<input type="text" readonly>Readonly element</input> <!-- ✔️ -->input:read-only{
background-color: lightgrey;
}Yukarıdaki örnekte, "readonly" özniteliğine sahip input elemanlarının arka plan rengi değiştirilmiştir.
11) :read-write "readonly" özniteliğine sahip olmayan input elemanlarını seçer.
<input type="text">Writable element</input> <!-- ✔️ -->input:read-write{
background-color: white;
}Yukarıdaki örnekte, "readonly" özniteliğine sahip olmayan input elemanlarının arka plan rengi değiştirilmiştir.
12) :required "required" özniteliğine sahip input elemanlarını seçer.
<input type="text" required>Required element</input> <!-- ✔️ -->input:required{
border: 2px solid red;
}Yukarıdaki örnekte, "required" özniteliğine sahip input elemanlarının kenarlığı değiştirilmiştir.
13) :valid Geçerli değere sahip tüm input elemanlarını seçer.
<input type="email" value="valid@example.com">Valid Email element</input> <!-- ✔️ -->input:valid{
border: 2px solid green;
}Yukarıdaki örnekte, geçerli değere sahip input elemanlarının kenarlığı değiştirilmiştir.
CSS Ebeveyn - Çocuk İlişkisine Yönelik Pseudo-class Seçiciler
Ebeveyn ve çocuk elemanlar arasındaki ilişkileri belirten Pseudo-class seçicilerdir. Bunlar aşağıdaki gibidir.
1) :first-child Ebeveyninin ilk çocuğu olan tüm p elemanlarını seçer.
<div>
<p>First paragraph</p>
<p>Second paragraph</p>
</div> <!-- ✔️ -->p:first-child{
color: blue;
}Yukarıdaki örnekte, ebeveyninin ilk çocuğu olan paragraf elemanının rengi değiştirilmiştir.
2) :last-child Ebeveyninin son çocuğu olan tüm p elemanlarını seçer.
<div>
<p>First paragraph</p>
<p>Second paragraph</p>
</div> <!-- ✔️ -->p:last-child{
color: green;
}Yukarıdaki örnekte, ebeveyninin son çocuğu olan paragraf elemanının rengi değiştirilmiştir.
3) :only-child Ebeveyninin tek çocuğu olan tüm p elemanlarını seçer.
<div>
<p>Only child paragraph</p>
</div> <!-- ✔️ -->p:only-child{
color: red;
}Yukarıdaki örnekte, ebeveyninin tek çocuğu olan paragraf elemanının rengi değiştirilmiştir.
4) :nth-child() Ebeveyninin belirli bir sıradaki çocuğunu seçer. Örneğin, ikinci çocuğu seçmek için p:nth-child(2) kullanılır.
<div>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
</div> <!-- ✔️ -->p:nth-child(2){
color: purple;
}Yukarıdaki örnekte, ebeveyninin ikinci çocuğu olan paragraf elemanının rengi değiştirilmiştir.
5) :nth-last-child() Ebeveyninin sonundan başlayarak belirli bir sıradaki çocuğunu seçer. Örneğin, sonuncudan ikinci çocuğu seçmek için p:nth-last-child(2) kullanılır.
<div>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
</div> <!-- ✔️ -->p:nth-last-child(2){
color: orange;
}Yukarıdaki örnekte, ebeveyninin sonundan ikinci çocuğu olan paragraf elemanının rengi değiştirilmiştir.
Elemanın Türüne Yönelik Pseudo-class Seçiciler
Elementin türü baz alınarak yapılan seçim işlemleridir. Yine Ebeveyn - Çocuk ilişkisi bulunmaktadır.
1) :first-of-type Ebeveyninin belirli türdeki ilk çocuğunu seçer. Örneğin, ebeveyninin ilk p elemanını seçmek için kullanılır.
<div>
<p>First paragraph</p>
<span>A span</span>
<p>Second paragraph</p>
</div> <!-- ✔️ -->p:first-of-type{
color: pink;
}Yukarıdaki örnekte, ebeveyninin ilk p elemanının rengi değiştirilmiştir.
2) :last-of-type Ebeveyninin belirli türdeki son çocuğunu seçer. Örneğin, ebeveyninin son p elemanını seçmek için kullanılır.
<div>
<p>First paragraph</p>
<span>A span</span>
<p>Second paragraph</p>
</div> <!-- ✔️ -->p:last-of-type{
color: cyan;
}Yukarıdaki örnekte, ebeveyninin son p elemanının rengi değiştirilmiştir.
3) :nth-of-type() Ebeveyninin belirli türdeki belirli bir sıradaki çocuğunu seçer. Örneğin, ebeveyninin ikinci p elemanını seçmek için p:nth-of-type(2) kullanılır.
<div>
<p>First paragraph</p>
<span>A span</span>
<p>Second paragraph</p>
<p>Third paragraph</p>
</div> <!-- ✔️ -->p:nth-of-type(2){
color: lightgreen;
}Yukarıdaki örnekte, ebeveyninin ikinci p elemanının rengi değiştirilmiştir.
4) :nth-last-of-type() Ebeveyninin belirli türdeki sonundan başlayarak belirli bir sıradaki çocuğunu seçer. Örneğin, ebeveyninin sonundan ikinci p elemanını seçmek için p:nth-last-of-type(2) kullanılır.
<div>
<p>First paragraph</p>
<span>A span</span>
<p>Second paragraph</p>
<p>Third paragraph</p>
</div> <!-- ✔️ -->p:nth-last-of-type(2){
color: grey;
}Yukarıdaki örnekte, ebeveyninin sonundan ikinci p elemanının rengi değiştirilmiştir.
CSS İle İçerik Durumuna Yöntelik Pseudo-class Seçiciler
Belirli bir türdeki elemanları seçen Pseudo-class seçicilerdir. Bunlar aşağıdaki gibidir.
1) :empty İçeriği olmayan tüm elemanları seçer.
<div></div> <!-- ✔️ -->div:empty{
width: 100px;
height: 100px;
background-color: orange;
}Yukarıdaki örnekte elementin boş olması durumuna binaen bir seçim işlemi yapılmıştır.
2) :lang() lang() özelliği bulunan ve içerisinde belirli bir ülke kodu bulunan elementleri seçmektedir.
<p>Normal Element</p> <!-- ❌ -->
<p lang="it">Ciao bella!</p> <!-- ✔️ -->p:lang(it) {
background: yellow;
}:lang() değeri "it" olan elementi seçmektedir.
3) :not() Belirlenen herhangi bir elementin, içerisindeki herhangi bir özelliğin olmaması durumunu kontrol eder.
<p class='header'>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>Normal p element</p>p:lang(it) {
background: yellow;
}Yukarıdaki örnekte <p class='header'>This is a paragraph.</p> dışında kalan bütün "p" elementleri seçilmiştir.
Kök Eleman Seçici
:root işareti CSS'te HTML sayfasını "kök" elemanını seçer. Özellikle "font-size" değerlerinin ayarlanması durumun kullanılmaktadır.
:root{
font-size: 16px;
}Yukarıdaki şekilde "font-size" değeri 16px olarak ayarlandığında, ölçü birimi olan "rem" değerinin "1rem" değeri de 16px olarak ayarlanmış olacaktır.
p{
font-size: 1rem; // 16px değerini temsil eder.
}Böylelikle CSS Pseudo-class seçiciler nelerdir sorusuna net bir şekilde cevap vermiş oluyoruz.
CSS'te bulunan diğer seçim türlerini görüntülemek için CSS'te Seçim Yöntemleri isimli ana yazımıza bakmanızı tavsiye etmekteyiz.