Özellik seçiciler

HTML çalışmanızdan bildiğiniz gibi, öğeler kendileri hakkında daha fazla ayrıntı veren niteliklere sahip olabilirler.

İlişkili olduğu konular : ders

HTML çalışmanızdan bildiğiniz gibi, öğeler kendileri hakkında daha fazla ayrıntı veren niteliklere sahip olabilirler. CSS’de, belirli niteliklere sahip öğeleri hedeflemek için nitelik seçicileri kullanabilirsiniz. Bu yazı, size, bu çok kullanışlı seçicileri nasıl kullanacağınızı gösterecektir.

Varlık ve değer seçiciler

Bu seçiciler, tek başlarına bir özniteliğin varlığına (örneğin href) veya özniteliğin değerine göre çeşitli farklı eşleşmelere dayalı olarak bir öğenin seçilmesini sağlarlar.

seçiciÖrnekAçıklama
[attr]a[title]Bir attr özniteliğine sahip öğeleri eşleştirir (adı köşeli parantez içindeki değerdir).
[attr=value]a[href="example.com"]Değeri tam olarak value olan bir attr özniteliğine sahip öğeleri eşleştirir – tırnak işaretleri içindeki dize.
[attr~=value]p[class~="special"]
Değeri tam olarak value olan veya (boşlukla ayrılmış) değerler listesinde value içeren bir attr  özniteliğine sahip öğeleri eşleştirir.
[attr|=value]div[lang|="zh"]Değeri tam olarak value olan veya hemen ardından bir tire gelen value ile başlayan bir attr özniteliğine sahip öğeleri eşleştirir.

Aşağıdaki örnekte bu seçicilerin kullanıldığını görebilirsiniz.

  • li[class] kullanarak herhangi bir liste öğesini bir sınıf özelliğiyle eşleştirebiliriz. Bu, ilki hariç tüm liste öğeleriyle eşleşir.
  • li[class="a"] ile a sınıfına sahip bir seçici oluştururuz, ancak bu a sınıfının, değerin bir parçası olarak boşlukla ayrılmış başka bir sınıfa sahip olmadığı durumdalar için geçerlidir. İkinci liste öğesini seçer.
  • li[class~="a"] a içeren bir sınıfla eşleşir, a ancak aynı zamanda boşlukla ayrılmış bir listenin parçası olan bir değerle de eşleşir. İkinci ve üçüncü liste öğelerini seçer.
li[class] {
    font-size: 200%;
}

li[class="a"] {
    background-color: yellow;
}

li[class~="a"] {
    color: red;
}
<h1>Attribute presence and value selectors</h1>
<ul>
    <li>Item 1</li>
    <li class="a">Item 2</li>
    <li class="a b">Item 3</li>
    <li class="ab">Item 4</li>
</ul>

Alt dize eşleştirme seçicileri

Bu seçiciler, özniteliğinizin değeri içindeki alt dizelerin daha gelişmiş eşleştirilmesine izin verir. Örneğin, box-warning ve box-error sınıflarınız varsa ve "box-" dizesiyle başlayan her şeyi eşleştirmek istiyorsanız, [class^="box-"] (veya [class|="box"] yukarıdaki bölümde açıklandığı gibi) seçicisini ikisini de seçmek için kullanabilirsiniz .

seçiciÖrnekAçıklama
[attr^=value]li[class^="box-"]value değeri ile başlayan bir özniteliğe sahip elemanları eşleştirir.
[attr$=value]li[class$="-box"]value değeri ile biten bir özniteliğe sahip elemanları eşleştirir.
[attr*=value]li[class*="box"]value değerini özniteliğin herhangi bir yerinde içeren elemanları eşleştirir.

(Not: ^ ve $ işaretlerinin programlamada düzenli ifadeler olarak kullanıldığını bilmek yardımcı olabilir. ^ ile başlar anlamına gelir ve  $ ile biter  anlamındadır.)

Sonraki örnek, bu seçicilerin kullanımını gösterir:

  • li[class^="a"], a ile başlayan herhangi bir öznitelik değeriyle eşleşir, bu nedenle ilk iki liste öğesiyle eşleşir.
  • li[class$="a"], a ile biten herhangi bir öznitelik değeriyle eşleşir, bu nedenle birinci ve üçüncü liste öğesiyle eşleşir.
  • li[class*="a"], dizenin herhangi bir yerinde a görünen herhangi bir öznitelik değeriyle eşleşir, bu nedenle tüm liste öğelerimizle eşleşir.
li[class^="a"] {
    font-size: 200%;
}

li[class$="a"] {
    background-color: yellow;
}

li[class*="a"] {
    color: red;
}
<h1>Attribute substring matching selectors</h1>
<ul>
    <li class="a">Item 1</li>
    <li class="ab">Item 2</li>
    <li class="bca">Item 3</li>
    <li class="bcabc">Item 4</li>
</ul>

Büyük küçük harf duyarlılığı

Öznitelik değerlerini büyük/küçük harfe duyarlı olmadan eşleştirmek istiyorsanız kapanış parantezinden önce i değerini kullanabilirsiniz. Bu ifade, tarayıcıya ASCII karakterlerini büyük/küçük harfe duyarlı olmadan eşleştirmesini söyler. Bu ifade olmadan değerler, belge dilinin büyük/küçük harf duyarlılığına göre eşleştirilecektir – HTML durumunda büyük/küçük harf duyarlı olacaktır.

Aşağıdaki örnekte, ilk seçici, a ile başlayan bir değerle eşleşir — diğer iki liste öğesi büyük harf A ile başladığından yalnızca ilk liste öğesiyle eşleşir. İkinci seçici, büyük/küçük harfe duyarlı olmayan ifadeyi kullanır ve bu nedenle, tüm liste öğesiyle eşleşir.

li[class^="a"] {
    background-color: yellow;
}

li[class^="a" i] {
    color: red;
}
<h1>Case-insensitivity</h1>
<ul>
    <li class="a">Item 1</li>
    <li class="A">Item 2</li>
    <li class="Ab">Item 3</li>
</ul>

Not: Eşleştirmenin normalde büyük/küçük harfe duyarlı olmadığı bağlamlarda büyük/küçük harf duyarlı eşleştirmeyi zorlayacak daha yeni bir s ifadesi de bulunuyor. Ancak bu ifade tarayıcılarda daha az desteklenir ve HTML bağlamında pek kullanışlı değildir.

Sonraki adımlar

Artık öznitelik seçicilerle işimiz bittiğine göre, bir sonraki makaleye geçebilir ve sözde sınıf ve sözde öğe seçiciler hakkında bilgi edinebilirsiniz.

Bu yazı topluluk tarafından oluşturuldu. Lisans bilgisine bakabilirsiniz. Yanlış veya eksik bilgileri düzenlemek için github üzerinden katkıda bulunabilirsiniz.

konular

Okumaya devam et!
Sonraki Yazı: Sözde sınıflar ve sözde öğeler

Bakacağımız bir sonraki seçici kümesi, sözde sınıflar ve sözde öğeler olarak adlandırılır.

div ile tüm alanı doldurma

İçeriğin tüm ekranı kaplamasını istediğim bir web uygulaması yapmak istediğimizi varsayalım.

Flex Öğelerini Hizalama

Flexbox’ın web geliştiricilerinin ilgisini hızla çekmesinin nedenlerinden biri de, web’e ilk kez uygun hizalama özellikleri getirmesidir.

CSS’de öğeleri boyutlandırma

Şimdiye kadarki yazılarda CSS kullanarak bir web sayfasındaki öğeleri boyutlandırmanın çeşitli yollarıyla karşılaştınız.

Uygulama: Temel düzen bilgisi kavrama

Bu klavuz üzerinde çalıştıysanız, bugün CSS düzeni oluşturmak ve eski CSS ile çalışmak için bilmeniz gerekenlerin temellerini kavramış olmalısınız.

Yorum Gönderin

E-posta hesabınız yayımlanmayacak.

koddla
Tema Mundana by WowThemes.net.