CSS: HTML Sayfasında Nesne Seçmek İçin Seçiciler


HTML sayfalarında CSS ile nesneleri seçmek için CSS’de bir çok seçicisi kullanılabilir. Sayfa nesnelerini seçerken CSS kodları bizlere oldukça yardımcı olacaktır. Bu yazıda kullanabileceğiniz tüm CSS seçicileri açıklanmıştır.

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
}

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
}

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
}

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
}

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
}

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 :visited seç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
}

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
}

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
}

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
}

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
}

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

}

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

}

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

}

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

}

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

}

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

}

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- ‘

}

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

}

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

}

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

}
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
}

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
}

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
}

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
}

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
}

26) X:only-of-type

icon surprised CSS: HTML Sayfasında Nesne Seçmek İçin Seçiciler nly-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
}

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
}

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
}

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
}

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
}
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
}

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
}

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
}

34) :root

Bu seçici <html> 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
}

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
}

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
}

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
}

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
}

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
}

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
}