CSS Seçiciler: Özellik Seçiciler

***SynaX*** · 15-Mayıs-2025, 16:48

CSS Seçiciler: Özellik Seçiciler

Özellik seçiciler genel seçicilerin tam tersidir. Bir html elemanının belli bir özelliğini hedef alarak işlem görür. Mesela üç adet input varsa bunlardan ikisinin değeri text diğerininki submit ise bir sadece submit olanı seçebiliriz.

Örnek vermek gerekirse:

Kod

<!DOCTYPE html>

<html lang="en">

<head>

            <style>

                        input[type="text"] {color:red;}

                        input[type="submit"] {color:blue;}

            </style>

</head>

<body>

            <input type="text">

            <input type="submit">

</body>

</html>

1-Belirlenen Sözdizimi ile Başlayan Özellik Değer Seçicisi

Bu tip seçiciler belirtilen tüm html elemanını seçmek yerine … İle başlayan şeklinde ayrıntılı seçim yapabilmemizi sağlar. Bu seçicinin işareti ise ( ^ ) şapkadır.

Bilgilendirme

<a href="http://www.ircforum.gen.tr">Web Site Adresi</a>

<a href="mailto: bilgi@ircforum.gen.tr bilgi@ircforum.gen.tr</a>

<a href="ftp://ircforum.gen.tr">Ftp Adresi</a>

Yukarıda 3 farklı bağlantı şeklimiz var. Bu bağlantı şekillerine css ile ayrı ayrı özellik tanımlamak istiyoruz ama hepsine class özelliği eklemek uzun ve zahmetli bir iş ve fazladan da kod yükü oluyor. O halde bu işlemi sadece css’de , html içerisinde herhangi bir tanımlama yapmadan halledebiliriz.

Kod

a[href^='http'] {   color:red  }

a[href^='mailto'] {   color:blue  }

a[href^='ftp'] {   color:yellow  }

örnekte görüldüğü gibi linklerin başlangıcına göre değerler verebiliyoruz ve HTML dosyası içerisinde herhangi bir class tanımlaması da yapmadık.

2-Belirlenen Sözdizimi ile Biten Özellik Değer Seçicisi

Bu özellik bir önceki özellikle aynı mantığa sahiptir fakat bundaki olay sadece başlangıç değeri sözdizimi değil bitiş söz dizimi önemlidir. Seçici için dolar işareti ( $ ) kullanılır.

Bilgilendirme

<a href="http://www.ircforum.gen.tr/deneme.rar">Rar Dosyası</a>

<a href="http://www.ircforum.gen.tr/deneme.jpg">JPG Resim Dosyası</a>

<a href="http://www.ircforum.gen.tr/deneme.xls">XLS Office Belgesi</a>

Yukarıda bir web sitesinde bulunan 3 farklı uzantıda bağlantı mevcut. Bu bağlantılara ayrı ayrı özellikler vermek istiyorsunuz. Bunu CSS3’ün başlangıç sözdizimi özelliği ile yapamayız çünkü hepsi https:// ile başlıyor. Bitiş sözdizimi yöntemini kullanarak uzantılara göre css değerleri atayabiliriz.

Kod

a[href$='.pdf'] { background -color:red };

a[href$='.doc'] { background-color: blue; }

a[href$='.rss'] { background-color: yellow; }

3-İçinde Belirlenen Sözdizimi Geçen Özellik Değer Seçicisi

Belirli bir sözdizimini html elamnının etiket değerlerinden seçip, css uygulamasını yapan seçici tipidir. Bu sözdizimini belirtmek için yıldız ( * ) işareti kullanılmaktadır. Kullanım alanı oldukça geniştir.

Kod

<input type="text" placeholder="sözdizimi">

<input type="text" placeholder="css3">

Yukarıda iki adet input vardır ve placeholder değerleri farklıdır. Biz bir tanesine değer vermek sitediğimizde class yazmak zorundayız ya da CSS3 ile gelen, içinde belirlenen sözdizimi geçen özellik uygulamasını kullanabiliriz.

Kod

İnput[placeholder="söz”] {border:1px solid #ff0022}

Verilen örnekte placeholder değeri içerisinde “ söz “ geçen tüm input elemanlarının border özelliğini tanımlamış olduk.

4-Çoklu Özellik Seçicisi Kullanımı

Tıpkı farklı class’ları tek bir html elemanında kullanabildiğimiz gibi özellik seçicileri de tek bir css değerinde kullanabiliriz.

Kod

strong[class=”normal”] a[title~=link] {

            color : red;

}

CSS Seçiciler: Özellik Seçiciler

HTML/CSS/JavaScript hakkında bilgiler, ipuçları, sorular, sorunlar ve çözümleri.

5846 sayılı Fikir ve Sanat Eserleri Kanunu gereğince sitemizde telif hakkı bulunan mp3,video v.b. eserlerin paylaşımı yasaktır. Yasal işlem olması halinde paylaşan kişi yada kişilerin bilgileri gerekli kuruma verilecektir.

Konuyu Görüntüleyen Aktif Kullanıcılar: 3 (0 üye ve 3 misafir)