Home
CSS Özellik (attribute) Seçiciler Nedir?

CSS Özellik (attribute) Seçiciler Nedir?

Css 31 Ekim 2019

Arkadaşlar bu yazımızda Css özellik ( attibute ) seçiciler i nasıl kullanacağımızı anlatacağız. Çok farklı kullanım şekilleri vardır. Bunları örneklerle anlatacağız.

Örnek 1: CSS Özellik (attribute) Seçici Örneği

<!DOCTYPE html>
<html>
<head>
<style>
 *[class]{
	color:red;
}
</style>
</head>
<body>
<h2> Örnek Başlık </h2>
<div id="denemeID">Örnek bir alan.</div>
<p class="">Örnek bir paragraf.</p>
<span title="title1">Örnek bir metin.</span>
<ul> 
    <li class="icecek"> Çay </li>
    <li class="icecek"> Kahve </li>  
    <li class="tatli"> Sütlaç </li>
    <li class="tatli"> Kazandibi </li>
    <li class="yemek"> Et </li>
    <li class="yemek"> Tavuk </li>
</ul>
</body>
</html>

Tarayıcıdaki Sonucu:

css özellik seçiciler

Bu örnekte “*[class]” yazarak class özelliği verilen tüm elementleri seçiyoruz. Burada class global özelliğine değer verip vermemiz önemli değil, çünkü seçici kullanılırken değer ile kullanmadık.

Örnek 2: CSS Özellik (attribute) Seçiciler Örneği

<!DOCTYPE html>
<html>
<head>
<style>
 li[class], div[id]{
	color:red;
}
</style>
</head>
<body>
<h2> Örnek Başlık </h2>

<div id="denemeID">Örnek bir alan 1.</div>
<p class="">Örnek bir paragraf.</p>
<span title="title1">Örnek bir metin.</span>
<div>Örnek bir alan 2.</div>
<ul> 
	<li class="icecek"> Çay </li>
    <li class="icecek"> Kahve </li>  
    <li class="tatli"> Sütlaç </li>
    <li class="tatli"> Kazandibi </li>
    <li class="yemek"> Et </li>
    <li class="yemek"> Tavuk </li>
</ul>
</body>
</html>

Tarayıcıdaki Sonucu:

css attribute seçiciler

Bu örnekte ise Css de “li[class]” diyerek class özelliği olan li etiketlerini seçmiş oluyoruz. Css de “div[id]” diyerek de ID özelliği olan div etiketleri seçmiş oluyoruz.

Örnek 3: Tam Değer Filtre Örneği:

<!DOCTYPE html>
<html>
<head>
<style>
 li[class="icecek"], div[id=""]{
	color:red;
}
 [class=""], div[id="denemeID"]{
	color:blue;
}
</style>
</head>
<body>
<h2> Örnek Başlık </h2>
<div id="denemeID">Örnek bir alan 1.</div>
<p class="">Örnek bir paragraf.</p>
<span title="title1">Örnek bir metin.</span>
<div id="">Örnek bir alan 2.</div>
<ul> 
	<li class="icecek"> Çay </li>
    <li class="icecek"> Kahve </li>  
    <li class="tatli"> Sütlaç </li>
    <li class="tatli"> Kazandibi </li>
    <li class="yemek"> Et </li>
    <li class="yemek"> Tavuk </li>
</ul>
</body>
</html>

Tarayıcıdaki Sonucu:

css özellik tam içerik filtre seçiciler

Bu örnekte gördüğümüz gibi class veya id değeri ([id=””]/[class=””]) boş olarak seçilebiliyor. Yine örnekte gördüğümüz gibi id ve class değerleri tam olarak yazılarak ([class=”icecek”]/[id=”denemeID”]) seçim işlemini, tam içerik olarak yapılıyor.

Burada id ve class değerleri yazılırken dikkatli olmak gerekir. Bir harfi yanlış, eksik veya büyük yerine küçük/küçük yerine büyük yazarsanız seçim işlemini yapmaz.

Örnek 4: Tam Değer İçeren Filtre Örneği:

<!DOCTYPE html>
<html>
<head>
<style>
 li[class~="sicak"]{
	color:red;
}
 li[class~="soguk"]{
	color:blue;
}
li[class~="yemek"]{
color:orange;
}
</style>
</head>
<body>
<ul> 
	<li class="sicak icecek tipi"> Çay </li>
    <li class="sicak icecek tipi"> Kahve </li>  
    <li class="soguk icecek tipi"> Ayran </li>
    <li class="soguk icecek tipi"> Limonata </li>
    
</ul>
<ul> 
	<li class="etli yemek"> Karnıyarık </li>
    <li class="etli yemek"> Et Sote </li>  
    <li class="sebzeli yemek"> Yeşil Fasulye </li>
    <li class="sebzeli yemek"> Brokoli </li>
    
</ul>
</body>
</html>

Tarayıcıdaki Sonucu:

css attribute tam içerik filtre seçiciler

Bu örnekteki seçici tam değer içeren kelime olduğunda kullandığımız seçici türü.

Bu seçici kullanılırken seçtiğimiz değer başta ise sağı, sonda ise solu ve ortada ise sağı-solunda boşluk olması gerekir. Yazım şekli, [özellik~=”değer”] bu şekildedir. Hangi özelliği kullanırsak kullanalım “özellik” yazılır, sonra “~” karakteri, sonra eşittir (=) ve sonrasın çift tırnak içinde değerimizi yazarız.

Örnek 5: İçeren Değer Filtre Örneği

<!DOCTYPE html>
<html>
<head>
<style>
 li[class*="sicak"]{
	color:red;
}
 li[class*="soguk"]{
	color:blue;
}
li[class*="Yemek"]{
color:orange;
}
[class*="Ice"]{
font-style:italic;
}
</style>
</head>
<body>
<h2> İçecek ve Yemek Listesi</h2>
<ul> 
	<li class="sicakIcecek"> Çay </li>
    <li class="sicakIcecek"> Kahve </li>  
    <li class="sogukIcecek"> Ayran </li>
    <li class="sogukIcecek"> Limonata </li>
    
</ul>
<ul> 
	<li class="etliYemek"> Karnıyarık </li>
    <li class="etliYemek"> Et Sote </li>  
    <li class="sebzeliYemek"> Yeşil Fasulye </li>
    <li class="sebzeliYemek"> Brokoli </li>
    
</ul>
</body>
</html>

Tarayıcıdaki Sonucu:

İçeren Değer Filtre

Bu örneğimizde özellik belirtilir, sonrasında “*=” karakteri yazılır ve değerin içinden istenen kısım belirtilerek seçim işlemi yapılır. Bu seçici işleminde yıldız (*) karakteri kullanılır. Başında sonunda herhangi bir boşluk olmasına gerek yoktur.


CSS de “li[class*=”sicak”]” yazıldığında class değeri içinde “sicak” değeri geçen <li> etiketlerini seçmiş oluruz. Burada dikkat edilmesi gereken önemli unsur büyük küçük harflere dikkat etmektir.

Örnek 6: Başlayan Değer Filtresi Örneği

<!DOCTYPE html>
<html>
<head>
<style>
[name^="l"]{
	color:red;
}
 li[class^="si"]{
	color:blue;
}
[id^="b"]{
font-style:italic;
}
[name^="icecek"]{/* burada seçim yapmaz çünkü başlangıçta bu karakterler yok */
color:purple;
}
</style>
</head>
<body>
<h2 id="baslik" name="lokanta-menu"> İçecek ve Yemek Listesi</h2>
<ul> 
    <li name="cay" class="sicakIcecek"> Çay </li>
    <li name="kahve"  class="sicakIcecek"> Kahve </li>  
    <li name="ayran"  class="sogukIcecek"> Ayran </li>
    <li name="limonata"  class="sogukIcecek"> Limonata </li>
    <li id="buzlu-kola"  class="sogukIcecek"> Buzlu Kola </li>
</ul>
</body>
</html>

Tarayıcıdaki Sonucu:

Başlayan Değer Filtresi

Bu örneğimizde ise özellikten sonra “^=” karakteri kullanılır, sonrasında değerin başındaki kısımdan seçilmek istenen kadar ki kısmı yazılır. Yani özelliğin başındaki kısımlara bakar. Özelliğin değerinin ortasındaki veya sonundaki karakterlerden yazarsanız seçim yapmaz.


CSS de bu kodu “[name^=”l”]” yazdığımızda “name” özelliği “l” karakteri ile başlayan etiketleri seçer.

CSS de bu kodu “[class^=”si”]” yazdığımızda “class” özelliği “si” karakteri ile başlayan etiketleri seçer ve rengini mavi yapar.


CSS de bu kodu “[name^=”icecek”]” yazdığımızda “name” özelliği “icecek” karakteri ile başlayan etiketleri seçmek için bakar, ama bu karakterler ile başlayan olmadığı için herhangi bir seçim yapmaz.

Örnek 7: Tireli veya Tiresiz Başlayan Değer filtre Örneği:

<!DOCTYPE html>
<html>
<head>
<style>
li[class|="sicak"]{
	color:red;
}
 li[class|="soguk"]{
	color:blue;
}
</style>
</head>
<body>
<ul> 
    <li class="sicak-icecek"> Çay </li>
    <li class="sicak-icecek"> Kahve </li>  
    <li class="soguk-icecek"> Ayran </li>
    <li class="soguk-"> Limonata </li>
    <li class="soguk"> Buzlu Kola </li>
    <li class="sogukIcecek"> Buzlu Meyve Suyu </li>
    <li class="icecek-soguk"> Soguk Çay </li>
</ul>
</body>
</html>

Tarayıcıdaki Sonucu:

Tireli veya Tiresiz Başlayan Değer filtre

Bu örnekte ise değerin başlangıcında olan değerinden sonra tire (-) ile devam edenleri ve değerin tamamı ise seçer. Bu seçici işleminde “|” karakteri kullanılır. Yukarıdaki örnek ile anlatalım.

CSS de “li[class|=”sicak”]” bu kodu yazdığımızda class değeri “sicak” ile başlayan ve devamında tiresi olanları seçiyoruz.

CSS de “li[class|=”soguk”]” bu kodu yazdığımızda class değeri “soguk” ile başlayan ve tire ile devam edenleri (“soguk-icecek”, “soguk-“) ve sadece değeri “soguk” olanları seçer mavi yapar. Dikkat ederseniz class değeri “sogukIcecek” ve “icecek-soguk” olanları seçmedi ve mavi yapmadı.

Class değeri “sogukIcecek” olanda “soguk” karakterinden sonra tire gelmediği için yapmaz. Boşluk da olsaydı yapmazdı(“soguk “).

Class değeri “icecek-soguk” olanda ise “soguk” karakteri başta olmadığı için yapmadı.

Örnek 8: Biten Değer Filtresi Örneği

<!DOCTYPE html>
<html>
<head>
<style>
li[class$="icecek"]{
	color:red;
}
</style>
</head>
<body>
<ul> 
   <li class="sicak-icecek"> Çay </li>
    <li class="sicak-icecek"> Kahve </li>  
    <li class="soguk-icecek"> Ayran </li>
    <li class="soguk-"> Limonata </li>
    <li class="soguk"> Buzlu Kola </li>
    <li class="sogukicecek"> Buzlu Meyve Suyu </li>
    <li class="icecek-soguk"> Soguk Çay </li>
</ul>
</body>
</html>

Tarayıcıdaki Sonucu:

Biten Değer Filtresi Örneği

Bu örnekte özelliklerin değerlerinin son kısımlarından seçerek seçim işlemi yapılır. “$” karakteri kullanılır.


CSS de “li[class$=”icecek”]” bu kodu yazdığımızda class özelliğinin sonu “icecek” ile bitenleri seçiyor ve kırmızı yapıyor.

Not: CSS Seçiciler kullanılırken büyük ve küçük harflere dikkat önemlidir. Eğer küçük harfle yazılmış bir name değerini büyük harfle seçmeye çalışırsak seçmez. Aşağıdaki örnekle anlatalım.

Örnek: Büyük / Küçük Harf Duyarlılığı Örneği

<!DOCTYPE html>
<html>
<head>
<style>
li[class$="icecek"]{
	color:red;
}
</style>
</head>
<body>
<ul> 
    <li class="sicak-icecek"> Çay </li>
    <li class="sicak-icecek"> Kahve </li>  
    <li class="sogukIcecek"> Ayran </li>
    <li class="soguk-"> Limonata </li>
    <li class="soguk"> Buzlu Kola </li>
    <li class="sogukIcecek"> Buzlu Meyve Suyu </li>
    <li class="icecek-soguk"> Soguk Çay </li>
</ul>
</body>
</html>

Tarayıcıdaki Sonucu:

Büyük / Küçük Harf Duyarlılığı

Bu örnekte gördüğümüz gibi sadece Çay ile Kahve yi kırmızı yaptı. Çünkü class değeri sonu “icecek” ile bitenleri seçti. Class değeri sonu “Icecek” olanları seçmedi. Büyük küçük harf duyarlıdır.

Bazen bu gibi seçimlerimizde büyük ve küçük harf duyarlı olmasını istemeyebiliriz.Bu durumda seçim işlemi yaparken değer yazdıktan sonra “i” harfini yazmamız gerekir. Örnek olarak yukarıdaki örneği verelim. “li[class$=”icecek” i]” değerden sonra bir boşluk ve “i” harfini yazdığımızda büyük ve küçük harf duyarlılığı olmaz.

Kod ile de Görelim:

<!DOCTYPE html>
<html>
<head>
<style>
li[class$="icecek" i]{
	color:red;
}
</style>
</head>
<body>
<ul> 
    <li class="sicak-icecek"> Çay </li>
    <li class="sicak-icecek"> Kahve </li>  
    <li class="sogukIcecek"> Ayran </li>
    <li class="soguk-"> Limonata </li>
    <li class="soguk"> Buzlu Kola </li>
    <li class="sogukIcecek"> Buzlu Meyve Suyu </li>
    <li class="icecek-soguk"> Soguk Çay </li>
</ul>
</body>
</html>

Tarayıcıdaki Sonucu:

Büyük / Küçük Harf Duyarlılığı

Gördüğünüz gibi class değeri sonu “icecek” olanları da, class değeri sonu “Icecek” olanları da seçmiş ve kırmızı yapmış oldu.

CSS özellik seçiciler konusu biraz uzun bir konu olduğu için yazımız uzun oldu. Yazı bütünlüğü olması için parçalamak istemedim.

Diğer Seçiciler ile İlgili Yazılarımız

  1. Genel Seçici (*) ler, tüm Html elemanlarını seçmemize olanak verir. Seçmeyi “*” karakteri ile yaparız.
  2. Element Seçici (Element), seçtiğimiz Html Elementini seçer. Yani seçmek istediğimiz elementi yazarız ve seçmiş oluruz.Örneğin <h1> elementini seçmek için “h1” yazmak gibi.
  3. ID Seçici (#ID), Html elementine yazdığımız ID ile seçeriz. Elementlerin “id” attribute değerine bir isim veririz ve o isimi CSS de kullanırız.
  4. Class Seçici (.class), Html elementine yazdığımız class ile seçeriz. Elementlerin “class” attribute değerine bir isim veririz ve o isimi CSS de kullanırız. Birden fazla elemente aynı class ı verebiliriz.
  5. Child Seçici (Element>Element), Html etiketinin altındaki (çocuk) elementi seçmek için.
  6. Descendant Seçici(Element Element), Html etiketinin altındaki (torun düzeyinde) descendant elementi seçmek için.
  7. Genel Kardeş (Sibling) Seçici (Element ~ Element), Html etiketinin belirtiğimiz sibling etiketini seçer.
  8. Bitişik Sibling (Kardeş) Seçici (Element + Element), Html etiketinin belirtiğimiz bitişik sibling etiketini seçer.
  9. Çoklu (Multiple) Seçici (Element, Element), Bir veya daha fazla Html etiketlerini seçebiliriz.
  10. CSS Sözde Sınıf (Pseudo Class) Seçiciler, sınıf olmayıp sınıf gibi davranan ve seçim yapmamızı sağlayan yapılardır.
  11. CSS Sözde Element(Pseudo Element) Seçiciler, Element olmayıp element gibi davranan ve seçim yapmamızı sağlayan yapılardır.

Başka bir yazımızda buluşmak dileğiyle…

Related

Leave a Reply