CSS, bir seçici ve bir bildiri blogundan oluşur. Seçici, HTML ile oluşturulan web sayfalarında yer alan elementlere verilen biçim özelliklerini işaretlemeye yarar. Bildiri blogu ise seçicilere atanan bir veya daha fazla özelliği içeren bildirilerden oluşur. Eğer bir seçiciye birden fazla bildiri atanacaksa, bunlar birbirinden ';' ile ayrılır. Her biri bir 'özellik adı' ve bir 'değer'den oluşan bildiri grupları, '{}' sembolü arasında gruplanır.
Örneğin; HTML kodu
<a>
</a>şeklinde olan bir a elementini
a { }şeklinde seçeriz.
HTML etiketinin id özelliğini kullanır. ID, sayfa içinde bir tane olmalıdır. Bir HTML kodu içerisinde id özelliği
<... id="unique"/>şeklinde kullanılır ve css ile
#unique {}şeklinde seçilir.
Sınıf seçici, aradığı elemanları HTML sınıf özelliğine göre arar.
<... class="intro"/>HTML kodunu CSS ile seçmek için '.' sembolü kullanılır.
.intro {}Aynı sınıfa (class) ait birden fazla eleman varsa bunlardan birini seçmek için sınıf seçici aşağıdaki şekilde kullanılır:
<a class="combine"/>
<b class="combine"/>
<c class="combine"/>HTML koduna sahip elementlerden b' nin sınıfını seçmek için
b.c {}CSS kodu kullanılır.
Diyelim ki aşağıdaki kodda a elemanının içindeki tüm b elemanlarının rengini yeşil yapmak istiyoruz. Normalde bu işlem her bir b elemanı için bir font tanımlayarak yapılabilir ancak descendant (torun) seçici aşağıdaki
<a>
<b>
<a/><b/>
</b>
<b>
<a/><b/>
</b>
</a>HTML kodunu "a' nın altındaki tüm b' ler için rengi yeşil yap." anlamına gelebilecek
a b {
color: green;
}şeklinde seçmeye yarar. Descendant (torun) seçici, id ve class özellikleriyle de kullanılabilir. Örnek (id):
<a id="a">
<b>
<a/><b/>
</b>
<b>
<a/><b/>
</b>
</a>kodunda id="a" özelliği taşıyan elementin altındaki tüm b' lerin rengini kırmızı yapmak için
#a b {
color: red;
}yazarız.
Örnek (class):
<a class="a">
<b>
<a/><b/>
</b>
<b>
<a/><b/>
</b>
</a>kodunda class="b" özelliği taşıyan elementin altındaki tüm b' lerin rengini beyaz yapmak için
.a b {
color: red;
}yazarız.
Diyelim ki HTML kodunuzdaki h1, h2 ve p elementlerine color: green; özelliğini eklemek istiyorsunuz. Bunun için aşağıdaki gibi elementleri tek tek seçip her birine bu özelliği atamak yerine aralarına virgül (,) koyarak yazarsak kodu sadeleştirmiş ve kolay okunabilir bir hale getirmiş oluruz. Yani;
h1 {color: green;}
h2 {color: green;}
p {color: green;}yerine
h1, h2, p {color: green;}Ayrıca elementleri bir grup halinde seçip özellik atama işlemine 'gruplama' denir.
Evrensel seçici, tüm HTML elemanlarını seçmek için kullanılır. Örneğin bir HTML sayfasında aşağıdaki kod yer alıyor olsun.
<h1>Evrensel Seçici</h1>
<p>
<em>Evrensel seçici,</em>
<strong>tüm HTML elemanlarını</strong>
seçmek için kullanılır.
</p>Diyelim ki bu sayfadaki tüm elemanlara {color: pink;} özelliğini atamak istiyoruz. Sayfadaki tüm elemanları gruplayarak istediğimiz özelliği atamak, daha geniş içerikli bir HTML sayfası için kullanışlı olmayacaktır. Sayfadaki tüm elementleri ' * ' sembolü ile
* { color: pink; }şeklinde yazarak seçeriz.
Evrensel seçici, bir elementin altındaki tüm elementleri seçmek için de kullanılabilir. Yukarıdaki örnekte p elementinin altındaki em ve strong elementlerine {font-size: 20px;} özelliğini atayalım:
p * {font-size: 20px;}Komşu seçici, kendisinden sonra gelen ilk elementi seçmek için kullanılır ve iki element birbirine '+' sembolü ile bağlanır.
Örnek: Diyelim ki
<div>
<h1>Başlık</h1>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
<p>Paragraf 3</p>
<p>Paragraf 4</p>
</div>kodunda h1 elementinin altındaki p elementinin kırmızı olmasını istiyoruz.Bunu sağlayan CSS kodu aşağıdaki gibi olur:
h1+p {color: red;}Kardeş seçici, kendisinden sonra gelen tüm elementleri seçmek için kullanılır ve iki element birbirine '~' sembolü ile bağlanır.
Diyelim ki yukarıdaki örnekte yer alan HTML kodundaki h1 elementinden sonraki tüm p elementlerine {background-color: yellow;} özelliğini atamak istiyoruz. Bunun için yazılması gereken CSS kodu aşağıdaki gibidir:
h1~p {background-color: yellow;}Çocuk seçici, bir elemanın alt seviyesinde bulunan tüm elemanları seçmeye yarar ve iki eleman arasında ">" sembolü kullanılır. parent>child {} formundadır.
Örneğin; yukarıdaki HTML kodunda div elementinin çocuğu konumundaki tüm h1 elementlerine {text-decoration: underline;} özelliğini atayalım:
div>h1 {text-decoration: underline;}elementleri CSS'i destekleyen web tarayıcıları tarafından otomatik olan tanınan özel elementlerdir. elementi, bir elementi alt sınıflara (bir paragrafın ilk satırı gibi) böler. *
HTMLelementi:first-child {} formundadır. Aşağıda seçicileri birer örnekle açıklamaya çalışalım:
<ul>
<li>un vélo</li>
<li>un train</li>
<li>une voiture</li>
<li>un avion</li>
<li>un bateau</li>
</ul>HTML kodunda ilk li elementinin arkaplan rengini yeşil yapalım:
li:first-child {background-color: green;}Yukarıdaki HTML kodunda son li elemanının rengini pembe yapalım:
li:last-child {color: pink;}Yukarıdaki HTML kodunda ul elementinin altındaki tüm elementlerin arkaplan rengini sarı yapalım:
ul:only-child {background-color: yellow;}n ile bildirilen aynı düzeydeki elementleri seçmek için kullanılır. Index numarasına göre seçim yapılır ve index sıfırdan başlamaz. Bir parent elementin altındaki elementten bahsetmiyorsak tüm body elementler arasından seçim yapar. Bir parent elementin altındaki child elementlerden bahsediyorsak bu parent elementler arasında seçim yapar. ** Örneğin;
<div class="container">
<ul class="list-group">
<li class="list-group-item">Apple</li>
<li class="list-group-item">Orange</li>
<li class="list-group-item">Banana</li>
<li class="list-group-item">Kiwi</li>
</ul>
<p>Hello!</p>
<p>My name is</p>
<p>Enes</p>
<ul class="list-group">
<li class="list-group-item">A</li>
<li class="list-group-item">B</li>
<li class="list-group-item">C</li>
<li class="list-group-item">D</li>
</ul>
</div>kodunda parent element .container sınıfının bulunduğu div elementidir.
:nth-child(3) {background-color: red;}stilini uygularsak, parent elementten sonra indexi 3 olan li elementlerinin bulunduğu bölümün arka planını kırmızı yapar.
n ile bildirilen sıradaki öğeyi sondan sıralayarak seçer. Örneğin;
<div>
<p>Box 1</p>
<p>Box 2</p>
<p>Box 3</p>
<p>Box 4</p>
<p>Box 5</p>
<p>Box 6</p>
<p>Box 7</p>
</div>HTML kodunda sondan 2. p elementine {background-color: white;} özelliğini atamak istiyoruz. Bunun için
p:nth-last-child(2) {background-color: white;}şeklinde bir CSS kodu yazmalıyız.
Yukarıdaki HTML kodundaki div parent elementinin altındaki ilk p elementini seçmeye yarar. first-child seçiciden farkı, tipi eşleşen ilk elementi seçiyor olmasıdır. Örneğin; yukarıdaki kodda ilk p elementine {color: red;} özelliğini atayalım:
p:first-of-type {color: red;}HTML elementleri arasından n. elementleri seçmek için kullanılr. Türe göre seçim yapar. Başına parent element tagi koyulmazsa aynı türdeki elementler arasında seçim yapar. **
Örnek:
<div class="container">
<ul class="list-group">
<li class="list-group-item">Apple</li>
<li class="list-group-item">Orange</li>
<li class="list-group-item">Banana</li>
<li class="list-group-item">Kiwi</li>
</ul>
<p>Hello!</p>
<p>My name is</p>
<p>Enes</p>
<ul class="list-group">
<li class="list-group-item">A</li>
<li class="list-group-item">B</li>
<li class="list-group-item">C</li>
<li class="list-group-item">D</li>
</ul>
</div>koduna aşağıdaki
:nth-of-type {color: green;}stilini uygularsak tag kullanılmadığı için tüm elementlerin 2.sinin (p, li, ul) rengini yeşil yapar.
- nth-of-type seçicinin farklı kullanım şekillerini örneklerle açıklayalım: Örnek 1:
<div>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</div>HTML kodu ile yazılmış bir sayfada birinci ve üçüncü yani tek indexli paragraflara {background-color: pink;} özelliğini; ikinci ve dördüncü yani çift indexli paragraflara {background-color: red;} özelliğini atamak istiyorsak;
tek indekslileri seçmek için
:nth-of-type(odd) {background-color: pink;}
/** veya :nth-of-type(2n+1) {background-color: pink;} **/şeklinde ve çift indexlileri seçmek için
:nth-of-type(even) {background-color: red;}
/** veya :nth-of-type(2n) {background-color: red;} **/şeklinde yazmalıyız.
:only-child seçicisinin aksine sadece bir tane olan nesneleri seçer. Örneğin;
<div>
<p>Hello</p>
<h1>Bonjour</h1>
</div>HTML kodunda tek bir p elementi var ve bu tek p elementini seçip buna {background-color: red;} özelliğini atamak istiyorsak
p:only-of-typ{background-color: red;}şeklinde yazmalıyız.
:last-child seçici HTML kodundaki son elementi seçerken :last-of-type seçici, koddaki seçilmek istenen tipin eşleştiği son elementi seçer. Örneğin;
<div>
<p>Bonjour!</p>
<p>Bonjour à tous!</p>
<h2>Good Morning</h2>
<p>Bonne Nuit!</p>
</div>HTML kodundaki son p elementine {background-color: pink;} özelliğini atamak için
p:last-of-type {background-color: pink;}şeklinde yazmamız gerekir.
Alt elemanı (çocuk) olmayan elemanları seçmek için kullanılır. Örneğin;
<div class="box"><!-- I will be green. --></div>
<div class="box">I will be pink.</div>
<div class="box">
<!-- I will be pink in older browsers because of the whitespace around this comment. -->
</div>HTML kodundaki div elementlerinden child (çocuk) elemanı olmayana {background-color:green;} özelliğini atayalım:
.box:empty{background-color:green;}Bu işlemden sonra sınıfı 'box' olan div elementlerinden ilk sırada olan kutucuğun rengi gri olacaktır. Sondaki div elementi gri olmayacak çünkü yorum satırı boşluklar arasına yazılmıştır, dolayısıyla sondaki div elementi bir çocuk elemana sahiptir.
:not(element) formunda olan :notseçici, içine yazılan element dışındaki elementleri seçmeye yarar.
Örnek:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<div>This is not a paragraph</div>HTML kodundaki p olmayan elementleri seçelim:
:not(p){
color: blue;
text-decoration: underline;
}Yukarıdaki CSS koduna göre p olmayan elementlere (yani div elementine) belirtilen özellikler atanmış oldu.
Nitelik seçicileri, elementlerin özelliklerine ve özellik değerlerine göre öğeleri eşleştiren bir seçici türüdür. Örneğin;
<input name="name"/>
<input name="email"/>kodunda name:"email" özelliği bulunan input elementine font-size:16px özelliğini atayalım:
input[name="email"] {
font-size: 16px;
}Yukarıdaki inputelementlerinden name özelliği bulunanların hepsine {border-radius: 5px;} özelliğine sahip olmasını istiyoruz diyelim. O zaman aşağıdaki şekilde bu özelliği sağlayabiliriz:
input[name] {
border-radius: 5px;
}Veya
<a href="https://example.org"/>
<a href="https://example.com"/>
<a href="https://basichelloworldpage.com"/>kodunda içinnde 'example' geçen a elementlerine {font-style: italic} özelliği kazandırmak istiyoruz diyelim. Bu durumda aşağıdaki gibi yapmalıyız:
a[href*="example"] {
font-style: italic;
}Nitelik seçiciyi bu kez de 'b' ile başlayan a elementine {background-color: red;} özelliği vermek için kullanalım:
a[href^="b"] {
background-color: red;
}Şimdi de 'ge' ile biten a elementlerine {color: blue;} özelliği kazandırmaya çalışalım:
a[href$="ge"] {
color: blue;
}Bu yazı MDN, W3, CSS Selectors, Attribute Selectors sayfalarından yardım alınarak hazırlandı.