Tayfun Erbilen

CSS’de seçicilere kaldığımız yerden devam ediyoruz.. Bu dersimizde aşağıdaki seçicileri öğreneceğiz;

• X:focus
• X:active
• X:lang(Y)
• :root
• X:empty
• X:target
• X:enabled
• X:disabled
• X:valid
• X:invalid
• ::selection

CSS’de seçicilere kaldığımız yerden devam ediyoruz..
(1~10) Seçicilerine ulaşmak için tıklayın.
(11~20) Seçicilerine ulaşmak için tıklayın.
(21~30) Seçicilerine ulaşmak için tıklayın.

31) X:focus

Seçilen X nesnesine odaklandığında işlem yapmak için kullanılır.

/*
 * Input nesnesine odaklandığında
 * arkaplan regini sarı yapar
 */
input:focus {
    background-color: yellow
}

Tarayıcı DesteğiIE8+, Firefox, Chrome, Safari, Opera

32) X:active

Aktif olan X nesnelerini seçmek için kullanılır.

/*
 * Linkle tıklandığında
 * arkaplan regini sarı yapar
 */
a:active {
    background-color: yellow
}

Tarayıcı DesteğiIE5+, Firefox, Chrome, Safari, Opera

Not: IE5-IE7 sürümlerinde çalışıyor ancak sadece link nesnesi için çalışıyor.

33) X:lang(Y)

X nesnelerinde lang niteliği Y ile başlayanları seçmek için kullanılır.

/*
 * p nesnelerinde lang niteliği tr ile başlayanları
 * seçer ve arkaplan rengini kırmızı yapar
 */
p:lang(tr) {
    background-color: red
}

Tarayıcı DesteğiIE8+, Firefox, Chrome, Safari, Opera

34) :root

Bu seçici &lthtml> etiketi üzerinde işlem yapmamızı sağlar. Kısaca ana nesneyi seçmek için kullanılır.

/*
 * sayfanın arkaplan rengini
 * kırmızı yapar
 */
:root {
    background-color: red
}

Tarayıcı DesteğiIE9+, Firefox, Chrome, Safari, Opera

35) X:empty

Hiçbir nesne ve karakter bulundurmayan X nesnelerini seçmek için kullanılır.

/*
 * İçerisinde hiçbir nesne, karakter olmayan
 * divleri seçer ve yükseklik vererek
 * arkplan rengini sarı yapar
 */
div:empty {
    height: 30px;
    background-color: yellow
}

Tarayıcı DesteğiIE9+, Firefox, Chrome, Safari, Opera

36) X:target

Hedef olan X nesnelerini seçmek için kullanılır.

/*
 * id'si test olan div nesnesi hedeflendiğinde
 * arkplan rengini sarı renk yapar
 */
#test:target {
    background-color: yellow
}

Tarayıcı DesteğiIE9+, Firefox, Chrome, Safari, Opera

37) X:enabled

X form nesnelerinde seçilebilir/yazılabilir olanları seçmek için kullanılır.

/*
 * input nesnelerinde seçilebilir olanların
 * sonrasında gelen labellere arkaplan uygular
 */
input:enabled + label {
    background-color: #eee
}

Tarayıcı DesteğiIE9+, Firefox, Chrome, Safari, Opera

38) X:disabled

X form nesnelerinde pasif (işlem yapılamaz) olanları seçmek için kullanılır.

/*
 * Pasif olan input nesnelerinden sonra gelen label
 * nesnelerini seçer ve arkaplan rengini kırmızı yapar
 */
input:disabled + label {
    background-color: red
}

Tarayıcı DesteğiIE9+, Firefox, Chrome, Safari, Opera

39) X:valid

X nesnelerinde istenilen formata uyan nesneleri seçmek için kullanılır.
(Sadece form nesneleri için geçerlidir)

/*
 * Geçerli formatta veri girilmiş
 * input nesnelerine işlem yapar
 */
input:valid {
    background-color: green
}

Tarayıcı DesteğiIE10+, Firefox, Chrome, Safari, Opera

40) X:invalid

X nesnelerinde istenilen formata uymayan nesneleri seçmek için kullanılır.
(Sadece form nesneleri için geçerlidir)

/*
 * Geçersiz formatta veri girilmiş
 * input nesnelerine işlem yapar
 */
input:invalid {
    background-color: red
}

Tarayıcı DesteğiIE10+, Firefox, Chrome, Safari, Opera

41) ::selection

Seçilen ifadelerin (arkplan ve yazı renginde) değişiklik yapmak için kullanılır.

/*
 * p nesnelerinde seçilen yazıların
 * arkaplan rengini değiştirir
 */
p::selection {
    background-color: yellow
}
/* firefox için (-moz) ön eki gereklidir */
p::-moz-selection {
    background-color: yellow
}

Tarayıcı DesteğiIE9+, Firefox (-moz), Chrome, Safari, Opera

CSS’de seçicilere kaldığımız yerden devam ediyoruz.. Bu dersimizde aşağıdaki seçicileri öğreneceğiz;

• X:nth-child(n)
• X:nth-last-child(n)
• X:nth-of-type(n)
• X:nth-last-of-type(n)
• X:only-child
• X:only-of-type
• X:first-child
• X:last-child
• X:first-of-type
• X:last-of-type

CSS’de seçicilere kaldığımız yerden devam ediyoruz..
(1~10) Seçicilerine ulaşmak için tıklayın.
(11~20) Seçicilerine ulaşmak için tıklayın.
(31~41) Seçicilerine Ulaşmak İçin Tıklayın.

21) X:nth-child(n)

X nesneleri içerisinde N.yi seçer.

/*
 * Li nesneleri içinde ikincisini
 * seçer ve regini kırmızı yapar
 */
ul li:nth-child(2) {
    color: red
}

Tarayıcı DesteğiIE9+, Firefox 3.5+, Chrome, Safari, Opera

22) X:nth-last-child(n)

X nesneleri içerisinde sondan N.yi seçer.

/*
 * Li nesneleri içinde sondan 1.yi
 * seçer ve regini mavi yapar
 */
ul li:nth-last-child(2) {
    color: blue
}

Tarayıcı DesteğiIE9+, Firefox 3.5+, Chrome, Safari, Opera

23) X:nth-of-type(n)

X nesnelerinde n.yi seçmek için kullanılır. :nth-child’dan farkını öğrenmek için videoya göz atın.

/*
 * Div içerisindeki 2. spanları
 * seçer ve rengini kırmızı yapar
 */
div span:nth-of-type(2){
    color: red
}

Tarayıcı DesteğiIE9+, Firefox 3.5+, Chrome, Safari, Opera

24) X:nth-last-of-type(n)

:nth-of-type ile aynıdır.. Tek farkı sondan başlayarak nesneleri seçmesidir..

/*
 * Div içerisindeki sondan 1. spanları
 * seçer ve rengini kırmızı yapar
 */
div span:nth-last-of-type(2){
    color: red
}

Tarayıcı DesteğiIE9+, Firefox 3.5+, Chrome, Safari, Opera

25) X:only-child

X nesnesi sadece bir tane olanları seçer.. Ancak onun dışında farklı bir nesne bile olmaması gerekir.. Yoksa seçmeyecektir.

/*
 * div içinde bir tane p etiketi (tek nesne) var ise
 * onu seçer ve arkaplan rengini sarı yapar
 */
div p:only-child {
    background-color: yellow
}

Tarayıcı DesteğiIE9+, Firefox, Chrome, Safari, Opera

26) X:only-of-type

:only-child seçicisinin aksine, X nesnesi sadece bir tane olan nesneleri seçer.. Farklı nesnelerin olması bu durumu etkilemez..

/*
 * div içinde bir tane p etiketi var ise
 * onu seçer ve arkaplan rengini sarı yapar
 */
div p:only-of-type {
    background-color: yellow
}

Tarayıcı DesteğiIE9+, Firefox 3.5+, Chrome, Safari, Opera

27) X:first-child

İlk X nesnesini seçmek için kullanılır.

/*
 * İlk li nesnesini seçer ve
 * rengini kırmızı yapar
 */
ul li:first-child {
    color: red
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

28) X:last-child

Son X nesnesini seçmek için kullanılır.

/*
 * Son li nesnesini seçer ve
 * rengini kırmızı yapar
 */
ul li:last-child {
    color: red
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

29) X:first-of-type

İlk X nesnesini seçmek için kullanılır. :first-child seçicisinden farklı olarak, tipi eşleşen ilk nesneyi seçer.

/*
 * Divler içinde ilk p nesnesini
 * seçer ve rengini kırmızı yapar
 */
div p:first-of-type {
    color: red
}

Tarayıcı DesteğiIE9+, Firefox 3.5, Chrome, Safari, Opera

30) X:last-of-type

Son X nesnesini seçmek için kullanılır. :last-child seçicisinden farklı olarak, tipi eşleşen son nesneyi seçer.

/*
 * Divler içinde son p nesnesini
 * seçer ve rengini kırmızı yapar
 */
div p:last-of-type {
    color: red
}

Tarayıcı DesteğiIE9+, Firefox 3.5, Chrome, Safari, Opera

CSS’de seçicilere kaldığımız yerden devam ediyoruz.. Bu dersimizde aşağıdaki seçicileri öğreneceğiz;

• X[Y=’Z’]
• X[Y*=’Z’]
• X[Y^=’Z’]
• X[Y$=’Z’]
• X[Y~=’Z’]
• X:checked
• X::before ve X::after
• X:hover
• X:not(Y)
• X::first-letter ve X::first-line

CSS’de seçicilere kaldığımız yerden devam ediyoruz..
(1~10) Seçicilerine Ulaşmak İçin Tıklayın.
(21~30) Seçicilerine Ulaşmak İçin Tıklayın.
(31~41) Seçicilerine Ulaşmak İçin Tıklayın.

11) X[Y=’Z’]

X Nesnelerinde y niteliği z’ye eşit olan nesneleri seçmek için kullanılır.

/*
 * title niteliği test'e eşit olan linkleri
 * seçip yazı rengini kırmızı yapar
 */
a[title='test'] {
    color: red
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

12) X[Y*=’Z’]

X Nesnelerinde Y niteliğinde Z ifadesi geçen nesneleri seçmek için kullanılır.

/*
 * title niteliğinde 'test' ifadesi geçen
 * linkleri seçip yazı rengini mavi yapar
 */
a[title*='test'] {
    color: darkblue
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

13) X[Y^=’Z’]

X Nesnelerinde Y niteliği Z ile başlayan nesneleri seçmek için kullanılır.

/*
 * href niteliği 'http' ile başlayan
 * linkleri seçip yazı rengini kırmızı yapar
 */
a[href^='http'] {
    color: red
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

14) X[Y$=’Z’]

X Nesnelerinde Y niteliği Z ile biten nesneleri seçmek için kullanılır.

/*
 * href niteliği '.net' ile biten linkleri
 * seçip yazı rengini kırmızı yapar
 */
a[href$='.net'] {
    color: red
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

15) X[Y~=’Z’]

X Nesnelerinde Y niteliğinde Z ifadesi geçen nesneleri seçmek için kullanılır. X[Y*=’Z’] seçicisinden farklı olarak Z ifadesi doğrudan bir ifade ise seçilir.. Yani “test” ifadesi geçen nesneleri seçeceksek “testettik” ifadesi içeren bir nesneyi bu seçici ile değil X[Y*=’Z’] seçicisi ile seçebiliriz.

/*
 * Title niteliğinde 'test' ifadesi geçen
 * linkleri seçip rengini kırmızı yapar
 */
a[title~='test'] {
    color: red
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

16) X:checked

X form nesnelerinde seçili olanları seçmek için kullanılır.

/*
 * tipi radio olan inputlarda seçili olandan sonra
 * gelen labeli seçip arkaplan rengini sarı yapar
 */
input[type=radio]:checked + label {  
   background-color: yellow
}

Tarayıcı DesteğiIE9+, Firefox, Chrome, Safari, Opera

17) X::before ve X::after

Nesnenin öncesine ve sonrasına bir şeyler eklemek için kullanılır.

/*
 * Liste etiketlerinin öncesine
 * - ifadesini ekler
 */
ul li::before {
    content: '-'
}

/*
 * Liste etiketlerinin sonrasına
 * -son- ifadesini ekler
 */
ul li::after {
    content: ' -son- '
}

Tarayıcı DesteğiIE8+, Firefox, Chrome, Safari, Opera

18) X:hover

Seçilen nesnenin üzerine fare geldiğinde işlem yapılması için kullanılır.

/*
 * Link nesnesinin üzerine fare ile
 * geldiğinde arkaplan rengini sarı yapar
 */
a:hover {
    background-color: yellow
}

Tarayıcı DesteğiIE6+, Firefox, Chrome, Safari, Opera

19) X:not(Y)

:not seçicisi, değilse anlamına gelmektedir.. Yani bir div seçsin ama sınıfı test değilse gibi..

/*
 * Sınıfı erbilen olan ama id'si test olmayan
 * div nesnelerini seçer ve arkaplan rengini sarı yapar
 */
.erbilen:not(#test) {
    background-color: yellow
}

Tarayıcı DesteğiIE9+, Firefox, Chrome, Safari, Opera

20) X::first-letter ve X::first-line

X nesnesinin ilk harfini seçip işlem yapmak için ::first-letter,
X nesnesinin ilk satırını seçip işlem yapmak için ::first-line kullanılır.

/*
 * div nesnesinin ilk harfinin
 * boyutunu 30px yapar
 */
div::first-letter {
    font-size: 30px
}

/*
 * div nesnesinin ilk satırının
 * arkaplan rengini sarı yapar
 */
div::first-line {
    background-color: yellow
}

Tarayıcı DesteğiIE6+, Firefox, Chrome, Safari, Opera

HTML sayfasında nesneleri seçmek için CSS’de bir çok seçici bulunmaktadır.. Sırasıyla tüm bu seçicileri öğreneceğiz ancak bölümler halinde öğreneceğiz.. Bu bölümde aşağıdaki seçicileri öğreneceğiz;

• * (Evrensel Seçici)
• #X (ID “Tekil” Seçici)
• .X (Sınıf Seçici)
• X Y (Torun Seçici)
• X (Basit Seçici)
• X:link ve X:visited (Sözde Sınıf Seçicileri)
• X + Y (Bitişik Seçici)
• X > Y (Çocuk Seçici)
• X ~ Y
• X[Y] (Nitelik Seçici)

HTML sayfasında nesneleri seçmek için CSS’de bir çok seçici bulunmaktadır.. Sırasıyla tüm bu seçicileri öğreneceğiz ancak bölümler halinde öğreneceğiz.. Bu bölümde aşağıdaki seçicileri öğreneceğiz;

1) * (Evrensel Seçici)

Tüm nesneleri seçmek için kullanılır.

/*
 * tüm nesneleri seçer ve rengini kırmızı yapar
 */
* {
     color: red
}

.. ya da bir nesne içerisindeki tüm nesneleri seçmek için ..

/*
 * divlerden sınıfı erbilen olan divin içindeki tüm nesneleri
 * seçer ve yazıların altını çizer
 */
div.erbilen * {
     text-decoration: underline
}

Tarayıcı DesteğiIE6+, Firefox, Chrome, Safari, Opera

2) #X (ID “Tekil” Seçici)

Id niteliği x’e eşit olan nesneleri seçmek için kullanılır.

/*
 * erbilen id'li paragrafı seçer ve rengini kırmızı yapar
 */
p#erbilen {
     color: red
}

Tarayıcı DesteğiIE6+, Firefox, Chrome, Safari, Opera

3) .X (Sınıf Seçici)

Class niteliği x’e eşit olan nesneleri seçmek için kullanılır.

/*
 * erbilen sıınflı a nesnesini seçer ve rengini mavi yapar
 */
a.erbilen {
     color: blue
}

Tarayıcı DesteğiIE6+, Firefox, Chrome, Safari, Opera

4) X Y (Torun Seçici)

X nesnesinde bulunan Y nesnelerini seçmek için kullanılır.

/*
 * test sınıflı nesne içerisinde bulunan
 * a nesnesini seçip arka plan rengini sarı yapar
 */
.test a {
     background-color: yellow
}

Tarayıcı DesteğiIE6+, Firefox, Chrome, Safari, Opera

5) X (Basit Seçici)

Herhangi bir niteliği olmayan doğrudan X nesnesini seçmek için kullanılır.

/*
 * a nesnelerini seçip alt çizgilerini kaldırır
 */
a {
     text-decoration: none
}

Tarayıcı DesteğiIE6+, Firefox, Chrome, Safari, Opera

6) X:link ve X:visited (Sözde Sınıf Seçicileri)

Daha önce tıklanmamış linkler üzerinde işlem yapmak için :link seçicisi kullanılır.
Ziyaret edilen (tıklanan) linkler üzerinde işlem yapmak için ise :visitedseçicisi kullanılır.

/*
 * Tıklanmamış a nesnelerini seçip
 * arkaplan rengini sarı yapar
 */
a:link {
     background-color: yellow
}
/*
 * Ziyaret edilmiş a nesnelerini seçip
 * arkaplan rengini mor yapar
 */
a:visited {
     background-color: purple
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

7) X + Y (Bitişik Seçici)

X nesnesinden hemen sonra gelen Y nesnesini seçmek için kullanılır.

/*
 * ul nesnesinden hemen sonra gelen p nesnesini
 * seçer ve yazı rengini kırmızı yapar
 */
ul + p {
     color: red
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

8) X > Y (Çocuk Seçici)

X Y (Torun Seçici) den farklı olarak, X > Y (Çocuk Seçici) doğrudan X nesnesinin içinde bulunan Y çocuk nesnelerini seçmek için kullanılır.

/*
 * Sınıfı liste olan ul içinde bulunan
 * li çocuk nesnelerini seçip kenarlık ekler
 */
ul.liste > li {
     border: 1px solid #ddd
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

9) X ~ Y

X + Y (Bitişik Seçici)’den farklı olarak bu seçici, X nesnesinden sonra gelen tüm Y (ebeveyn) nesnelerini seçmek için kullanılır.

/*
 * ul nesnesinden sonra gelen p (ebeveyn) nesnelerini
 * seçer ve renklerini kırmızı yapar
 */
ul ~ p {
     color: red
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

10) X[Y] (Nitelik Seçici)

X nesnesine ait Y niteliği bulunan nesneleri seçmek için kullanılır.

/*
 * a nesneleri içerisine title niteliği 
 * bulunanları seçip rengini kırmızı yapar
 */
a[title] {
     color: red
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

(11~20) Seçicilerine Ulaşmak İçin Tıklayın.
(21~30) Seçicilerine Ulaşmak İçin Tıklayın.
(31~41) Seçicilerine Ulaşmak İçin Tıklayın.

İlk CSS derslerimi 2011 yılında 14 bölümlük bir seri halinde hazırlamıştım.. Ancak aradan uzun bir zaman geçti ve bir çok şey gelişti, değişti.. Bu sebepten dolayı dersleri yeniden çekmeye karar verdim.. Bu ilk dersimizde ise aşağıdaki sorulara cevap bulacağız;

• CSS Nedir?
• CSS Dosyası Nasıl Oluşturulur?
• CSS Dosyası HTML Sayfasına Nasıl Çağrılır?
• HTML Sayfasında Inline CSS Nasıl Yazılır?
• CSS’in Genel Yapısı
• CSS’de Açıklama Satırı
• CSS Hataları Hakkında

Okumaya devam et “CSS: Giriş”