CSS Özellik Seçicisi

Belirli bir özellik içeren HTML elementlerinin stillerini ayarlamak

Belirli bir özellik veya özellik değeri olan HTML elementlerinin stillerini ayarlayabiliriz.

CSS [attribute] Seçici

[attribute] seçici, belirli bir özellik içeren elementleri seçmek için kullanılır.

Örnek, target özelliğine sahip tüm <a> elementlerini seçer;

Örnek

a[target] {
  background-color: yellow;
}

Kişisel olarak deneyin

CSS [attribute="value"] seçici

[attribute="value"] seçici, belirli bir özellik ve değere sahip elementleri seçmek için kullanılır.

Örnek, target="_blank" özelliğine sahip tüm <a> elementlerini seçer:

Örnek

a[target="_blank"] { 
  background-color: yellow;
}

Kişisel olarak deneyin

CSS [attribute~="value"] seçici

[attribute~="value"] seçici, özellik değerinde belirli bir kelime içeren elementleri seçer.

Örnek, title özelliğinde "flower" kelimesini içeren tüm elementleri seçer:

Örnek

[title~="flower"] {
  border: 5px solid yellow;
}

Kişisel olarak deneyin

Yukarıdaki örnek, aşağıdaki özelliklerin elementlerini eşleştirir: title="flower"、title="summer flower" ve title="flower new". Ancak, title="my-flower" veya title="flowers" eşleşmez.

CSS [attribute|="value"] seçici

[attribute|="value"] seçici, belirli bir değere başlayan elementleri seçmek için kullanılır.

Aşağıdaki örnek, class özelliği "top" ile başlayan tüm ögeleri seçer:

Açıklama:Değer tam veya tek başına bir kelime olmalıdır, örneğin class="top" veya tire takip eden, örneğin class="top-text".

Örnek

[class|="top"] {
  background: yellow;
}

Kişisel olarak deneyin

CSS [attribute^="value"] seçici

[attribute^="value"] seçici, belirli bir değerle başlayan özellikleri seçer.

Aşağıdaki örnek, class özelliği "top" ile başlayan tüm ögeleri seçer:

İpucu:Değer tam bir kelime olmamalı!

Örnek

[class^="top"] {
  background: yellow;
}

Kişisel olarak deneyin

CSS [attribute$="value"] seçici

[attribute$="value"] seçici, belirli bir değerle biten özellikleri seçer.

Aşağıdaki örnek, class özelliği "test" ile biten tüm ögeleri seçer:

İpucu:Değer tam bir kelime olmamalı!

Örnek

[class$="test"] {
  background: yellow;
}

Kişisel olarak deneyin

CSS [attribute*="value"] seçici

[attribute*="value"] seçici, belirli bir kelimeyi içeren özellik değerlerini seçer.

Aşağıdaki örnek, class özelliği "te" içeren tüm ögeleri seçer:

İpucu:Değer tam bir kelime olmamalı!

Örnek

[class*="te"] {
  background: yellow;
}

Kişisel olarak deneyin

Form stillerini ayarlayın

Class veya id'siz form stillerini ayarlamak için, özellik seçicileri çok faydalı olabilir:

Örnek

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}
input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

Kişisel olarak deneyin

İpucu:Sitemizi ziyaret edin lütfen: CSS form dersleri，CSS ile form stillerini nasıl ayarlayacağınız hakkında daha fazla bilgi edinin。

Tüm CSS özellik seçicileri

Seçici Örnek Örnek açıklaması
[attribute] [target] target özelliği olan tüm ögeleri seçin。
[attribute=value] [target=_blank] target="_blank" özelliği olan tüm ögeleri seçin。
[attribute~=value] [title~=flower] Title özelliği "flower" kelimesini içeren tüm ögeleri seçin。
[attribute|=value] [lang|=en] Lang özelliği "en" ile başlayan tüm ögeleri seçin。
[attribute^=value] a[href^="https"] Her href özelliği "https" ile başlayan her <a> ögesini seçin。
[attribute$=value] a[href$=".pdf"] Her href özelliği ".pdf" ile biten her <a> ögesini seçin。
[attribute*=value] a[href*="codew3c"] href özelliği "codew3c" dizisini içeren her <a> ögesini seçin.

Genişletilmiş Okuma

Dış Kitap:CSS Özellik Seçicileri Açıklaması