CSS'de öğe seçmenin birçok yolu vardır. En temel seçim, gibi etiket adına göredir p ( ). Bir etiket seçicinin öznitelikleri kullanmasından daha özel hemen hemen her şey - classve IDher ikisi de HTML öğelerindeki bu öznitelikleri seçer. Ama classve IDolmayan sadece geliştiriciler seçebilirsiniz bağlıyor. Bir elemanın niteliklerinden herhangi birini seçici olarak kullanabiliriz.
Öznitelik seçiminin özel bir sözdizimi vardır. İşte bir örnek:
a(href="https://css-tricks.com") ( color: #E18728; )Bu , yalnızca "https://css-tricks.com" öznitelik değerine sahip bağlantıları seçecek bir tam eşleme seçici href.
Yedi Farklı Tür
Öznitelik seçiciler, varsayılan olarak büyük / küçük harfe duyarlıdır (aşağıdaki büyük / küçük harfe duyarlı olmayan eşlemeye bakın) ve köşeli parantez içinde yazılır ().
Bir öznitelik seçiciyle bulabileceğiniz yedi farklı eşleşme türü vardır ve sözdizimi her biri için farklıdır. Daha karmaşık öznitelik seçicilerinin her biri, tam eşleme seçicinin sözdizimi üzerine kurulur - hepsi öznitelik adıyla başlar ve bir eşittir işaretiyle biter ve ardından öznitelik değer (ler) i, genellikle tırnak içinde olur. Öznitelik adı ve eşittir işareti arasındaki şey, seçiciler arasındaki farkı yaratan şeydir.
(data-value) ( /* Attribute exists */ ) (data-value="foo") ( /* Attribute has this exact value */ ) (data-value*="foo") ( /* Attribute value contains this value somewhere in it */ ) (data-value~="foo") ( /* Attribute has this value in a space-separated list somewhere */ ) (data-value^="foo") ( /* Attribute value starts with this */ ) (data-value|="foo") ( /* Attribute value starts with this in a dash-separated list */ ) (data-value$="foo") ( /* Attribute value ends with this */ )Değer şunları içerir: öznitelik değeri, tek değer olarak bir terimi, değerler listesindeki bir değeri veya başka bir değerin parçası olarak bir terimi içerir. Bu seçiciyi kullanmak için, eşittir işaretinin önüne bir yıldız işareti (*) ekleyin. Örneğin, img(alt*="art")"soyut sanat" ve "yeni bir spora başlayan atlet" alt metni olan resimleri seçecektir, çünkü "sanat" değeri "başlangıç" kelimesindedir.
Değer, boşlukla ayrılmış bir listede: değer, ya tek öznitelik değeridir ya da boşlukla ayrılmış değerler kümesindeki tam bir değerdir. "İçerir" seçicinin aksine, bu seçici, değeri bir sözcük parçası olarak aramayacaktır. Bu seçiciyi kullanmak için, eşittir işaretinden önce yaklaşık işareti (~) ekleyin. Örneğin img(alt~="art"), alternatif metin "soyut sanat" ve "sanat şovu" olan resimleri seçecek, ancak "yeni bir spora başlayan atlet" ("içeren" seçicisinin seçeceği) seçmeyecek.
Değer şununla başlar: öznitelik değeri seçilen terimle başlar. Bu seçiciyi kullanmak için, eşittir işaretinin önüne bir düzeltme işareti (^) ekleyin. Unutmayın, büyük / küçük harfe duyarlılık önemlidir. Örneğin, img (alt = "sanat") alternatif metin "sanat şovu" ve "sanatsal desen" içeren resimleri seçecek, ancak "Arthur" büyük harfle başladığı için "Arthur Miller" alternatif metin içeren bir resmi seçmeyecek .
Değer, tire ile ayrılmış bir listede ilk sırada yer alır: Bu seçici, "şununla başlar" seçicisine çok benzer. Burada seçici, tek değer olan veya tire ile ayrılmış değerler listesindeki ilk değer olan bir değerle eşleşir. Bu seçiciyi kullanmak için, eşittir işaretinin önüne bir dikey çizgi karakteri (|) ekleyin. Örneğin, "1900-2000" değerine li(data-years|="1900")sahip liste öğelerini seçecek data-years, ancak data-years"1800-1900" değerine sahip liste öğesini seçmeyecektir.
Değer şununla biter: öznitelik değeri seçilen terimle biter. Bu seçiciyi kullanmak için, eşittir işaretinin önüne bir dolar işareti ($) ekleyin. Örneğin, a(href$="pdf").pdf ile biten her bağlantıyı seçer.
Teklifler hakkında bir not: Bazı durumlarda değerin etrafında alıntı yapmadan gidebilirsiniz, ancak tırnak işaretleri olmadan seçim kuralları tutarsız çapraz tarayıcılardır. Alıntılar her zaman işe yarar, bu yüzden onları kullanmaya devam ederseniz, seçicinizin çalışacağından emin olabilirsiniz.
CodePen'de CSS-Tricks (@ css-tricks) tarafından Kalem Nitelik Seçicilere bakın.
Eğlenceli gerçek: Değerler dizge olarak ele alınır, bu nedenle, bir sınıf veya kimlik seçicide alışılmadık karakterler kullanırsanız yapacağınız gibi, onları eşleştirmek için herhangi bir fantezi kaçışını yapmanız gerekmez.
(class="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )Büyük / küçük harfe duyarsız eşleme
Büyük / küçük harfe duyarlı olmayan öznitelik seçicileri, CSS Çalışma Grubu'nun Seçiciler Seviye 4 spesifikasyonunun bir parçasıdır. Yukarıda belirtildiği gibi, öznitelik değeri dizeleri varsayılan olarak büyük / küçük harfe duyarlıdır, ancak ikapanış parantezinin hemen önüne eklenerek büyük / küçük harfe duyarlı olmayacak şekilde değiştirilebilir :
(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )Büyük / küçük harfe duyarlı olmayan eşleme, öngörülemeyen, insan tarafından yazılmış metinler içeren özellikleri hedeflemek için gerçekten kullanışlı olabilir. Örneğin, bir sohbet uygulamasında bir konuşma balonu tasarladığınızı ve herhangi bir biçimde "merhaba" yazan mesajlara "el sallayan bir el" eklemek istediğinizi varsayalım. Bunu, tüm olası varyasyonları yakalamak için büyük / küçük harfe duyarlı olmayan bir eşleştirici kullanarak yalnızca CSS ile yapabilirsiniz:
CodePen'de CSS-Püf Noktaları (@ css-tricks) tarafından Kalem Büyük / Küçük Harfe duyarsız CSS özniteliğinin eşleşmesine bakın.
Onları birleştirmek
Bir öznitelik seçiciyi etiket, sınıf veya kimlik gibi diğer seçicilerle birleştirebilirsiniz.
div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )Veya birden çok özellik seçiciyi birleştirin. Bu örnek, tek değer olarak "kişi" kelimesini veya boşlukla ayrılmış bir listede bir değer vesrc "lorem" değerini içeren bir değer içeren alternatif metin içeren resimleri seçer :
img(alt~="person")(src*="lorem") ( /* style rules here */ )CodePen'de CSS Tricks (@ css-tricks) ile Kalem Kombine Nitelikler ve Yalnızca Nitelik Seçimi konusuna bakın.
JavaScript ve jQuery'de Öznitelik Seçiciler
Öznitelik seçiciler, jQuery'de diğer herhangi bir CSS seçicisi gibi kullanılabilir. JavaScript'te öznitelik seçicilerini document.querySelector()ve ile kullanabilirsiniz document.querySelectorAll().
CodePen'de CSS-Tricks (@ css-tricks) tarafından JS ve jQuery'de Kalem Öznitelik Seçicileri görün.
İlişkili
- sınıf
- İD
Daha fazla bilgi
- Öznitelik Seçicilerdeki Sıska
- MDN'deki öznitelik seçiciler
- W3C CSS spesifikasyonundaki öznitelik seçiciler
Tarayıcı Desteği
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Hiç | Hiç | Hiç | Hiç | 7+ | Hiç | Hiç |