Yazar: Murat Dinç

:nth-child(n) ve :nth-last-child(n) Nasıl Kullanılır?

Daha önceki yazımızda :first-child ve :last-child‘dan bahsetmiştik ve bu CSS seçicilerinin genellikle tablolarda ve listelerde kullanıldığını söylemiştik. Öncelikle :first-child ve :last-child‘ın nasıl kullanıldığını bilmiyorsanız aşağıdaki bağlantıdan nasıl kullanıldıklarını öğrenmenizde fayda var, zira bu konu devam niteliğinde.

First ve last child’ın nasıl kullanıldığını öğrendiğinize göre :nth-child(n) ve :nth-last-child(n) ile CSS öğrenmeye devam edebiliriz. Bu seçiciler sadece ilk ve son olarak değil, baştan ve sondan başlayarak parantez içerisine yazılan değeri seçer. Yani :nth-child(2) dediğinizde baştan 2. eleman seçilirken, :nth-last-child(2) dediğimizde sonran 2. eleman seçilir. Bir liste örneği ile açıklamak gerekirse;

<ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>JS</li>
	<li>PHP</li>
	<li>jQuery</li>
</ul>

Bu yapıya sahip listenin önizlemesi şu şekilde olur:

  • HTML
  • CSS
  • JS
  • PHP
  • jQuery

5 bileşenden oluşan bu liste için aşağıdaki CSS kodunu çalıştırdığımızda listenin 2. sırasında yer alan CSS bileşeni seçilir ve CSS kodu sadece bu bileşene uygulanarak bileşeni kalınlaştırıp rengini kırmızı yapar.

li:nth-child(2) {
      color: #ff0000;
      font-weight: 700;
}
  • HTML
  • CSS
  • JS
  • PHP
  • jQuery

Aynı işlemi :nth-child(n) yerine aşağıdaki örnekteki gibi :nth-last-child(n) ile yaptığımızda ise sondan 2. bileşeni seçmiş oluyoruz ve sitillendirme işlemi 4. sıradaki PHP bileşenine uygulanmış oluyor.

li:nth-last-child(2) {
      color: #ff0000;
      font-weight: 700;
}
  • HTML
  • CSS
  • JS
  • PHP
  • jQuery

Eğer 2. ya da 4. bileşeni seçmek yerine 3. bileşeni seçmek isteseydik hangi seçiciyi kullandığımızın bir önemi kalmazdı, her iki seçici için de 3 değerini girdiğimizde listenin ortasında 3. bileşen olduğu için o seçilmiş olurdu.

Bu seçiciler aynı zamanda :first-child ve :last-child ile aynı seçme işlemini :nth-child(1) ve :nth-last-child(1) şeklinde yapabiliyor. Ancak ekstra sorgu ile çalıştığı için :first-child ve :last-child’ın yerine kullanılması temiz bir kodlama için oldukça sakıncalı.

Ayrıca hem 2. hemde 4. sıradaki bileşeni seçmek için farklı seçme işlemleri yapmanıza gerek yok. Değer olarak “even” ya da “2n” girmeniz yeterli olacaktır, bu 2,4,6,8 diye devam eden seçme işlemi yapmanızı sağlar. Yani şu şekilde;

li:nth-child(even) {
      color: #ff0000;
      font-weight: 700;
}
  • HTML
  • CSS
  • JS
  • PHP
  • jQuery

Bu kullanımların haricinde farklı değerler ve kombinasyonlar ile seçme işlemi de yapabilirsiniz. Mesela önceki örnekte “even” ve “2n”‘nin çift sayılarda seçme yaptığını söyleyip örneklemiştik, “2n” yerine “3n” yazıldığında ise bu seçme işlemi 3 ve katları olurken, “4n”‘de 4 ve katları, “5n”‘de 5 ve katları olarak devam ediyor. Ayırca ilk 3 ya da son 3 şeklinde seçme işlemi yapmak ta mümkün. Bunun için ise “-n+3” değerini girmek yeterli olacaktır. Her iki seçici ile de uygulanabilen bu kombinasyonda “-” değeri girilmez ise mevcut seçicinin seçme işlemi tersine döner. Bu kombinasyon ile bir örnek yaparak listenin ilk 3 bileşenini seçecek olursak örneğimiz şu şekilde olur;

li:nth-child(-n+3) {
      color: #ff0000;
      font-weight: 700;
}
  • HTML
  • CSS
  • JS
  • PHP
  • jQuery

Şimdi işleri biraz daha karmaşık bir hale getirelim ve aynı anda iki seçiciyi birden kullanalım. Bunun için 5 satır ve 5 sütundan oluşan bir örnek tablo oluşturmak oldukça iyi olacaktır.

<table>
   <tr>
      <td>satır 1, sütun 1</td>
      <td>satır 1, sütun 2</td>
      <td>satır 1, sütun 3</td>
      <td>satır 1, sütun 4</td>
      <td>satır 1, sütun 5</td>
   </tr>
   <tr>
      <td>satır 2, sütun 1</td>
      <td>satır 2, sütun 2</td>
      <td>satır 2, sütun 3</td>
      <td>satır 2, sütun 4</td>
      <td>satır 2, sütun 5</td>
   </tr>
   <tr>
      <td>satır 3, sütun 1</td>
      <td>satır 3, sütun 2</td>
      <td>satır 3, sütun 3</td>
      <td>satır 3, sütun 4</td>
      <td>satır 3, sütun 5</td>
   </tr>
   <tr>
      <td>satır 4, sütun 1</td>
      <td>satır 4, sütun 2</td>
      <td>satır 4, sütun 3</td>
      <td>satır 4, sütun 4</td>
      <td>satır 4, sütun 5</td>
   </tr>
   <tr>
      <td>satır 5, sütun 1</td>
      <td>satır 5, sütun 2</td>
      <td>satır 5, sütun 3</td>
      <td>satır 5, sütun 4</td>
      <td>satır 5, sütun 5</td>
   </tr>
</table>

Tablomuzun ön izlemesi şu şekilde:

satır 1, sütun 1 satır 1, sütun 2 satır 1, sütun 3 satır 1, sütun 4 satır 1, sütun 5
satır 2, sütun 1 satır 2, sütun 2 satır 2, sütun 3 satır 2, sütun 4 satır 2, sütun 5
satır 3, sütun 1 satır 3, sütun 2 satır 3, sütun 3 satır 3, sütun 4 satır 3, sütun 5
satır 4, sütun 1 satır 4, sütun 2 satır 4, sütun 3 satır 4, sütun 4 satır 4, sütun 5
satır 5, sütun 1 satır 5, sütun 2 satır 5, sütun 3 satır 5, sütun 4 satır 5, sütun 5

Şimdi bu tablonun ilk satırında, ilk sütununda, son satırında, son sütununda ve merkezinde olmayan bir yerini seçelim, mesela 2. satır 4. sütun gayet uygun olacaktır. Bunun için öncelikle HTML hiyerarşi gereği önce satırı daha sonra ise sütunu seçeceğiz ve tek sitillendirme için çift seçici kullanmış olacağız.

tr:nth-child(2) td:nth-last-child(2) {
    background-color: #33363c;
    color: #ffffff;
}

Üstteki CSS sitillendirme işlemini uyguladığımızda istediğimiz sonuca ulaşmış oluyoruz. Aynı şekilde farklı satır ve sütunları seçebilirsiniz.

satır 1, sütun 1 satır 1, sütun 2 satır 1, sütun 3 satır 1, sütun 4 satır 1, sütun 5
satır 2, sütun 1 satır 2, sütun 2 satır 2, sütun 3 satır 2, sütun 4 satır 2, sütun 5
satır 3, sütun 1 satır 3, sütun 2 satır 3, sütun 3 satır 3, sütun 4 satır 3, sütun 5
satır 4, sütun 1 satır 4, sütun 2 satır 4, sütun 3 satır 4, sütun 4 satır 4, sütun 5
satır 5, sütun 1 satır 5, sütun 2 satır 5, sütun 3 satır 5, sütun 4 satır 5, sütun 5

Eğer aynı sitillendirme için birden fazla satır ve sütünü seçmek isterseniz bunun için , virgül ayıracını kullanabilirsiniz. Virgül ile aynı sitili sınırsız elemana uygulamak mümkün.

tr:nth-child(2) td:nth-last-child(2), tr:nth-last-child(2) td:nth-child(2) {
    background-color: #33363c;
    color: #ffffff;
}
satır 1, sütun 1 satır 1, sütun 2 satır 1, sütun 3 satır 1, sütun 4 satır 1, sütun 5
satır 2, sütun 1 satır 2, sütun 2 satır 2, sütun 3 satır 2, sütun 4 satır 2, sütun 5
satır 3, sütun 1 satır 3, sütun 2 satır 3, sütun 3 satır 3, sütun 4 satır 3, sütun 5
satır 4, sütun 1 satır 4, sütun 2 satır 4, sütun 3 satır 4, sütun 4 satır 4, sütun 5
satır 5, sütun 1 satır 5, sütun 2 satır 5, sütun 3 satır 5, sütun 4 satır 5, sütun 5
Masaüstü Tarayıcılar
Seçiciler
Google Chrome Microsoft Edge Mozilla Firefox Opera Safari Internet Explorer
:nth-child(n)1+Evet3.5+9.5+3.1+9+
:nth-last-child(n)4+Evet3.5+9+3.2+9+
Mobil Tarayıcılar
Seçiciler Android Webview Samsung İnternet Google Chrome Microsoft Edge Mozilla Firefox Opera Safari
:nth-child(n)EvetEvetEvetEvet4+9.5+3.1+
:nth-last-child(n)EvetEvetEvetEvet4+10+3.2+

Diğer seçiciler ile ilgili bilgi sahibi olmak isterseniz alttaki bağlantıdan tüm CSS seçicilerinin olduğu listeye ulaşabilirsiniz.

Tarayıcı Kaydırma Çubuğu ::-webkit-scrollbar Nasıl Düzenlenir?

Bu rehberde tarayıcıların sağında bulunan tarayıcı kaydırma çubuğunun (scrollbar) nasıl düzenleneceği öğreniyor olacaksınız. Birkaç satır sitil kodu eklemek yerine, örnek ile birlikte işlem mantığı anlatmanın daha iyi olacağını düşündük. Bu nedenle konu ile ilgili detaylı bir içerik oluşturduk, böylelikle istediğiniz gibi düzenleme yapabilirsiniz. Webkit ile çalışarak sitenizin UI tasarımına uygun bir kaydırma çubuğu yapmanız oldukça iyi olacaktır. CSS ile yapacağımız düzenlemelerden önce kaydırma çubuğunda hangi seçicilerin bulunduğunu ve ne işe yaradıklarını bilmemiz gerekiyor.

Webkit ile işlem yapacağımız için yaptıklarınız sadece desteklenen tarayıcılarda ve Opera’nın 15 ve üzeri sürümünde çalışacaktır. Diğer tarayıcılar için jQuery kullanmanız gerekmektedir. Seçicilerin desteklendiği ve desteklenmediği tarayıcılar ile ilgili yazının sonundaki listeye bakmayı unutmayın.

CSS kaydırma çubuğu seçicileri;

  • ::-webkit-scrollbar Kaydırma tamamı tamamı.
  • ::-webkit-scrollbar-button kaydırma çubuğunun altında ve üstünde bulunan yukarı ve aşağı düğmesi.
  • ::-webkit-scrollbar-thumb sürüklenebilir kaydırma kolu.
  • ::-webkit-scrollbar-track kaydırma çubuğunun izi (ilerleme çubuğu).
  • ::-webkit-scrollbar-track-piece Kolun tutamağın kapsamadığı kısmı (ilerleme çubuğu).
  • ::-webkit-scrollbar-corner hem yatay hem de dikey kaydırma çubuklarının birleştiği kaydırma çubuğunun alt köşesi.
  • ::-webkit-resizer bazı öğelerin alt köşesinde görünen sürüklenebilir yeniden boyutlandırma tutamacı.

Webkit seçicilerinin kullanımı;

Site içerisine gömülmüş bir textarea ve iframe gibi kaydırma çubuğu bulunduran bir alan için de kullanabileceğiniz seçicileri, başına hiç bir şey eklemediğinizde tarayıcı da dahil olmak üzere sitenizin tamamında kullanmış olursunuz. Yukarıdaki listede gördüğünüz 7 seçiciden ihtiyacınız olanı sonrasına eklemek ve sitil tanımlaması yapmak yeterli olacaktır. Birkaç örnek vermek gerekir ise şu işlemler için şu kullanımlar gerekiyor;

Kaydırma çubuğunun genişliğini 10px yapma:

::-webkit-scrollbar {width: 10px;}

Kaydırma çubuğunun rengini değiştirme:

::-webkit-scrollbar-track {background: #f1f1f1;}

Kaydırma çubuğu kolunun rengini değiştirme:

::-webkit-scrollbar-thumb {background: #33363c;}

Kaydırma çubuğu kolunun kenarlarını yuvarlama:

::-webkit-scrollbar-thumb {border-radius: 4px;}

Kaydırma çubuğu kolunun işaretlenmiş (:hover) rengini değiştirme:

::-webkit-scrollbar-thumb:hover {background: #555;}

Kaydırma Çubuğu Seçicilerinin Tarayıcı Uyumlulukları;

Masaüstü Tarayıcılar
Seçiciler
Google Chrome Microsoft Edge Mozilla Firefox Opera Safari Internet Explorer
::-webkit-scrollbarEvetHayırHayır15EvetHayır
::-webkit-scrollbar-buttonEvetHayırHayır15EvetHayır
::-webkit-scrollbar-thumbEvetHayırHayır15EvetHayır
::-webkit-scrollbar-track------
::-webkit-scrollbar-track-pieceEvetHayırHayır15EvetHayır
::-webkit-scrollbar-cornerEvetHayırHayır15EvetHayır
::-webkit-resizerEvetHayırHayır15EvetHayır
Mobil Tarayıcılar
Seçiciler Android Webview Samsung İnternet Google Chrome Microsoft Edge Mozilla Firefox Opera Safari
::-webkit-scrollbarEvetEvetEvetHayırHayır14Evet
::-webkit-scrollbar-buttonEvetEvetEvetHayırHayır14Evet
::-webkit-scrollbar-thumbEvetEvetEvetHayırHayır14Evet
::-webkit-scrollbar-track-------
::-webkit-scrollbar-track-pieceEvetEvetEvetHayırHayır14Evet
::-webkit-scrollbar-cornerEvetEvetEvetHayırHayır14Evet
::-webkit-resizerEvetEvetEvetHayırHayır14Evet

WordPress Shortcode’u Yorum Alanında Çalıştırma

Eğer içeriklerinizde kendi yazdığınız ya da bulduğunuz bir Shortcode kullanıyorsanız bu Shortcode büyük ihtimal ile WordPress‘in yorum alanında çalışmayacaktır. Bunun nedeni ise Shortcode’ların içerik odaklı olarak tasarlanmış olması ve yorum alanı için devre dışı bırakılmış olmasıdır. Sadece sonradan eklenen Shortcode’lar için değil yüklediğiniz eklentiler ile gelen veya kullandığınız temada bulunan çeşitli Shortcode’larda genellikle (içerisinde bir yorum alanı kodu yok ise) yorum alanında çalışmayacaktır.

Wordpress 5.0 ile gelen Gutenberg yazı editörünün yarattığı imkanlar ile klasik Shortcode mantığı yerini Gutenberg editörün block ekleme özelliği alıyor. Böylelikle artık daha az bilgi sahibi olan WordPress kullanıcıları da Shortcode ile uğraşmaksızın görsel düzenleyici üzerinden işlem yapabilecek.

Shortcode’ları yorum alanınında çalıştırmak için ise bir filtre atamanız yeterli olacaktır. Aşağıda yazılı olan php kodlarını temanızın functions.php dosyasında uygun bir yere eklemeniz yeterli olacaktır.

add_filter( 'comment_text', 'do_shortcode' );

Kodları <?php ile ?> arasına eklediğinizden emin oldun. En sona ve en başa eklediğinizde <?php’den önce yada ?>’den sonra eklemiş olacağınız için kodlar çalışmayacak, hatta sitenin açılmamasına sebep olacaktır

:first-child ve :last-child Nasıl Kullanılır?

Özellikle tablolar ve listeler üzerinde çalışan yada çalışmayı düşünenler için oldukça büyük bir öneme sahip olan child (çocuk) seçicilerinin ilk ikisini bu konuda anlatıyoruz. Diğer seçiciler :first-child ve :last-child‘ göre biraz daha üst seviyede yer aldığı için öncelikle bu seçicilerin ne işe yaradığını iyi bir şekilde anlaşıldığından emin olmalısınız.

Child seçicileri isminden de az çok anlaşılacağı gibi birden fazla birbirinin aynısı olan alt bileşenler içerisinde seçili işlem yapmayı sağlıyor. Yani eğer bir bileşene class yada ıd verilmemiş/verilememiş ise ve bu bileşen sıralı ise HTML yerine CSS ile seçmemiz gerekecek demektir. Örnek vermek gerekir ise şu yapıya vereceğimiz CSS komutları tüm bileşenlerde çalışacaktır.

<table>
   <tr>
      <td>satır 1, sütun 1</td>
      <td>satır 1, sütun 2</td>
      <td>satır 1, sütun 3</td>
      <td>satır 1, sütun 4</td>
   </tr>
</table>

Yukarıdaki yapının önizlemesi şu şekilde:

satır 1, sütun 1 satır 1, sütun 2 satır 1, sütun 3 satır 1, sütun 4

Örnek HTML tablo yapısına uyguladığımız CSS kodu şu şekilde:

table td {
    background-color: #33363c;
    color: #ffffff;
}

CSS uygulanmış halinin önizlemesi şu şekilde oluyor:

satır 1, sütun 1 satır 1, sütun 2 satır 1, sütun 3 satır 1, sütun 4

Peki ya biz tablonun tüm sütunlarına bu işlemi uygulamak istemiyorsak? İşte tamda burada child seçicilerini kullanmamız gerekecek. Mesela tablonun ilk sütununu seçmek istersek :first-child seçicisini, son sütununu seçmek istersek de :last-child seçicisini kullanmamız gerekir. Uygulaması ise şu şekilde oluyor;

table td:first-child {
    background-color: #33363c;
    color: #ffffff;
}
satır 1, sütun 1 satır 1, sütun 2 satır 1, sütun 3 satır 1, sütun 4
table td:last-child {
    background-color: #33363c;
    color: #ffffff;
}
satır 1, sütun 1 satır 1, sütun 2 satır 1, sütun 3 satır 1, sütun 4

Biz her ne kadar bu konuyu tablolar üzerinden anlatıyor olsak da HTML yapısı gereği bir çok yerde bu çözüme ihtiyaç duyulmaktadır, mesela buna örnek vermek gerekir ise sitelerde bulunan yatay veya dikey menüler diyebiliriz. Bir çok menü otomatik id ile ayrışmış olsa da menüde bir değişiklik olduğunda bu id değeri değişeceği ya da silineceği için CSS kodları boşta kalacaktır, bu nedenle kalıcı çözüm için CSS ile ilk ve son çocuk seçicisini kullanarak kodlama yapmak daha mantıklı olacaktır.

Konuyu biraz da zenginleştirip tek satırdan oluşmayan bir tablo kullanarak örneklendirmek gerekir ise örnek HTML kodumuz yazının bu kısmında değişerek şu şekli alıyor;

<table>
   <tr>
      <td>satır 1, sütun 1</td>
      <td>satır 1, sütun 2</td>
      <td>satır 1, sütun 3</td>
      <td>satır 1, sütun 4</td>
   </tr>
   <tr>
      <td>satır 2, sütun 1</td>
      <td>satır 2, sütun 2</td>
      <td>satır 2, sütun 3</td>
      <td>satır 2, sütun 4</td>
   </tr>
   <tr>
      <td>satır 3, sütun 1</td>
      <td>satır 3, sütun 2</td>
      <td>satır 3, sütun 3</td>
      <td>satır 3, sütun 4</td>
   </tr>
   <tr>
      <td>satır 4, sütun 1</td>
      <td>satır 4, sütun 2</td>
      <td>satır 4, sütun 3</td>
      <td>satır 4, sütun 4</td>
   </tr>
</table>

4 satırlık yeni tablomuz şu şekilde görünüyor:

satır 1, sütun 1 satır 1, sütun 2 satır 1, sütun 3 satır 1, sütun 4
satır 2, sütun 1 satır 2, sütun 2 satır 2, sütun 3 satır 2, sütun 4
satır 3, sütun 1 satır 3, sütun 2 satır 3, sütun 3 satır 3, sütun 4
satır 4, sütun 1 satır 4, sütun 2 satır 4, sütun 3 satır 4, sütun 4

Aynı CSS kodlarını kullandığımızda sonuç şu şekilde oluyor:

table td:first-child {
    background-color: #33363c;
    color: #ffffff;
}
satır 1, sütun 1 satır 1, sütun 2 satır 1, sütun 3 satır 1, sütun 4
satır 2, sütun 1 satır 2, sütun 2 satır 2, sütun 3 satır 2, sütun 4
satır 3, sütun 1 satır 3, sütun 2 satır 3, sütun 3 satır 3, sütun 4
satır 4, sütun 1 satır 4, sütun 2 satır 4, sütun 3 satır 4, sütun 4
table td:last-child {
    background-color: #33363c;
    color: #ffffff;
}
satır 1, sütun 1 satır 1, sütun 2 satır 1, sütun 3 satır 1, sütun 4
satır 2, sütun 1 satır 2, sütun 2 satır 2, sütun 3 satır 2, sütun 4
satır 3, sütun 1 satır 3, sütun 2 satır 3, sütun 3 satır 3, sütun 4
satır 4, sütun 1 satır 4, sütun 2 satır 4, sütun 3 satır 4, sütun 4

Peki ya ilk ve son sütun yerine ilk ve son satırı seçmek istenir ise ne yapmak gerekir derseniz çözüm çok basit. Sütunları oluşturan tablo bileşeni td yerine satırları oluşturan tr üzerinde seçme işlemi yapmamız gerekiyor. Yani td:first-child yerine tr:first-child ve td:last-child yerine tr:last-child gelmesi gerekiyor. Örnekler ise şu şekilde;

table tr:first-child {
    background-color: #33363c;
    color: #ffffff;
}
satır 1, sütun 1 satır 1, sütun 2 satır 1, sütun 3 satır 1, sütun 4
satır 2, sütun 1 satır 2, sütun 2 satır 2, sütun 3 satır 2, sütun 4
satır 3, sütun 1 satır 3, sütun 2 satır 3, sütun 3 satır 3, sütun 4
satır 4, sütun 1 satır 4, sütun 2 satır 4, sütun 3 satır 4, sütun 4
table tr:last-child {
    background-color: #33363c;
    color: #ffffff;
}
satır 1, sütun 1 satır 1, sütun 2 satır 1, sütun 3 satır 1, sütun 4
satır 2, sütun 1 satır 2, sütun 2 satır 2, sütun 3 satır 2, sütun 4
satır 3, sütun 1 satır 3, sütun 2 satır 3, sütun 3 satır 3, sütun 4
satır 4, sütun 1 satır 4, sütun 2 satır 4, sütun 3 satır 4, sütun 4

Buraya kadar her şey tamam ise seviye atlamanın da zamanı geldi demektir. İlk ve sonlar için bu seçiciler her zaman yeterli olacaktır, ancak birde herhangi bir satır ve sütünü tek olarak seçme durumu var ki orada devre farklı bir CSS seçicisi giriyor. Bu durumlarda kullanılan CSS seçicisi ise :nth-child() ve bu seçiciden türeyen :nth-last-child().

Bu seçici ile ilgili ise yakın zamanda bir yazılı anlatım hazırlayıp sizlere bu seçicinin de nasıl kullanıldığını anlatacağız. Daha fazlası için bizi takip etmeyi unutmayın, :nth-child() ve :nth-last-child() ile ilgili bir içerik yayınlandığında ise bağlantısı hemen altta yer alacak! Eğer var ise yayınlamışız demektir ;)

Masaüstü Tarayıcılar
Seçiciler
Google Chrome Microsoft Edge Mozilla Firefox Opera Safari Internet Explorer
:first-child4.0+Evet3.0+9.5+3.1+7.0+
:last-child4.0+Evet3.0+9.5+3.2+9.0+
Mobil Tarayıcılar
Seçiciler Android Webview Samsung İnternet Google Chrome Microsoft Edge Mozilla Firefox Opera Safari
:first-childEvetEvetEvetEvet4.0+9.5+4.0+
:last-childEvetEvetEvetEvet4.0+10.0+3.2+

Diğer seçiciler ile ilgili bilgi sahibi olmak isterseniz alttaki bağlantıdan tüm CSS seçicilerinin olduğu listeye ulaşabilirsiniz.

:active Nasıl Kullanılır?

Bu konumuzda CSS’de bulunan bir çok seçici arasında belkide en çok kullanılan seçicilerden biri olan :active seçicisinin ne işe yaradığını ve kullanım çeşitlerini anlatıyor olacağız.

Her ne kadar :hover seçicisi kadar kullanılmasa da :active seçicisinin de CSS’de oldukça önemli bir görevi var. Mouse ile bir alanın üzerine geldiğimizde alanın veya işaret ettiğimiz farklı bir alanın stilini değiştirmek için nasıl :hover seçicisini kullanıyorsak, :active seçicisi ile de bu stil değişimini tıklandığında aktif olacak hale getirebiliriz. Yani bir div, id veya benzeri bir alanı :active seçicisi ile seçtiğimizde CSS’de tanımladığımız stil komutları seçili alana tıklandığında aktif olacak ve tıklamayı bırakana kadarda aktif kalmaya devam edecektir. Sadece tıklandığı sürece aktif olan bu seçici genellikle bağlantılarda kullanılıyor. Hani şu bağlantıya tıklandığımızda yanar da söner ya, işte o genellikle CSS ile yapılır ve :active seçicisi kullanılır.

CSS :active seçicisini Örnekler ile anlatacak olursak;

Örnek olarak iki bağlantı oluşturup bu bağlantılardan birine :active seçicisi ile CSS komutu tanımlarsak, tanımlanan bağlantıya tıkladığımızda bağlantı reaksiyon göstererek tıklandığını belli eder;

<a class="hedef-1" href="#">Dünya'ya gider</a>
<a class="hedef-2" href="#">Venüs'e gider</a>
.hedef-2:active {
	background-color: #000000;
	color: #FF0000;
}

Yukarıdaki örnekte hedef-2 içeriğindeki “Venüs’e gider” bağlantısına tıklandığında bağlantının rengi kırmızı olurken arkaplan rengi ise siyah olacaktır. Ayrıca aşağıdaki HTML kullanımı ile de aynı CSS kodları “Venüs’e gider” bağlantısının arkaplanını siyah yapıp bağlantıyı kırmızı yapacaktır.

<div class="hedef-1">
	<a href="#">Dünya'ya gider</a>
</div>
<div class="hedef-1">
	<a class="hedef-2" href="#">Venüs'e gider</a>
</div>

Bağlantılar için kullanılabildiği gibi :active seçicisi aynı zamanda herhangi bir alan için kullanmakta aşağıdaki örnekte gördüğünüz gibi mümkündür:

<div class="alan-1">Burada her şey olabilir!</div>
<div class="alan-2">Burada her şeyden fazlası olabilir!</div>
.alan-1:active {
	background-color: #000000;
	color: #FFFFFF;
}

Bu şekilde kullanıldığında alan-1‘e tıklandığında arkaplan rengi siyah olurken aynı zamanda yazı rengi beyaz olacaktır.

:active seçicisini destekleyen tarayıcı sürümleri;

Masaüstü Tarayıcılar
Google Chrome
Google Chrome
1.0+
Microsoft Edge
Microsoft Edge
Evet
Mozilla Firefox
Mozilla Firefox
1.0+
Internet Explorer
Internet Explorer
4.0+
Opera
Opera
5.0+
safari
Safari
1.0+
Mobil Tarayıcılar
Android Webview
Android Webview
1+
Samsung İnternet
Samsung İnternet
-
Google Chrome
Google Chrome
-
Microsoft Edge
Microsoft Edge
Evet
Mozilla Firefox
Mozilla Firefox
4+
Opera
Opera
6+
safari
Safari
1+

Diğer seçiciler ile ilgili bilgi sahibi olmak isterseniz alttaki bağlantıdan tüm CSS seçicilerinin olduğu listeye ulaşabilirsiniz.

WordPress Gutenberg’den Klasik/Eski Editöre Geçme

Önceki yazımızda WordPress 5.0 ile kalıcı hale gelen Gutenberg editörünün genişliğini nasıl arttırıp azaltabileceğinizi ve dışarıdan çağrılan sitil dosyası ile Gutenberg editör sayfasını nasıl düzenleyebileceğini anlatmıştık. Bu yazımda ise Gutenberg editöründen tamamen nasıl kurtulabileceğinizi ve eski editöre nasıl geçiş yapabileceğini anlatıyoruz, üstelik eski bir WordPress sürümü yüklemenize gerek kalmayacak.

WordPress bizlere 5.0 güncellemesinden önce beta test amacı ile Gutenberg editörünü bir eklenti ile sunmuştu, dileyenler Gutenberg editörü kalıcı hale gelmeden önce bu eklentiyi kurarak Gutenberg editörünü önceden test edebiliyorlardı. Gelen 5.0 güncellemesi ile de bu durum tam tersine döndü. Şimdi ise Classic Editor eklentisini yükleyerek eski editöre geri dönmüş oluyoruz.

Şahsen biz yeniliklere açık olduğumuz için Gutenberg ile yolumuza devam etmeyi tercih ediyoruz. Bir çok yenilik ile bizlerle birlikte olan Gutenberg editöründen yinede memnun kalmadıysanız normal eklenti yükleme mantığında hareket ederek Türkçe ismi ile Klasik düzenleyici’yi aşağıdaki bağlantıdan yükleyebilir ve klasik görünüme dönüş yapabilirsiniz.