Tüm CSS Seçicileri ve Açıklamaları

CSS, HTML etiketlerine stil uygulamak için kullanılan bir dildir ve stil uygulamak için öncelikle HTML etiketinin seçilmesi gerekir. Bu yazıda HTML etiketlerini seçerken kullanılan tüm seçicilerin eksiksiz bir listesi bulunmaktadır. Seçicilere geçmeden önce bilmenizde fayda olacak birkaç terimden bahsedeceğiz.

Parent: Ebeveyn anlamına gelen parent terimi içerisinde başka etiketler barındıran etiketler için kullanılır. Aşağıdaki örnekte <ul> etiketi parent yani ebeveyn etikettir. <li> etiketinin ebeveynidir ancak <a> etiketinin değildir. <a> etiketinin ebeveyni <li> etiketidir.

<ul>
  <li>
    <a></a>
  </li>
</ul>

Child: Çocuk anlamına gelen child terimi bir ebeveyn etiket içerisinde bulunan etiketler için kullanılır. Aşağıdaki örnekte <li> etiketi child yani çocuk etikettir.

<ul>
  <li>
    <a></a>
  </li>
</ul>

Pseudo-class: Sözde sınıf anlamına gelen pseudo-class bir seçici türüdür. Basit seçiciler ile erişilemeyen ve belgede görünür bir varlığı olmayan öğeleri seçmek için kullanılır. Sözde sınıflar, iki nokta üst üste : işareti ile başlarlar.

Pseudo-elements: Sözde öğe anlamına gelen pseudo-elements bir seçici türüdür. Basit seçiciler ve sözde sınıflar ile erişilemeyen etiket içi metinlere ve etiket arası (::before, ::after) bölgelere erişmek için kullanılır. Sözde öğeler, çift iki nokta üst üste :: işareti ile başlarlar.

Not: Tarayıcılar seçicileri sağdan sola doğru okur. Örneğin aşağıdaki seçici, tarayıcı tarafından işlenirken önce <a> etiketine sahip etiketler filtrelenir, daha sonra bunlar içerisindeki <li> etiketleri ve en son <ul> etiketleri filtrelenerek seçim işlemi tamamlanır.

ul li a {
}

Not: Her seçici tüm tarayıcılarda çalışmayabilir kullanmadan önce hangi tarayıcıda çalıştığını öğrenmek için caniuse.com adresinden kontrol edebilir ve desteklemek istediğinizi tarayıcılara uygun olacak şekilde seçicileri kullanabilirsiniz.

Not: Örnek bölümlerinde göreceğiniz mavi ile işaretlenmiş etiketler, seçici tarafından erişilen etiketleri gösterir.

Basit CSS Seçicileri

Sınıf Seçicisi: .

Bir öznitelik olan class='' ile isimlendirilmiş olan etiketlere erişmek için kullanılır. Birden çok etiket aynı sınıf ismine sahip olabilir.

<p class='sinif-adi'></p>
.sinif-adi { 
}

ID Seçicisi: #

Bir öznitelik olan id='' ile isimlendirilmiş olan etiketlere erişmek için kullanılır. Bir sayfada aynı isme sahip birden çok id ismi kullanılamaz.

<p id='id-adi'></p>
#id-adi{ 
}

Evrensel Seçici: *

Universal selector olarak da adlandırılan bu seçici belgedeki tüm HTML etiketlerini seçmek için kullanılır. Mecbur kalınmadıkça kullanılması önerilmez çünkü tarayıcının sayfadaki tüm HTML etiketlerine aynı stili uygulamasını gerektirir.

* {
}

Etiket Seçici: tag

Doğrudan etiket isimleri ile seçim yapmak için kullanılır. Aşağıdaki örnek ile tüm paragraf etiketleri seçilmiş olur.

p {
}

Çocuk Seçici: >

Child combinator olarak da adlandırılan bu seçici, ebeveyn bir etiketin, belirli bir çocuğunu seçmek için kullanılır. Aşağıdaki örnekte <div> ebeveyni içinde bulunan tüm <a> etiketleri seçilir.  Bu seçim sadece çocuk öğeler için geçerlidir ‘torun’ öğeler seçime dahil edilmez.

<div>
  <a></a>
  <ul>
    <li>
      <a></a>
    </li>
  </ul>
</div>
div>a { 
}

Bitişik Kardeş Seçici: +

Adjacent sibling combinator olarak da adlandırılan bu seçici belirtilen iki etiketi art arda gördüğünde ikinci etiketi seçmek için kullanılır. Örneğin aşağıdaki seçim işlemi ile <div> etiketinden hemen sonra gelen a etiketi seçilmiş olur. En sondaki <a> etiketi seçilmez çünkü art arda gelmemiştir.

<div></div>
<a></a>
<div></div>
<p></p>
<a></a>
div+a {
}

Genel Kardeş Seçici: ~

General sibling combinator olarak da adlandırılan bu seçici, bir etiketten sonra gelen belirli etiketlerin tümünü seçmek için kullanılır. Aşağıdaki örnekte <a> etiketinden sonra gelen tüm <p> etiketleri seçilmektedir.

<p></p>
<a></a>
<h1></h1>
<p></p>
<h2></h2>
<p></p>
a~p {
}

Öznitelik Seçici: []

Belirli bir özniteliğe sahip etiketleri seçmek için kullanılır. Aşağıdaki örnekte href özniteliğine sahip tüm öğeler seçilmiştir.

<a href=""></a>
[href] {
}

Öznitelik Değer Seçici: [attribute=value]

Bir özniteliğe tanımlanan belirli bir değere sahip etiketleri seçmek için kullanılır. Aşağıdaki örnekte href='#' öznitelik değerine sahip tüm a etiketleri seçilir.

<a href="#"></a>
a[href=#] {
}

Öznitelik Değer İçi Arama: [attribute~=value]

Öznitelik değeri içerisinde geçen kelimeye göre etiket seçimi yapmak için kullanılır. Aşağıdaki örnekte title öznitelik değeri ‘hello’ olan etiketler seçilmiştir. Dikkat edilecek nokta hello değeri ile world değeri arasında boşluk olduğu için aşağıdaki örnekte seçim gerçekleşmiştir. Eğer birleşik olsaydı gerçekleşmeyecekti.

<a title="hello world"></a>
[title ~= hello] {
}

Öznitelik Değer İçi Arama: [attribute|=value]

Öznitelik değeri içerisinde arama yaparak, belirtilen harf veya kelime ile başlayan öğeleri seçmek için kullanılır. Aşağıdaki örnekte metnin sadece başlangıç kısmı olan ‘wo’ harfleri verilerek seçim işlemi gerçekleştirilmektedir.

<a title="hello world"></a>
[title |= wo] {
}

Öznitelik Değer İçi Arama: [attribute^=value]

Bir önceki özellik |= gibi öznitelik içerisinde arama yapar ve aranan kelimenin başlangıcı eşleştiğinde seçim gerçekleşir. Aralarındaki fark ise bu ^= seçicinin aranan kelimeyi sadece değer başlangıcında aramasıdır. Aşağıdaki örnekte seçme işlemi gerçekleşmemiştir çünkü ikinci kelimenin başlangıcı olan ‘wo’ harfleri aranmıştır. Eğer birinci kelimenin başlangıcı olan ‘h’ harfi aransaydı eşleşme gerçekleşecekti.

<a title="hello world"></a>
[title ^= wo] {
}

Öznitelik Değer İçi Arama: [attribute$=value]

Öznitelik değerleri içerisinde arama yapar ve belirli bir kelime veya harf ile biten etiketleri seçer. Aşağıdaki örnekte class özniteliğine sahip etiketler aranır ve değeri ‘dark’ ile biten etiketler seçilir.

<a class="btn-dark"></a>
[class $= dark] {
}

Öznitelik Değer İçi Arama: [attribute*=value]

Öznitelik değerleri içerisinde arama yapar ve aranan kelime veya harflerin bulunduğu tüm etiketleri seçer. Aranan değerin başta, sonda veya ortada olması sonucu değiştirmez. Aşağıdaki örnekte  ‘dark’ değeri öznitelik içerisinde ortada bulunduğu halde seçim gerçekleşir.

<a class="btn-dark-outline"></a>
[class *= dark] {
}

Pseudo Class Seçiciler

:hover

Fare ile linkin veya herhangi bir etiketin üzerine gelindiğinde uygulanacak olan stili belirlemek için kullanılır.

a:hover {
}

:active

Linke tıklandığı anda uygulanacak stili belirlemek için kullanılır.

a:active {
}

:link

Ziyaret edilmemiş linklere stil uygulamak için kullanılır.

a:link {
}

:visited

Ziyaret edilmiş yani bir defa tıklanmış linklere stil uygulamak için kullanılır.

a:visited {
}

:focus

Genellikle <input> etiketi ile birlikte kullanılan bu seçici etikete tıklandığı anda uygulanacak stili belirlerken kullanılır. Örneğin bir metin kutusuna tıklandığında :focus yani odaklanma işlemi gerçekleşmiş olur.

input:focus {
}

:checked

radio ve check özelliklerine sahip inputlarla ve <select> etiketi ile birlikte kullanılabilir. Bir seçenek seçildiği zaman uygulanacak stili tanımlamak için kullanılır.

input:checked {
}

:default

radio, check, buttonözelliklerine sahip inputlarla ve <select> etiketi ile birlikte kullanılabilir. checked özniteliği ile seçili bir şekilde gelen inputlara uygulanacak stili belirlemek için kullanılır.

input:default {
}

:disabled

Disabled yani kullanım dışı olan <input> etiketlerini seçmek için kullanılır.

input:disabled {
}

:enabled

Disabled yani kullanım dışı olarak ayarlananlar hariç tüm <input> etiketlerini seçmek için kullanılır.

input:enabled {
}

:invalid

<input>etiketi ile birlikte kullanılır. Belirli bir değerin istenen formata uygun olup olmadığına göre farklı stil uygulanmasını sağlar. Örneğin bir mail değeri alınırken geçersiz formatta bir mail adresi girilirse invalid yani geçersiz bir giriş yapılmıştır ve bu seçici ile tanımlanan stil uygulanır.

input:invalid {
}

:valid

<input>etiketi ile birlikte kullanılır. :invalid seçicisinin tam tersidir. Eğer girilen değer beklenen formata uygunsa bu seçici ile tanımlanan stil uygulanır.

input:valid {
}

:indeterminate

<input>etiketinin check, radio değerleri  ve <progress> etiketi ile birlikte kullanılır.  Belirsiz anlamına gelen indeterminate ile işaretlenmemiş kutular seçilir. Örneğin bir checkbox sayfa açıldığında işaretli de değildir, işaretsiz de sayılmaz ve bu durumda seçicimiz stili uygular. Eğer checkbox işaretlenirse veya işaretlenip geri kaldırılırsa kutu boş dahi olsa stil uygunlanmaz.

input:indeterminate {
}

:optional

<input>etiketi ile birlikte kullanılır. Formlarda bazı alanlar required özniteliği ile değer girilmesi zorunlu alan haline getirilir. Geri kalan bölgeler ise opsiyonel yani isteğe bağlı doldurulur. Bu seçici ile isteğe bağlı etiketler seçilebilir ve stil uygulanabilir.

input:optional {
}

:required

<input>etiketi ile birlikte kullanılır. Formlarda bazı alanlar required özniteliği ile değer girilmesi zorunlu alan haline getirilir. Bu seçici ile zorunlu hale getirilmiş yani required özniteliğine sahip etiketler seçilebilir ve stil uygulanabilir.

input:required {
}

:placeholder

<input>etiketi ile birlikte kullanılır. Metin bölümlerinde silik yazı şeklinde görünen yer tutucu metinlere stil uygulamak için kullanılır.

input:placeholder {
}

:read-only

<input>etiketi ile birlikte kullanılır. Salt okunur yani yanlızca okunabilen, yazmaya kapalı <input> bölümlerini seçmek ve stil uygulamak için kullanılır.

input:read-only {
}

:read-write

<input>etiketi ile birlikte kullanılır. :read-only seçicisinin tam tersidir.  Salt okunur olmayan yani yazılabilir tüm <input>etiketlerini seçmek için kullanılır.

input:read-write {
}

:empty

İçeriği boş olan tüm etiketleri seçmek için kullanılır.

<p><p>
<a><a>
p:empty {
}

:root

HTML belgesinin kök dizini olan <html> etiketine erişmek ve stil uygulamak için kullanılır.

:root {
}

:fullscreen

Sayfa tam ekran olarak kullanıldığında etiketlere uygulanacak stili belirlemek için kullanılır.

:fullscreen {
}

:target

Bir linke tıklandığında başka bir etikete stil uygulamak için kullanılır. Aşağıdaki örnekte <a> etiketine tıklandığında <p> etiketine stil uygulanacaktır.

<a href='#paragraf'>Tıkla</a>
<p id='paragraf'>Değişsin</p>
:target{
}

:in-range

min ve max özniteliği alabilen etiketlerde, girilen değer beklenen aralıkta ise stil uygulamak için kullanılır.

<input type="number" min="2" max="4">
:in-range{
}

:out-of-range

min ve max özniteliği alabilen etiketlerde, girilen değer beklenen aralıkta değilse stil uygulamak için kullanılır. in-range seçicisinin tam tersidir.

<input type="number" min="2" max="4">
:out-of-range{
}

:lang

lang yani dil belirlemek için kullanılan öznitelik değeri aranır ve girilen değerle eşleşirse, etiket seçilir ve stil uygulanır.

<p lang='tr'>Merhaba Dünya</p>
:lang(tr){
}

:not()

Belirtilen öğe hariç tüm öğelere erişmek için kullanılır. Aşağıdaki örnekte <a> etiketi hariç tüm etiketleri seçer.

<p></p>
<a></a>
<p></p>
:not(a) {
}

:first-child

Ebeveyn bir etiketin ilk çocuğunu seçmek için kullanılır. Aşağıdaki örnekte sadece <div> etiketinin ilk çocuğu olan <p> etiketi seçilecektir.

<div>
  <p></p>
  <p></p>
</div>
div:first-child{
}

:last-child

Ebeveyn bir etiketin son çocuğunu seçmek için kullanılır. Aşağıdaki örnekte sadece <div> etiketinin son çocuğu olan <p> etiketi seçilecektir.

<div>
  <p></p>
  <p></p>
</div>
div:first-child{
}

:nth-child()

Ebeveyn bir etiketin belirtilen sıradaki çocuğunu seçer. Programlamada olduğu gibi sayma işlemi 0’dan başlamaz, 1’den başlar. Aşağıdaki örnekte <div> ebeveyninin ikinci çocuğu seçilir.

<div>
  <p></p>
  <p></p>
</div>
div:nth-child(2) {
}

:nth-last-child()

Ebeveyn bir etiketin, sondan belirtilen sıradaki çocuğunu seçer. Programlamada olduğu gibi sayma işlemi 0’dan başlamaz, 1’den başlar. Aşağıdaki örnekte <div> ebeveyninin alttan ikinci çocuğu seçilir.

<div>
  <p></p>
  <p></p>
</div>
div:nth-last-child(2) {
}

:only-child

Tek çocuğa sahip olan tüm ebeveyn etiketleri seçmek için kullanılır.

<div>
  <p></p>
</div>
:only-child {
}

:first-of-type

Kardeşleri arasında türünün ilki olan çocukları seçer. Aşağıdaki örnekte aynı ebeveyn altında bulunan etiketlerden türünün ilki olan <p> etiketi seçilmiştir.

<div>
  <h1></h1>
  <p></p>
  <p></p>
</div>
p:first-of-type {
}

:last-of-type

Kardeşleri arasında türünün son örneği olan çocukları seçer. Aşağıdaki örnekte aynı ebeveyn altında bulunan etiketlerden türünün sonuncusu olan <p> etiketi seçilmiştir.

<div>
  <h1></h1>
  <p></p>
  <p></p>
</div>
p:last-of-type {
}

:nth-of-type()

Kardeşleri arasında türünün kaçıncı örneği olduğuna göre seçim yapmak için kullanılır. Aşağıdaki örnekte kardeşleri arasından türünün ikinci örneği olan etiket seçilmiştir.

<div>
  <h1></h1>
  <p></p>
  <p></p>
</div>
p:nth-of-type(2) {
}

:only-of-type()

Kardeşleri arasında türünün başka bir örneği olmayan öğeleri seçmek için kullanılır. Aşağıdaki örnekte kardeşleri arasında türünün tek örneği olan <p> etiketi seçilmiştir. Aynı ebeveyn içerisinde bir tane daha <p> etiketi olsaydı seçilemeyecekti.

<div>
  <h1></h1>
  <p></p>
</div>
p:only-of-type {
}

Pseudo Element Seçiciler

::before

Etiketin içindeki değerin başına ekleme yapar. Aşağıdaki örnekte etiketin değerinin başına ekleme yapılır ve <p> etiketinin yeni değeri ‘Merhaba Dünya’ olur. Ayrıca eklenen değere stil eklenebilir.

<p> Dünya</p>
p::before {
  content: 'Merhaba';
  color: red;
}

::after

Etiketin içindeki değerin sonuna ekleme yapar. Aşağıdaki örnekte etiketin değerinin sonuna ekleme yapılır ve <p> etiketinin yeni değeri ‘Merhaba Dünya’ olur. Ayrıca eklenen değere stil eklenebilir.

<p>Merhaba </p>
p::after{
  content: 'Dünya';
  color: red;
}

::first-letter

Sadece blok düzeyindeki etiketlerde kullanılabilen bir seçicidir. Etiketin içerisindeki metnin sadece ilk harfini seçmek için kullanılır. Aşağıdaki örnekte paragrafın sadece ilk harfine stil uygulanmıştır.

<p>Merhaba</p>
p::first-letter{
  color: blue;
}

::first-line

Sadece blok düzeyindeki etiketlerde kullanılabilen bir seçicidir. Etiketin içerisindeki metnin sadece ilk satırını seçmek için kullanılır. Aşağıdaki örnekte paragrafın sadece ilk satırına stil uygulanmıştır.

<p>Merhaba</p>
p::first-line{
}

::selection

Bir internet sayfası üzerinde fare ile metin seçildiğinde metin arka planı otomatik olarak mavi olur. Bu seçimin stilini belirlemek için ::selection seçicisi kullanılır.

<p>Merhaba</p>
p::selection{
}

::marker

Liste öğelerinde kullanılan bir seçicidir. <ol> ve <ul> ile oluşturulan listelerde numara veya simge gibi liste işaretleri bulunur. Bu işaretlere erişmek ve stil vermek için ::marker seçicisi kullanılır.

<ul>
  <li>Liste</li>
</ul>
::marker{
}
1 yorum “CSS Seçicileri”
Yorum Yap