CSS Özellik Seçiciler Nedir ve Nasıl Kullanılırlar?
CSS ile tanımlama yaparken HTML nesnelerine özellik atama yapmakta bazen sıkıntı çekeriz. Ne yapsakta bu elemana atama yapsak diye düşündüğümüz durumlar olur. İşte CSS özellik seçiciler bu sorunu kökünden çözen bir yöntemdir.
Özellik seçicileri HTML, XHTML veya XML dokümanlarındaki seçilen etiketin özelliklerine veya özellik değerlerine göre tanımlama yapmamızı sağlar. Bir örnek verecek olursak sayfamızdaki bir resme (örn; deneme.png) kenarlık ataması yapmak istersek:
img[src=”deneme.png”] { border: 1px solid #000}
Dört çeşit özellik seçicisi vardır.
Basit Özellik Seçicisi
Belirli bir etiketin (örn; img) özelliğine (örn; alt) göre tanımlama yapmamızı sağlar.
p[class]{color:red;}
Bir örnek ile pekiştirelim.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS'in yapısı</title>
<style type="text/css">
img[alt] {
border: 5px solid lime
}
</style>
</head>
<body>
<img src="logo.jpg" alt="Logo" width="32" height="41" />
<br>
<img src="logo.jpg" width="32" height="41" />
</body>
</html>
Yukarıdaki kodlamada birden fazla <img> tanımı vardır. Ama biz sadece alt tanımı yaptıklarımıza belli özellikler atamak istiyoruz. Bunun için basit özellik seçicisini kullandık.
Özellik Değeri Seçicisi
Bir etiketin özellik değerine göre tanımlama yapmamızı sağlar.
input[type=”text”]{color:red;}
Bir örnek ile pekiştirelim.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>CSS'in yapısı</title>
<style type="text/css">
input[type="text"] {
border: 5px solid #000;
width: 150px;
}
</style>
</head>
<body>
<p>Adınız : <input type="text" name="ad" /></p>
<p>Cinsiyetiniz: <input type="radio" name="cinsiyet" id="erkek" />
Erkek <input type="radio" name="cinsiyet" id="kadin" /> Kadın
</p>
</body>
</html>
Yukarıdaki kodlamada birden fazla <input> tanımı vardır. Ama biz sadece type=”text” tanımı yaptıklarımıza belli özellikler atamak istiyoruz. Bunun için basit özellik seçicisini kullandık.
Kısmi Özellik Değeri Seçicisi
Bir etiketin özellik değerindeki boşluklarla ayrılmış kısımlarına göre tanımlama yapmamızı sağlar.
a[title~=”seç”]{color:red;}
Bir örnek ile pekiştirelim.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>CSS'in yapısı</title>
<style type="text/css">
a[title~="Google"] {
text-decoration:overline;
}
</style>
</head>
<body>
<p><a href="http://www.google.com" title="Google seç">gooogle
</a> </p>
<p><a href="http://www.yahoo.com" title="Yahoo seç">yahoo </a>
</p>
<p><a href="http://www.fatihhayrioglu.com" title="Fatih">fatih </a>
</p>
</body>
</html>
Yukarıdaki kodlamada birden fazla <a> tanımı vardır. Ama biz sadece title içerisinde “seç” kelimesi olana belli özellikler atamak istiyoruz. Bunun için basit özellik seçicisini kullanabiliriz.
Belirlenen Söz dizimi ile Başlayan Özellik Değer Seçicisi
Bir etiketin özellik değerinin başlangıç ifadesine göre tanımlama yapmamızı sağlar.
a[href^=”https://”]{color:red;}
Bir örnek ile pekiştirelim.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>CSS'in yapısı</title>
<style type="text/css">
a[title^="Google"] {
text-decoration:none;
}
</style>
</head>
<body>
<p><a href="http://www.google.com" title="Google seç">gooogle
</a> </p>
<p><a href="http://www.yahoo.com" title="Yahoo seç">yahoo </a>
</p>
<p><a href="http://www.fatihhayrioglu.com" title="Fatih">fatih </a>
</p>
</body>
</html>
Yukarıdaki kodlamada birden fazla <a> tanımı vardır. Ama biz sadece title içerisinde “Google” ile başlamış olana belli özellikler atamak istiyoruz. Bunun için basit özellik seçicisini kullanabiliriz.
Belirlenen Söz dizimi ile Biten Özellik Değer Seçicisi
Bir etiketin özellik değerinin bitiş ifadesine göre tanımlama yapmamızı sağlar.
a[href$=”.com”]{text-decoration:none;}
Bir örnek ile pekiştirelim.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>CSS'in yapısı</title>
<style type="text/css">
a[title$="ç"] {
color:red;
}
</style>
</head>
<body>
<p><a href="http://www.google.com" title="Google seç">gooogle
</a> </p>
<p><a href="http://www.yahoo.com" title="Yahoo seç">yahoo </a>
</p>
<p><a href="http://www.fatihhayrioglu.com" title="Fatih">fatih </a>
</p>
</body>
</html>
Yukarıdaki kodlamada birden fazla <a> tanımı vardır. Ama biz sadece title içerisinde “ç” ile bitmiş olana belli özellikler atamak istiyoruz. Bunun için basit özellik seçicisini kullanabiliriz.
İçinde Belirlenen Söz dizimi Geçen Özellik Değer Seçicisi
Bir etiketin özellik değerinin içindeki ifadeye göre tanımlama yapmamızı sağlar.
a[href*=”google”]{text-decoration:overline;}
Bir örnek ile pekiştirelim.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>CSS'in yapısı</title>
<style type="text/css">
a[title*="hoo"] {
font-size:36px;
}
</style>
</head>
<body>
<p><a href="http://www.google.com" title="Google seç">gooogle
</a> </p>
<p><a href="http://www.yahoo.com" title="Yahoo seç">yahoo </a>
</p>
<p><a href="http://www.fatihhayrioglu.com" title="Fatih">fatih </a>
</p>
</body>
</html>
Yukarıdaki kodlamada birden fazla <a> tanımı vardır. Ama biz sadece title içerisinde “hoo” ifadesi olana belli özellikler atamak istiyoruz. Bunun için basit özellik seçicisini kullanabiliriz.
CSS özellik seçiciler (attribute selectors) konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/css/
Sosyal Medya Hesaplarımız
