5.2.1 Gruplama

Çeşitli seçiciler aynı bildirimleri paşlaştığı takdirde virgül ayraçlı bir liste olarak gruplanabilirler.

Örnek:

Bu örnekte, birbirinin aynı bildirimler içeren üç kuralı tek bir kural haline getireceğiz:

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

ile bu kural eşdeğerdir:

h1, h2, h3 { font-family: sans-serif }

BB başka kısaltma mekanizmaları da içerir: çoklu bildirimler ve kestirme nitelikler.

5.8.1 Özniteliklerin ve öznitelik değerlerinin eşleşmesi

Öznitelik seçiciler dört yolla eşleşebilir:

[özn]

Elemanda özn özniteliği belirtilmişse değerine bakılmaksızın eşleşme sağlanır.

[özn=değ]

Elemanın özn özniteliğinin değeri değ olduğu takdirde eşleşme sağlanır.

[özn~=değ]

Elemanın özn özniteliğinin değeri boşluk ayraçlı sözcüklerden oluşuyor ve belirtilen değ sözcüğü bu sözcüklerden biri ise eşleşme sağlanır. Bu seçici kullanılırken değ değeri boşluk içermemelidir.

[özn|=değ]

Elemanın özn özniteliğinin değeri tire ayraçlı sözcüklerden oluşuyor ve belirtilen değ sözcüğü bu sözcüklerin ilki ise eşleşme sağlanır. Bu seçici kullanılırken değ değeri tire içermemelidir. Öznitelik değerinde eşleşme aranmaya değerin başından başlanır. Bu seçici aslında dil alt kodlarında (HTML'deki 'lang' özniteliği gibi) [IANA-DİLKOD]'da açıklandığı gibi eşleşmeyi mümkün kılmak için tasarlanmıştır.

Öznitelik değerleri betimleyici veya dizge olmalıdır. Öznitelik isimlerinde ve değerlerinde harf büyüklüğüne duyarlılık tamamen belge diline bağımlıdır.

Örnek:

Bu kuraldaki öznitelik seçicisi, 'title' özniteliği ne değerle belirtilmiş olursa olsun, özniteliğin belirtildiği bütün <h1> elemanları ile eşleşecektir:

H1[title] { color: blue; }

Örnek:

Bu seçici ise, 'class' özniteliğinin değeri "example" olan tüm <span> elemanları ile eşleşecektir:

span[class="example"] { color: blue; }

Bir elemanın çok sayıda özniteliği için çok sayıda öznitelik seçicisi kullanılabileceği gibi aynı öznitelik defalarca da belirtilebilir.

Örnek:

Buradaki seçici, 'elveda' özniteliğinin değeri "Antalya" ve 'merhaba' özniteliğinin değeri "Alanya" olan tüm <span> elemanları ile eşleşecektir:

span[merhaba="Alanya"][elveda="Antalya"] { color: blue; }

Örnek:

Aşağıdaki seçiciler "=" ile "~=" arasındaki farkları göstermektedir. İlk seçici, örneğin, 'rel' özniteliğinin "copyright copyleft copyeditor" değeriyle eşleşirken ikinci seçici, değeri tam olarak "http://www.w3.org/" olan 'href' özniteliğiyle eşleşecektir:

a[rel~="copyright"]
a[href="http://www.w3.org/"]

Örnek:

Aşağıdaki kural, 'lang' özniteliğinin değeri "fr" olan tüm elemanları (Fransızca içeriği) gizleyecektir:

*[lang="fr"] { display : none }

Örnek:

Aşağıdaki kural, değeri "en" ile başlayan, "en", "en-US", "en-cockney" gibi değerler içeren 'lang' özniteliğine sahip tüm elemanlarla eşleşecektir:

*[LANG|="en"] { color : red }

Örnek:

Benzer şekilde, aşağıdaki işitsel biçembent kuralları bir betiğin her rolü farklı bir sesle okumasını mümkün kılacaktır:

DIALOGUE[character=romeo]
     { voice-family: "Lawrence Olivier", charles, male }

DIALOGUE[character=juliet]
     { voice-family: "Vivien Leigh", victoria, female }

5.8.2 DTD'lerdeki öntanımlı öznitelik değerleri

Eşleşmeler belge ağacındaki öznitelik değerlerinde yer alır. HTML dışındaki belge dilleri için, öntanımlı öznitelik değerleri bir DTD'de veya bir başka yerde tanımlanabilir. Biçembentler, öntanımlı değerler belge ağacında bulunmasa bile onlarla çalışacak şekilde tasarlanmalıdır.

Örnek:

Öntanımlı değeri "onluk" olan "belirtim" özniteliğine sahip MESELA diye bir elemanımız olsun. DTD'de bununla ilgili şöyle bir satır olurdu:

<!ATTLIST MESELA belirtim (onluk,sekizlik) "onluk">

Biçembendimiz de şu kuralları içersin:

MESELA[belirtim=onluk] { /*... öntanımlı nitelik ayarları ...*/ }
MESELA[belirtim=sekizlik] { /*... diğer ayarlamalar ...*/ }

Özniteliğin öntanımlı olduğu durumları yakalamak için açıkça yazmak yerine şu kural kullanılabilirdi:

MESELA { /*... öntanımlı nitelik ayarları ...*/ }

Bu seçici, bir öznitelik seçicisinden duruma daha az özgü olduğundan sadece öntanımlı durum için kullanılacaktır. Öntanımlı olarak aynı biçemi almayan diğer öznitelik değerlerinin ise açıkça ayrı olarak ele alınmasına dikkat edilmelidir.

5.8.3 class seçicileri

HTML ile kullanılan biçembentlerde 'class' özniteliğiyle eşleşme arandığı durumda "~=" gösterimi yerine yazarlar nokta (.) gösterimini kullanabilirler. Bu bakımdan, HTML için 'div.value' ile 'div[class~=value]' aynı anlamdadır. Özniteliğin değeri noktadan hemen sonra yazılmalıdır.

Örnek:

Örnek olarak, tüm elemanlara 'class~="pastoral' ile biçem bilgisini şöyle atayabiliriz:

*.pastoral { color: green }  /* class~=pastoral içeren tüm elemanlar */

veya daha temiz olarak,

.pastoral { color: green }  /* class~=pastoral içeren tüm elemanlar */

Aşağıdaki kural sadece 'class~="pastoral' içeren <h1> elemanları ile eşleşir:

h1.pastoral { color: green }  /* class~=pastoral içeren h1 elemanları */

Bu kurallarla aşağıdaki belge parçasında ikinci <h1> yeşil olurken birincisinin rengi değişmeyecektir:

<h1>Yeşil değil</h1>
<H1 class="pastoral">Koyu yeşil</h1>

'class' özniteliğinin diğer değerleri ile eşleşme sağlamak için her değerin önüne nokta konmalıdır; değerlerin sırasının önemi yoktur.

Örnek:

Aşağıdaki kuralla, 'class' özniteliğinin değerinin boşluk ayraçlı bir liste olarak verildiği durumda 'class' özniteliğinde "pastoral" ve "marine" değerlerini içeren <p> elemanları ile eşleşme sağlanacaktır:

P.pastoral.marine { color: green }

Bu kural 'class="pastoral blue aqua marine"' ile eşleşir fakat 'class="pastoral blue"' ile eşleşmez.

Not:

BB 'class' özniteliğine öyle bir güç verir ki, yazarlar belki de biçimi sağlayacak özel elemanları hemen hiç kullanmadan (HTML için sadece <div> ve <span> kullanarak) ve biçem bilgisini 'class' özniteliklerine yükleyerek "kendi belge dillerini" tasarlayabilirler. Bir belge dilinin yapısal elemanları daha çok tanındığından ve anlamları kabul gördüğünden ama yazarlarca tanımlanmış sınıflar bunu sağlayamayacağından yazarların bu yola başvurmaları önerilmez.

5.11.1 :first-child sözde sınıfı

:first-child sözde sınıfı, başka bir elemanın ilk çocuğu olan elemanla eşleşir.

Örnek:

Aşağıdaki örnekteki seçici, <div> elemanlarının ilk çocuğu olan <p> elemanları ile eşleşecektir. Kural bir <div> elemanının ilk paragrafının girintilenmesini önlemektedir:

div > p:first-child { text-indent: 0 }

Bu seçici aşağıdaki belge parçasının <div> elemanının içindeki <p> elemanı ile eşleşecektir:

<p>Örnekten önceki son paragraf</p>
<div class="misal">
   <p>Örneğin içindeki ilk paragraf</p>
</div>

Ama aşağıdaki <p> elemanı ile eşleşmeyecektir:

<p>Örnekten önceki son paragraf</p>
<div class="misal">
   <h2>Örnek:</h2>
   <p>Örneğin içindeki ilk paragraf</p>
</div>

Örnek:

Aşağıdaki kural bir <p> elemanının ilk çocuğunun <em> astsalının yazıtipini kalın yapacaktır:

p:first-child em { font-weight : bold }

Anonim çerçeveler belge ağacının parçası olmadıklarından ilk çocuk bulunurken hesaba katılmayacaklarına dikkat ediniz.

Örnek:

<p>abc <em>öntanımlı</em></p>

Burada <em> elemanı <p> elemanının ilk çocuğudur.

Aşağıdaki iki seçici eşdeğerdir:

* > a:first-child   /* Herhangi bir elemanın a çocuğunun ilk çocuğu */
a:first-child       /* Aynı */

5.11.2 Bağlantı sözde sınıfları: :link ve :visited

Hemen hemen bütün kullanıcı arayüzleri ziyaret edilmemiş bağlantıları ziyaret edilenlerden farklı gösterirler. Bunları ayırdetmek için BB :link ve :visited sözde sınıflarını sağlar:

• :link sözde sınıfı henüz ziyaret edilmemiş bağlantılara uygulanır.

• :visited sözde sınıfı bağlantı kullanıcı tarafından ilk ziyaret edildiğinde uygulanır.

Not:

Kullanıcı arayüzleri, belli bir süre geçtikten sonra, ziyaret edilmiş bağlantıları tekrar ziyaret edilmemiş bağlantı (:link) haline çevirebilirler.

Bu iki durum aynı anda varolamaz.

Hangi elemanın hiper bağlantı elemanı olacağını belge dili belirler. Örneğin, HTML 4.0'da bağlantı sözde sınıfları 'href' özniteliğine sahip <a> elemanlarına uygulanır. Bu bakımdan, aşağıdaki iki BB2 bildirimi aynı etkiye sahiptir:

a:link { color: red }
:link  { color: red }

Örnek:

<a class="harici" href="http://harici.taraf/">harici bağlantı</a>

bağlantısı ziyaret edildiğinde, bu kural:

a.external:visited { color: blue }

onu mavi yapacaktır.

5.11.3 Özdevimli sözde sınıflar: :hover, :active ve :focus

Etkileşimle kullanıcı arayüzleri bazan kullanıcı eylemlerine verilen yanıtı değiştirirler. BB bildik durumlara uyan üç sözde sınıf sağlar:

• :hover sözde sınıfı kullanıcı bir eleman üzerinde gezinirken (bir işaretleme aygıtı ile) uygulanır ama elemanı etkinleştirmez. Örneğin, bir görsel tarayıcı fare imleci eleman tarafından üretilen çerçevenin üzerinden geçerken bu sözde sınıfın belirttiği kuralı uygulayacaktır. Etkileşimli ortamı desteklemeyen kullanıcı arayüzleri bu sözde sınıfı desteklemek zorunda değillerdir. Etkileşimli ortamı destekleyen bazı uyumlu kullanıcı arayüzleri (kalem aygıtı gibi) ise bu sözde sınıfı desteklemeyebilir.

• :active sözde sınıfı bir eleman kullanıcı tarafından etkinleştirildiğinde uygulanır. Örneğin, fare düğmesine kullanıcının basmasıyla bırakması arasındaki sürede).

• :focus sözde sınıfı bir elemana odaklanıldığında (eleman tuş girdilerini kabul etmeye başladığında veya başka türlü bir metin girdisinde) uygulanır.

Bu sözde sınıflar birbirlerini karşılıklı dışlamazlar. Bir eleman aynı anda bir kaçıyla eşleşebilir.

BB hangi elemanların yukarıdaki durumlarda olabileceğini veya durum değişikliklerine nasıl girip çıktıklarını tanımlamaz. Betiklerle elemanların kullanıcı olaylarına tepkileri değiştirilebilir; farklı aygıtlar ve kullanıcı arayüzleri onları farklı yollarla işaret edebilir yada etkinleştirebilir.

Kullanıcı arayüzlerinin o an gösterilmekte olan belgeyi sözde sınıf geçişlerinden dolayı yeniden oluşturması gerekmez. Örneğin, bir biçembent bir etkin (:active) bağlantının yazıtipi yüksekliğini (font-size) etkin olmayan halinden daha büyük belirtebilir, fakat bu, okuyucu bağlantıyı seçtiğinde harflerin yerlerinin değişmesine yol açabileceğinden bir kullanıcı arayüzü bu biçem kuralını yoksayabilir.

Örnek:

a:link    { color: red }    /* ziyaret edilmemiş bağlantı */
a:visited { color: blue }   /* ziyaret edilmiş bağlantı   */
a:hover   { color: yellow } /* kullanıcı rastlarsa dikkatini çekmek için */
a:active  { color: lime }   /* etkin bağlantılar */

Bütünleşme kurallarının a:hover kuralının color niteliğini gizlememesi için a:hover kuralı, a:link ve a:visited kurallarının sonrasına yerleştirilmelidir. Benzer şekilde, a:active kuralı a:hover kuralının sonrasına yerleştirildiğinden dolayı, etkin renk (yeşil) kullanıcı elemanın hem üzerinde olup hem de elemanı etkinleştirdiğinde uygulanacaktır.

Örnek:

Özdevimli sözde sınıfları biraraya getiren bir örnek:

a:focus { background: yellow }
a:focus:hover { background: white }

Son seçici, :focus ve :hover sözde sınıflarına giren <a> elemanları ile eşleşir.

Odak sınırlarının gösterimi hakkında daha ayrıntılı bilgi edinmek için Dynamic outlines: the outline property bölümüne bakınız.

Not:

BB1'de, :active sözde sınıfı :link ve :visited sözde sınıflarıyla birbirlerini karşılıklı dışlarlardı. Bu artık geçerli değildir. Bir eleman hem :visited hem de :active (veya hem :link hem de :active) sözde sınıflarına sahip olabilir ve hangi niteliklerin uygulanacağını normal bütünleşim kuralları belirler.

5.11.4 Dil sözde sınıfı: :lang

Belge dili bir elemanın insan dilinin nasıl saptanacağını belirtiyorsa, bir elemanın diliyle eşleşen seçiciler yazmak mümkündür. Örneğin, HTML'de [HTML40] dil <meta> elemanının 'lang' özniteliği ile bir ihtimal protokoldeki bilginin (örn, HTTP başlıklarından) bir birleşimi olarak saptanır. XML, xml:lang özniteliğinde belirtir, diğer dillerde dili saptamak için kendilerine özgü yöntemler kullanılıyor olabilir.

:lang(c) sözde sınıfı. dili c olan bir elemanla eşleşir. Burada c, [IANA-DİLKOD] ve [HTML40]'da belirtilen dil kodlarından biridir. Eşleşme |= işlecinin kullandığı eşleşme yöntemi ile bulunur.

Örnek:

Aşağıdaki kurallar bir HTML belgeye Almanca ve Fransızca için tırnak karakterlerini belirtmektedir:

html:lang(fr) { quotes: '« ' ' »' }
html:lang(de) { quotes: '»' '«' '\2039' '\203A' }
:lang(fr) > q { quotes: '« ' ' »' }
:lang(de) > q { quotes: '»' '«' '\2039' '\203A' }

İkinci kural çifti <q> elemanının quotes niteliğine ebeveyninin dili ile ilgili atamaları yapar. Bunun böyle yapılmasının sebebi, tırnak imi seçiminin tırnak içindeki elemanın diline göre yapılması gereğidir.

5.12.1 The :first-line sözde elemanı

:first-line sözde elemanı bir paragrafın ilk biçimli satırına özel bir biçem uygular.

Örnek:

p:first-line { text-transform: uppercase }

Bu kural, "her paragrafın ilk satırının bütün harflerini büyük harf yap" anlamına gelir. Bununla birlikte, p:first-line seçicisi gerçek bir HTML elemanı ile eşleşmez. Bunun yerine, Uyumlu kullanıcı arayüzlerinin her paragrafın başlangıcına yerleştireceği bir sözde elemanla eşleşir.

İlk satırın uzunluğunun bazı etmenlere bağlı oluşuna dikkat ediniz; sayfanın genişliği, yazıtipi boyutu gibi. Aşağıdaki gibi sıradan bir HTML paragrafımız olsun:

<p>Bu, çok sayıda satıra bölünmüş
uzunca bir paragraf olup ilk satır kurgusal
bir etiketin içine alınıp geri kalan satırlar
paragrafın diğer satırları olarak ele alınır.</p>

Satırlar şöyle oluşurdu:

BU, ÇOK SAYIDA SATIRA BÖLÜNMÜŞ UZUNCA BİR
paragraf olup ilk satır kurgusal bir etiketin
içine alınıp geri kalan satırlar paragrafın
diğer satırları olarak ele alınır.

Bu çıktı ilk satır için kurgusal etiketlerle kullanıcı arayüzü tarafından yeniden yazılmış olabilir. Kurgusal etiketler miras alınan niteliklerin gösterilişine yardımcı olur.

<p><p:first-line>Bu, çok sayıda satıra bölünmüş
uzunca </p:first-line> bir paragraf olup ilk satır
kurgusal bir etiketin içine alınıp geri kalan satırlar
paragrafın diğer satırları olarak ele alınır.</p>

Eğer sözde eleman yerine gerçek bir eleman kullansaydık, kurgusal etiketler açılıp kapanarak istenen etki yine sağlanırdı. O halde, paragrafı <span> elemanı ile imleyelim:

<p><span class="dnm">Bu, çok sayıda satıra bölünmüş
uzunca bir paragraf olup </span> ilk satır
kurgusal bir etiketin içine alınıp geri kalan satırlar
paragrafın diğer satırları olarak ele alınır.</p>

Kullanıcı arayüzü ilk satır için kurgusal etiketleri yerleştirirken <span> elemanı için uygun başlangıç ve bitiş etiketlerini de yerleştirecektir:

<p><p:first-line><SPAN class="dnm">Bu,
çok sayıda satıra bölünmüş uzunca bir </SPAN></P:first-line>
<SPAN class="dnm"> paragraf olup </SPAN>
ilk satır kurgusal bir etiketin içine alınıp geri kalan
satırlar paragrafın diğer satırları olarak ele alınır.</p>

:first-line sözde elemanı sadece blok seviyesinden elemanlar için kullanılabilir.

Bir ilk satırın blok seviyesinden, üstseli B olan bir A elemanının ilk satırı olduğu durumda, kurgusal etiketler şöyle oluşurdu:

<B>...<A>...
<B:first-line>
  <A:first-line>Bu ilk satırdır</A:first-line>
</B:first-line>

İlk satırla ilgili kurgusal etiketlerin tümü olası en küçük blok seviyesinden elemanın içinde olup kurgusal A:first-line ve B:first-line etiketlerinin iç içelik sırası A ve B elemanları ile aynıdır.

Bir blok seviyesinden elemanın "ilk biçimli satırı" eleman akımındaki ilk satırıdır; yani, yüzen elemanlar ve mutlak konumlu elemanlar yoksayılır. Örnek:

<div>
  <p style="float: left">Yüzen paragraf...</p>
  <p>İlk satır buradan başlıyor...</p>
</div>

'div:first-line' seçicisi ikinci <p>'nin ilk satırına uygulanır, çünkü ilk <p> akımın dışında kalır.

:first-line sözde elemanı satıriçi seviyeden bir eleman gibi olmakla birlikte bazı kısıtlamaları tabidir. Sadece şu niteliklere uygulanır: yazıtipi nitelikleri, renk nitelikleri, artalan nitelikleri, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, text-shadow ve clear.

5.12.2 :first-letter sözde elemanı

:first-letter sözde elemanı bir paragrafın baş harfinde bazı görsel etkiler oluşturmak için kullanılır. float niteliği none olduğunda bir satıriçi elemana, aksi takdirde bir yüzen elemana benzer.

:first-letter sözde elemanına şu nitelikler uygulanabilir: yazıtipi nitelikleri, renk nitelikleri, artalan nitelikleri, text-decoration, vertical-align (sadece float niteliği none iken), text-transform, line-height, dış kenar boşluğu (margin) nitelikleri, iç kenar boşluğu (padding) nitelikleri, kenar (border) nitelikleri, float, text-shadow ve clear.

Aşağıdaki belgenin BB2 biçembendi paragrafın baş harfini paragrafın başında bir yuva içine (matbaacılık terimlerini bilmiyorum ama buna "yuvalı baş harf" denebilir; İngilizcesi "dropped initial caps" veya "drop caps") yerleştirmektedir:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Baş harfin büyütülmesi</title>
  <style type="text/css">
   p              { font-family: serif; font-size: 14pt; line-height: 12pt}
   p:first-letter { font-size: 42pt; font-style: italic;
                    font-weight: bold; float: left }
   span           { text-transform: uppercase }
  </style>
 </head>
 <body>
  <p><span>Açıklamalar</span> dizgecikler arasında her yerde bulunabilirler
  ve içerikleri yoksayılır. Açıklamalar iç içe olamazlar.</p>
 </body>
</html>

Bu örnek şöyle biçimlenmiş olabilir:

[Açıklama]

Kurgusal etiketler:

<p>
<span>
<p:first-letter>
A
</p:first-letter>çıklamalar
</span>
 dizgecikler arasında her yerde ...

:first-line sözde elemanının başlangıç etiketi eklendiği elemanın başlangıç elemanından sonra yerleştirildiği halde, :first-letter sözde elemanının etiketleri içeriğe (yani, ilk karaktere) bitişiktir.

Geleneksel ilk harfin büyütülmesi işlemi sırasında, kullanıcı arayüzleri örneğin karakter tabanlarını hizalamak için yazıtipi boyutlarında yaklaşımda bulunabilirler. Ayrıca karakterin dış boyutları biçimlemede hesaba katılmış olabilir.

Başharfi de içine alan bir noktalama (yani, [Unicode]'da atanmış olan Ps, Pe ve Po noktalama sınıflarından bir karakter) mevcutsa bu da baş harfle birlikte biçimlenmelidir:

[Açıklama]

:first-letter sözde elemanları blok seviyesinden elemanlarla eşleşir.

Bazı diller bazı karakter birleşimleri ile ilgili özel kurallara sahiptir. Örneğin, Felemenkçede bir sözcüğün başında "ij" karakter birleşimi yer alıyorsa, bu iki karakter birlikte :first-letter sözde elemanı için tek harf kabul edilmelidir.

Örnek:

Aşağıdaki örnekte üstüste binen sözde elemanların nasıl etkileştikleri gösterilmiştir. Her <p> elemanının ilk harfi yeşil ve 24pt'luk olacak, ilk biçimli satırın kalanı mavi olacak, paragrafın kalanı ise kırmızı renkte olacaktır.

p { color: red; font-size: 12pt }
p:first-letter { color: green; font-size: 200% }
p:first-line { color: blue }

<p>Bu metin örneğin hatrına en az iki satırlık olmalıdır.</p>

"en" sözcüğünden hemen önce ikinci satıra geçildiğini varsayalım. Bu durumda kurgusal etiketler şöyle oluşurdu:

<p>
<P:first-line>
<P:first-letter>
B
</P:first-letter>u metin örneğin hatrına
</P:first-line>
en az iki satırlık olmalıdır.
</p>

:first-letter elemanının :first-line elemanının içinde kaldığına dikkat ediniz. :first-line için nitelikler :first-letter elemanından miras alınır, fakat aynı nitelik :first-letter için de belirtilmişse sonuncusu geçerli olacaktır.

5.12.3 :before ve :after sözde elemanları

:before ve :after sözde elemanları bir elemanın içeriğinden önce veya sonra üretilmiş bir içeriği yerleştirmek için kullanılır. Bunlar Üretilen içerik, özdevinimli numaralama ve listeler bölümünde incelenmiştir.

H1:before {content: counter(chapno, upper-roman) ". "}

:first-letter ve :first-line sözde elemanları :before ve :after ile birlikte kullanıldıklarında yerleştirilen metnin ilk harfinde veya ilk satırında etkili olurlar.

Örnek:

p.special:before {content: "Special! "}
p.special:first-letter {color: #ffd800}

Bu kural "Special!" dizgesinin "S" harfini altın rengi yapacaktır.