<?xml version='1.0' encoding='UTF-8'?>
<!--DOCTYPE div1 SYSTEM "../../xmlspec-tr.dtd"[
  <!ENTITY % css2.dtd SYSTEM "css2.dtd">
  %css2.dtd;
]-->

  <div1 id="selector">
<indexterm><primary>seçici</primary></indexterm>
    <head>Seçiciler</head>
    <div2 id="selector1">
<indexterm><primary>eşleşme</primary></indexterm>
<indexterm><primary>seçici</primary> <secondary>eşleşme</secondary></indexterm>      <head>Örüntü eşleme</head>

<p>BBB'de örüntü eşleme kuralları, <termref def="doctree">belge ağacı</termref>ndaki elemanlara hangi biçembent kurallarının uygulanacağını belirler. Basit eleman isimlerinden zengin bağlamsal örüntülere kadar uzanan bir aralığı kapsayan bu örüntülere <term>seçiciler</term> adı verilir. Eğer bir örüntüdeki koşullar belli bir eleman için doğruysa, seçici elemanla <emph>eşleşmiş</emph> demektir.</p>

<p>Seçicilerdeki belge dili eleman isimlerinin harf büyüklüğüne duyarlılığı belge diline bağlıdır. Örneğin, HTML'de eleman isimleri harf büyüklüğüne duyarlı değildir, fakat XML'de duyarlıdır.</p>

<p>Aşağıdaki tabloda BB2 seçici sözdizimi özetlenmiştir:</p>

<table border="1">
<colgroup><col width="5%"/><col width="*"/><col width="25%"/></colgroup>
<thead>
<tr><th>Örüntü</th><th>Anlamı</th><th>Açıklandığı bölüm</th></tr>
</thead><tbody>
<tr><td>*</td>
<td>Her elemanla eşleşir.</td>
<td><specref ref="universal-selector"/></td></tr>

<tr><td><code>E</code></td>
<td>E türündeki her elemanla eşleşir.</td>
<td><specref ref="type-selectors"/></td></tr>

<tr><td><code>E F</code></td>
<td>E elemanlarının F <loc href="&XPath;#axis-descendant">astsalları</loc> ile eşleşir.</td>
<td><specref ref="descendant-selectors"/></td></tr>

<tr><td><code>E > F</code></td>
<td>Herhangi bir E elemanının F <loc href="&XPath;#axis-child">çocukları</loc> ile eşleşir.</td>
<td><specref ref="child-selectors"/></td></tr>

<tr><td><code>E:first-child</code></td>
<td><loc href="&XPath;#axis-parent">Ebeveyninin</loc> ilk çocuğu olan E elemanları ile eşleşir.</td>
<td><specref ref="first-child"/></td></tr>

<tr><td><code>E:link</code><br /><code>E:visited</code></td>
<td>Bir hiper bağ olarak henüz ziyaret edilmemiş (<selector>:link</selector>) ve ziyaret edilmiş (<selector>:visited</selector>) E elemanları ile eşleşirler.</td>
<td><specref ref="link-pseudo-classes"/></td></tr>

<tr><td><code>E:active</code><br /><code>E:hover</code><br /><code>E:focus</code></td>
<td>Belli başlı kullanıcı eylemleri sırasında E elemanları ile eşleşirler.</td>
<td><specref ref="dynamic-pseudo-classes"/></td></tr>

<tr><td><code>E:lang(c)</code></td>
<td>(İnsan) Dili "c" olan E elemanları ile eşleşir (Dilin nasıl saptanacağını belge dili belirtir).</td>
<td><specref ref="seldef-lang"/></td></tr>

<tr><td><code>E + F</code></td>
<td>E <loc href="&XPath;#preceding-sibling">büyük kardeşi</loc> olan F elemanları ile eşleşir.</td>
<td><specref ref="adjacent-selectors"/></td></tr>

<tr><td><code>E[foo]</code></td>
<td>'<tt>foo</tt>' özniteliği belirtilmiş (değerinin önemi yoktur) E elemanları ile eşleşir.</td>
<td><specref ref="attribute-selectors"/></td></tr>

<tr><td><code>E[foo="dikkat"]</code></td>
<td>'<tt>foo</tt>' özniteliğinin değeri "dikkat" olan E elemanları ile eşleşir.</td>
<td><specref ref="attribute-selectors"/></td></tr>

<tr><td><code>E[foo~="dikkat"]</code></td>
<td>'<tt>foo</tt>' özniteliğinin değerinde "dikkat" ile başlayan boşluk ayraçlı değerler içeren E elemanları ile eşleşir.</td>
<td><specref ref="attribute-selectors"/></td></tr>

<tr><td><code>E[lang|="en"]</code></td>
<td>'<tt>lang</tt>' özniteliğinin değerinde "en" ile başlayan tire ayraçlı değerler içeren E elemanları ile eşleşir.</td>
<td><specref ref="attribute-selectors"/></td></tr>

<tr><td><code>div.dikkat</code></td>
<td><emph>HTML'ye özel</emph>. <code>div[class~="dikkat"]</code> ile aynıdır.</td>
<td><specref ref="class-html"/></td></tr>

<tr><td><code>E#idim</code></td>
<td>ID türündeki özniteliğinin değeri "idim" olan E elemanları ile eşleşir.</td>
<td><specref ref="id-selectors"/></td></tr>
</tbody>
</table>
    </div2>

    <div2 id="selector2">
    <head>Seçici sözdizimi</head>

<p><indexterm><primary>basit seçici</primary></indexterm>
<termdef id="simple-selector" term="Basit seçici">Bir <term>basit seçici</term> hemen ardından sıfır veya daha fazla sayıda ve herhangi bir sırada <titleref ref="attribute-selectors">öznitelik seçicisi</titleref>, <titleref ref="id-selectors">ID seçicisi</titleref> veya <titleref ref="pseudo-classes">sözde sınıf</titleref> gelen bir <titleref ref="type-selectors">tür seçici</titleref> veya bir <titleref ref="universal-selector">evrensel seçici</titleref>dir.  Bütün bileşenleri eşleşen bir basit seçici eşleşmiş olur</termdef>.</p>

<p><indexterm><primary>seçici</primary></indexterm>
<indexterm><primary>bağdaştırıcı</primary></indexterm>
<termdef id="dt-selector" term="seçici">Bir <term>seçici</term>, <emph>bağdaştırıcılarla</emph> birbirlerinden ayrılmış bir veya daha fazla sayıda basit seçiciden oluşan bir zincirdir</termdef>. <termdef id="combinator" term="bağdaştırıcı">Bir <term>bağdaştırıcı</term> boşluk karakterlerinden, ">" ve "+" karakterlerinden biri olabilir. Boşluk karakterleri ayrıca, bir basit seçici ile bağdaştırıcı arasında da yer alabilir</termdef>.</p>

<p><indexterm><primary>konu (seçiciye)</primary></indexterm>
<indexterm><primary>konu</primary> <secondary>seçiciye konu olmak</secondary></indexterm>
<termdef id="subject" term="Konu">Bir seçici ile eşleşen bir belge ağacının elemanlarına seçicinin <term>konu</term>ları denir</termdef>. Tek bir basit seçiciden oluşan bir seçici, gereksinimlerini karşılayan her elemanla eşleşir. Bir basit seçicinin ve bir bağdaştırıcının bir zincirin önüne eklenmesi ilave eşleşme koşulları anlamına gelir, böylece bir seçicinin konuları daima en sağdaki basit seçiciyle eşleşen elemanların bir alt kümesi olur.</p>

<p>Bir <titleref ref="pseudo-elements">sözde eleman</titleref>, biçem bilgisinin her konunun bir alt parçasına uygulandığı durumda, bir zincirdeki son basit seçicinin ardına eklenebilir.</p>

      <div3 id="grouping"><head>Gruplama</head>

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

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

<eg>h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }</eg>

<p>ile bu kural eşdeğerdir:</p>

<eg>h1, h2, h3 { font-family: sans-serif }</eg>
</example>

<p><indexterm><primary>çoklu bildirimler</primary></indexterm>
<indexterm><primary>kestirme nitelik</primary></indexterm>
BB başka kısaltma mekanizmaları da içerir:
<titleref ref="declaration">çoklu bildirimler</titleref>
ve <titleref ref="shorthand">kestirme nitelikler</titleref>.</p>
      </div3>
    </div2>
    <div2 id="universal-selector">
    <indexterm><primary>evrensel seçici</primary></indexterm>
      <head>Evrensel seçici</head>

<p>Evrensel seçici "*" olarak yazılır ve her eleman türüyle eşleşir. <termref def="doctree">Belge ağacı</termref>ndaki her elemanla tek tek eşleşir.</p>


<p>Eğer evrensel seçici bir <termref def="simple-selector">basit seçici</termref>nin tek bileşeni değilse, "*" yoksayılabilir. Örnek:</p>

<slist>
<sitem><code>*[LANG=fr] </code> ve <code>[LANG=fr]</code> eşdeğerdir.</sitem>
<sitem><code>*.warning</code> ve <code>.warning</code> eşdeğerdir.</sitem>
<sitem><code>*#myid</code> ve <code>#myid</code> eşdeğerdir.</sitem>
</slist>

    </div2>
    <div2 id="type-selectors">
    <indexterm><primary>tür seçici</primary></indexterm>
      <head>Tür seçicileri</head>

<p>Bir <term>tür seçici</term> bir belge dilindeki bir eleman türü ismi ile eşleşir. Bir tür seçici belge ağacındaki her eleman nesnelleştirimi ile eşleşir.</p>

<example>
<p>Bu kural belge ağacındaki bütün <htmltag>h1</htmltag> elemanları ile eşleşir:</p>

<eg>h1 { font-family: sans-serif }</eg>
</example>

    </div2>
    <div2 id="descendant-selectors">
    <indexterm><primary>astsal seçiciler</primary></indexterm>
      <head>Astsal seçiciler</head>

<p>Zaman zaman yazarlar belge ağacında başka bir elemanın astsalı olan bir elemanla eşleşen seçiciler isteyebilirler (örneğin, bir <htmltag>h1</htmltag> elemanının içeriğindeki bir <htmltag>em</htmltag> elemanı ile eşleşmek). Astsal seçiciler bir örüntüde böyle ilişkileri ifade ederler. Bir astsal seçici  boşluk karakterleri ile ayrılmış iki veya daha fazla sayıda seçiciden oluşur. "<code>A B</code>" biçimindeki bir astsal seçici <loc href="&XPath;#axis-ancestor">üstsel</loc> elemanı <var>A</var> olan <var>B</var> elemanları ile eşleşecektir veya başka bir deyişle <var>A</var> elemanlarının <loc href="&XPath;#axis-descendant">astsalları</loc> olan <var>B</var> elemanları ile  eşleşecektir.</p>

<example>
<p>Elimizde şu kurallar olsun:</p>

<eg>h1 { color: red }
em { color: red }</eg>

<p>Rengini değiştirdikten sonra bir de metnin bir bölümünü eğik yazıyla göstermek istersek, bu iki vurgudan biri anlamını yitirecektir. Örnek:</p>

<eg><![CDATA[<h1>Bu başlık <em>çok</em> önemli</h1>]]></eg>

<p>Ama <htmltag>h1</htmltag> elemanın içeriğindeki <htmltag>em</htmltag> elemanının rengini mavi yaparak iki vurgunun tekrar anlamlı olmasını sağlayabiliriz:</p>

<eg>h1 { color: red }
em { color: red }
h1 em { color: blue }</eg>

<p>Üçüncü kural böyle bir bölümle de eşleşecektir:</p>

<eg><![CDATA[<h1>Bu <span class="myclass">başlık
<em>çok</em> önemli</span></h1>]]></eg>
</example>

<example>
<eg>div * p</eg>

<p>seçicisi bir <htmltag>div</htmltag> elemanının torunları olan <htmltag>p</htmltag> elemanları ile eşleşecektir. "*" seçicisinin etrafındaki boşlukların evrensel seçicinin parçaları olmadığına dikkat ediniz; boşluklar seçiciler arasındaki bağdaştırıcılar olup <htmltag>div</htmltag> elemanının, <htmltag>p</htmltag> elemanının üstsellerinin üstseli olması gerektiğini belirtirler.</p>
</example>

<example>
<p>Bu örnekteki kuralın içerdiği seçicide astsal seçicilerle bir <titleref ref="attribute-selectors">öznitelik seçicisi</titleref> birlikte kullanılmıştır. Seçici tarafından, <htmltag>div</htmltag> üstselleri olan <htmltag>p</htmltag> elemanlarının çocuklarından '<tt>href</tt>' özniteliği belirtilmiş olanlar seçilmektedir:</p>

<eg>div p *[href]</eg>
</example>

    </div2>
    <div2 id="child-selectors">
    <indexterm><primary>çocuk seçiciler</primary></indexterm>
      <head>Çocuk seçiciler</head>

<p>Bir <term>çocuk seçici</term> bir elemanın çocuğu olan elemanlarla eşleşir. Bir çocuk seçici "<code>></code>" bağdaştırıcılarla birbirlerinden ayrılmış iki veya daha fazla sayıda seçiciden oluşur. "<code>></code>" bağdaştırıcının etrafındaki isteğe bağlı boşluklar yoksayılır.</p>

<example>
<p>Aşağıdaki kural <htmltag>body</htmltag> elemanının çocukları olan tüm <htmltag>p</htmltag> elemanlarında satır yüksekliğini ayarlamaktadır:</p>

<eg>body > p { line-height: 1.3em }</eg>
</example>

<example>
<p>Bu örnekte astsal ve çocuk seçiciler birlikte kullanılmıştır:</p>

<eg>div ol > li p</eg>

<p>Bu seçici, <htmltag>div</htmltag> üstseli olan <htmltag>ol</htmltag> ebeveynlere sahip <htmltag>li</htmltag>'lerin astsalları olan <htmltag>p</htmltag> elemanları ile eşleşir.</p>
</example>

<p>Bir elemanın ilk çocuğunun seçilmesi ile ilgili bilgi edinmek için, <selector>:first-child</selector> sözde sınıfından bahsedilen bölüme (aşağıda) bakınız.</p>

    </div2>
    <div2 id="adjacent-selectors">
      <head>Yakın kardeş seçiciler</head>

<p>Yakın kardeş seçicilerin sözdizimi,  <code>E1 + E2</code> biçiminde olup seçicinin konusu <code>E2</code>'dir. Eğer E1 ve E2 aynı ebeveynin çocukları iseler ve belge ağacındaki sıraya göre E1, E2'den hemen önceyse, bu seçici E2 ile eşleşir.</p>

<p>Bazı bağlamlarda, bitişik elemanlar gösterimin özdevinimli elde edilmesini sağlayan biçimleme nesneleri üretirler (yanyana çerçeveler arasında düşey kenar dış boşluklarının üstüste binmesi gibi). "<code>+</code>" bağdaştırıcıları bitişik elemanlar için ek biçem belirtmeyi olanaklı kılar.</p>

<example>
<p>Aşağıdaki kurala göre, bir <htmltag>math</htmltag> elemanından hemen sonra gelen <htmltag>p</htmltag> elemanı girintilenmeyecektir:</p>

<eg>math + p { text-indent: 0 }</eg>
</example>

<example>
<p>Bu kurala göre ise, <htmltag>h1</htmltag> ve <htmltag>h2</htmltag> elemanları peşpeşe geldikleri takdirde aralarındaki boşluk azaltılacaktır:</p>

<eg>h1 + h2 { margin-top: -5mm }</eg>
</example>

<example>
<p>Bu örnek bir önceki örneğe benzemekle birlikte, bu kez <htmltag>h1</htmltag> elemanına bir öznitelik seçicisi eklenmiştir. Bu durumda, sadece '<tt>class="opener"</tt>' içeren bir <htmltag>h1</htmltag> elemanından hemen sonra bir <htmltag>h2</htmltag> elemanının varlığında ara boşluk azaltılacaktır:</p>

<eg>H1.opener + H2 { margin-top: -5mm }</eg>
</example>

    </div2>
    <div2 id="attribute-selectors">
      <head>Öznitelik seçiciler</head>

<p>BB2, kaynak belgede tanımlı özniteliklerle eşleşen kurallar belirtebilmeyi de mümkün kılmıştır.</p>

      <div3 id="selector81">
      <head>Özniteliklerin ve öznitelik değerlerinin eşleşmesi</head>

<p>Öznitelik seçiciler dört yolla eşleşebilir:</p>

<glist><gitem>
<label><code>[<var>özn</var>]</code></label>
<def><p>Elemanda <var>özn</var> özniteliği belirtilmişse değerine bakılmaksızın eşleşme sağlanır.</p></def>
</gitem><gitem>
<label><indexterm><primary>tam eşleşme</primary></indexterm>
<indexterm><primary>=</primary></indexterm>
<code>[<var>özn</var>=<var>değ</var>]</code></label>
<def><p>Elemanın <var>özn</var> özniteliğinin değeri <var>değ</var> olduğu takdirde eşleşme sağlanır.</p></def>
</gitem><gitem>
<label><indexterm><primary>boşluk ayraçlı eşleşme</primary></indexterm>
<indexterm><primary>~=</primary></indexterm>
<code>[<var>özn</var>~=<var>değ</var>]</code></label>
<def><p>Elemanın <var>özn</var> özniteliğinin değeri boşluk ayraçlı sözcüklerden oluşuyor ve belirtilen <var>değ</var> sözcüğü bu sözcüklerden biri ise eşleşme sağlanır. Bu seçici kullanılırken <var>değ</var> değeri boşluk içermemelidir.</p></def>
</gitem><gitem>
<label><indexterm><primary>tire ayraçlı eşleşme</primary></indexterm>
<indexterm><primary>&#124;=</primary></indexterm>
<indexterm><primary>dil kodu</primary></indexterm>
<code>[<var>özn</var>|=<var>değ</var>]</code></label>
<def><p>Elemanın <var>özn</var> özniteliğinin değeri tire ayraçlı sözcüklerden oluşuyor ve belirtilen <var>değ</var> sözcüğü bu sözcüklerin ilki ise eşleşme sağlanır. Bu seçici kullanılırken <var>değ</var> 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 '<tt>lang</tt>' özniteliği gibi) <bibref ref="ref-RFC1766"/>'da açıklandığı gibi eşleşmeyi mümkün kılmak için tasarlanmıştır.</p></def>
</gitem></glist>

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

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

<eg>H1[title] { color: blue; }</eg>
</example>

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

<eg>span[class="example"] { color: blue; }</eg>
</example>

<p>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.</p>

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

<eg>span[merhaba="Alanya"][elveda="Antalya"] { color: blue; }</eg>
</example>

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

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

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

<eg>*[lang="fr"] { display : none }</eg>
</example>

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

<eg>*[LANG|="en"] { color : red }</eg>
</example>

<example>
<p>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:</p>

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

DIALOGUE[character=juliet]
     { voice-family: "Vivien Leigh", victoria, female }</eg>
</example>

      </div3>
      <div3 id="selector82"><head>DTD'lerdeki öntanımlı öznitelik değerleri</head>

<p><indexterm><primary>DTD</primary></indexterm>
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.</p>

<example>
<p>Ö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:</p>

<eg><![CDATA[<!ATTLIST MESELA belirtim (onluk,sekizlik) "onluk">]]></eg>

<p>Biçembendimiz de şu kuralları içersin:</p>

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

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

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

<p>Bu seçici, bir öznitelik seçicisinden duruma daha az <titleref ref="specificity">özgü</titleref> 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.</p>
</example>

      </div3>
      <div3 id="class-html">
        <head><code>class</code> seçicileri</head>

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

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

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

<p>veya daha temiz olarak,</p>

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

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

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

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

<eg><![CDATA[<h1>Yeşil değil</h1>
<H1 class="pastoral">Koyu yeşil</h1>]]></eg>
</example>

<p>'<tt>class</tt>' ö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.</p>

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

<eg>P.pastoral.marine { color: green }</eg>

<p>Bu kural '<tt>class="pastoral blue aqua marine"</tt>' ile eşleşir fakat '<tt>class="pastoral blue"</tt>' ile eşleşmez.</p>
</example>

<note><p>BB '<tt>class</tt>' özniteliğine öyle bir güç verir ki, yazarlar belki de biçimi sağlayacak özel elemanları hemen hiç kullanmadan (HTML için sadece <htmltag>div</htmltag> ve <htmltag>span</htmltag> kullanarak) ve biçem bilgisini '<tt>class</tt>' ö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.</p></note>
      </div3>
    </div2>

    <div2 id="id-selectors">
    <head>ID seçiciler</head>

<p>Belge dilleri ID türünde bildirilmiş öznitelikler içerebilirler.  ID türündeki özniteliklerin özelliği aynı değere sahip iki ID türünden özniteliğin aynı belge içinde bulunamayışıdır; belge dili ne olursa olsun, bir ID özniteliği elemanını eşsiz olarak kimliklendirmek için kullanılabilir. HTML'de tüm ID öznitelikleri '<tt>id</tt>' ismini taşır; XML uygulamaları ID türünden öznitelikleri farklı isimlendirebilir ama aynı kurallar uygulanır.</p>

<p>Bir belge dilindeki bir ID özniteliği yazarlara belge ağacındaki bir eleman nesnesine bir betimleyici atama imkanı verir. BB ID seçicileri bir eleman nesnesini onun betimleyicisine dayanarak seçer. ID seçicileri bir "#" iminden hemen sonra ID değeri yazılarak oluşturulur.</p>

<example>
<p>Aşağıdaki kuralda, ID seçici, ID özniteliğinin değeri "chapter1" olan <htmltag>h1</htmltag> elemanı ile eşleşir:</p>

<eg>h1#chapter1 { text-align: center }</eg>
</example>

<example>
<p>Aşağıdaki belge örneğinde, biçem kuralı ID değeri "z98y" olan elemanla eşleşir. Kural bu durumda <htmltag>p</htmltag> elemanı ile eşleşecektir:</p>

<eg><![CDATA[
<head>
  <title>P eşleşir</title>
  <style type="text/css">
    *#z98y { letter-spacing: 0.3em }
  </style>
</head>
<body>
   <h1>P eşleşir</h1>
   <P id=z98y>Upuzun metin</P>
</body>]]>
</eg>

<p>Sonraki örnekte, biçem kuralı bu kez ID değeri "z98y" olan <htmltag>h1</htmltag> elemanı ile eşleşecektir. Bu örnekte <htmltag>p</htmltag> elemanı ile eşleşme gerçekleşmeyecektir:</p>

<eg><![CDATA[
<head>
  <title>Sadece H1 eşleşir</title>
  <style type="text/css">
    H1#z98y { letter-spacing: 0.5em }
  </style>
</head>
<body>
   <H1>Sadece H1 eşleşir</H1>
   <p id=z98y>Upuzun metin</p>
</body>]]>
</eg>
</example>

<p>ID seçicilerinin özgülüğü öznitelik seçicilerinden daha yüksektir. Örneğin, HTML'de <code>#p123</code> seçicisi <titleref ref="cascade">bütünleşme</titleref> kuralları gereği <code>[ID=p123]</code> seçicisinden daha duruma özgüdür.</p>

<note>
<p>XML 1.0'da <bibref ref="ref-XML10"/>, bir elemanın ID'sini hangi özniteliğin içereceği DTD'de belirlenmiştir. XML çözümlenirken, kullanıcı arayüzleri DTD'yi daima okumaz ve dolayısıyla bir elemanın ID'sinin ne olduğunu bilemeyebilirler. Bir biçembent tasarımcısı bunu biliyorsa veya şüpheleniyorsa, ID seçicileri yerine normal öznitelik seçicilerini kullanmalıdır (<code>#p371</code> yerine <code>[name=p371]</code> kullanmak gibi). Öte yandan, normal öznitelik seçicileri ID seçicilerinden bütünleşme sırası bakımından da farklıdır. Bu bakımdan bildirimlere <code>!important</code> öncelikleri eklemek gerekebilir (<code>[name=p371] {color: red ! important}</code> gibi). Şüphesiz, XML 1.0 belgeler bir DTD olmaksızın bir ID'lere de sahip olamayacaktır.</p>
</note>
    </div2>

    <div2 id="pseudo-elements">
    <indexterm><primary>sözde elemanlar</primary></indexterm>
    <indexterm><primary>sözde sınıflar</primary></indexterm>
      <head id="pseudo-classes">Sözde elemanlar ve sözde sınıflar</head>

<p>BB2'de normalde, biçem bir elemana <termref def="doctree">belge ağacı</termref>ndaki yerine göre atanır. Bu basit model çoğu durumda yeterlidir, fakat bazı bildik yayıncılık senaryoları belge ağacının yapısından dolayı mümkün olmayabilir. Örneğin, HTML 4.0'da <bibref ref="ref-HTML40"/> hiçbir eleman bir paragrafın ilk satırını gösteremez ve dolayısıyla ilk satırı gösteren basit bir BB seçicisi de yoktur.</p>

<p>BB, belge dışında kalan bilgilere dayalı biçimlemeye izin vermek için <term>sözde elemanlar</term> ve <term>sözde sınıflar</term> kavramlarını ortaya atmıştır.</p>

<ulist>
<item><p>Sözde elemanlar belge dili tarafından belirtilenler dışında belge ağacında soyutlamalar oluştururur. Örneğin, belge dilleri bir elemanın içeriğindeki ilk satıra veya ilk harfe erişim sağlayacak mekanizmalar sunmazlar. BB sözde elemanları biçembent tasarımcılarına başka türlü erişilemeyecek bilgilere erişimi mümkün kılar. Sözde elemanlar biçembent tasarımcılarına ayrıca kaynak belgede bulunmayan içeriğe biçem atama yolunu da açarlar (örneğin, <selector>:before</selector> ve <selector>:after</selector> sözde elemanları üretilen içeriğe erişim sağlarlar).</p></item>

<item><p>Sözde sınıflar, elemanları isim, öznitelik veya içeriklerinden farklı karakteristiklere göre sınıflandırırlar;ilke olarak bu karakteristikler belge ağacından elde edilemeyebilirler. Sözde sınıflar özdevimli olabilir, yani bir kullanıcı belge ile etkileşirken bir eleman bir sözde sınıfa erişim kazanabilir veya erişimi yitirebilir. İstisnası belge ağacından saptanabilen <selector>:first-child</selector> sınıfıdır. <selector>:lang</selector><code>()</code> sözde sınıfı da bazı durumlarda belge ağacında saptanabilir.</p></item>
</ulist>

<p>Ne sözde elemanlar ne de sözde sınıflar belge kaynağında veya belge ağacında yer alabilir.</p>

<p>Sözde sınıflara seçicilerde her yerde izin verildiği halde, sözde elemanlar sadece seçicinin <termref def="subject">konusu</termref> olduktan sonra bir seçicide yer alabilirler.</p>

<p>Sözde elemanlar ve sözde sınıfların isimleri harf büyüklüğüne duyarlı değildirler.</p>

<p>Bazı sözde sınıflar birbirlerinin etkilerini yokederler. Böyle çelişkili durumlarda normal <titleref ref="cascading-order">bütünleşim sırası</titleref> sorunu çözer.</p>

<p><indexterm><primary>yoksaymak</primary></indexterm>
<titleref ref="conformance">Uyumlu tarayıcılar</titleref> seçicilerde <selector>:first-line</selector> veya <selector>:first-letter</selector> elemanları geçen tüm kuralları <termref def="ignore">yoksayabilirler</termref> veya bu sözde elemanların niteliklerinin bir alt kümesini desteklemekle yetinebilirler.</p>

    </div2>
    <div2 id="selectorb">
    <indexterm><primary>sözde sınıflar</primary></indexterm>
    <head>Sözde sınıflar</head>
      <div3 id="first-child">
      <indexterm><primary>sözde sınıflar</primary> <secondary><selector>:first-child</selector></secondary></indexterm>
        <head><code><kw>:first-child</kw></code> sözde sınıfı</head>

<p><indexterm><primary>ilk çocuk</primary></indexterm>
<indexterm><primary><selector>:first-child</selector></primary></indexterm>
<termdef id="seldef-first-child" term=":first-child sözde sınıfı"><code>:first-child</code> sözde sınıfı, başka bir elemanın ilk çocuğu olan elemanla eşleşir</termdef>.</p>

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

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

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

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

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

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

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

<eg>p:first-child em { font-weight : bold }</eg>
</example>

<p><termref def="anonymous">Anonim</termref> çerçeveler belge ağacının parçası olmadıklarından ilk çocuk bulunurken hesaba katılmayacaklarına dikkat ediniz.</p>

<example>
<eg><![CDATA[<p>abc <em>öntanımlı</em></p>]]></eg>

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

<p>Aşağıdaki iki seçici eşdeğerdir:</p>

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


      </div3>
      <div3 id="link-pseudo-classes">
      <indexterm><primary><selector>:link</selector></primary></indexterm>
      <indexterm><primary><selector>:visited</selector></primary></indexterm>
        <head>Bağlantı sözde sınıfları: <code><kw>:link</kw></code> ve <code><kw>:visited</kw></code></head>
<p><indexterm><primary>link</primary></indexterm>
<indexterm><primary>sözde sınıflar</primary> <secondary><selector>:link</selector> (ziyaret edilmemiş)</secondary></indexterm>
<indexterm><primary>ziyaret edilmiş</primary></indexterm>
<indexterm><primary>sözde sınıflar</primary> <secondary><selector>:visited</selector> (ziyaret edilmiş)</secondary></indexterm>
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 <code>:link</code> ve <code>:visited</code> sözde sınıflarını sağlar:</p>

<ulist>
<item><p><termdef id="seldef-link" term=":link sözde sınıfı"><code>:link</code> sözde sınıfı henüz ziyaret edilmemiş bağlantılara uygulanır</termdef>.</p></item>

<item><p><termdef id="seldef-visited" term=":visited sözde sınıfı"><code>:visited</code> sözde sınıfı bağlantı kullanıcı tarafından ilk ziyaret edildiğinde uygulanır</termdef>.</p></item>
</ulist>

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

<p>Bu iki durum aynı anda varolamaz.</p>

<p>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ı '<tt>href</tt>' özniteliğine sahip <htmltag>a</htmltag> elemanlarına uygulanır. Bu bakımdan, aşağıdaki iki BB2 bildirimi aynı etkiye sahiptir:</p>

<eg>
a:link { color: red }
:link  { color: red }
</eg>

<example>
<eg>&lt;a class="harici" href="http://harici.taraf/">harici bağlantı&lt;/a></eg>

<p>bağlantısı ziyaret edildiğinde, bu kural:</p>

<eg>a.external:visited { color: blue }</eg>

<p>onu mavi yapacaktır.</p>
</example>

      </div3>
      <div3 id="dynamic-pseudo-classes">
      <indexterm><primary><selector>:hover</selector></primary></indexterm>
      <indexterm><primary><selector>:active</selector></primary></indexterm>
      <indexterm><primary><selector>:focus</selector></primary></indexterm>
        <head>Özdevimli sözde sınıflar: <code><kw>:hover</kw></code>, <code><kw>:active</kw></code> ve <code><kw>:focus</kw></code></head>

<p>
<indexterm><primary>hover</primary></indexterm>
<indexterm><primary>sözde sınıflar</primary> <secondary><selector>:hover</selector></secondary></indexterm>
<indexterm><primary>active</primary></indexterm>
<indexterm><primary>sözde sınıflar</primary> <secondary><selector>:active</selector></secondary></indexterm>
<indexterm><primary>focus</primary></indexterm>
<indexterm><primary>sözde sınıflar</primary> <secondary><selector>:focus</selector></secondary></indexterm>
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:</p>

<ulist>
<item><p><termdef id="seldef-hover" term=":hover sözde sınıfı"><code>:hover</code> 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. <termref def="interactive-media-group">Etkileşimli ortam</termref>ı 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</termdef>.</p></item>

<item><p><termdef id="seldef-active" term=":active sözde sınıfı"><code>:active</code> 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)</termdef>.</p></item>

<item><p><termdef id="seldef-focus" term=":focus sözde sınıfı"><code>:focus</code> 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</termdef>.</p></item>
</ulist>

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

<p>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.</p>

<p>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 (<selector>:active</selector>) bağlantının yazıtipi yüksekliğini (<property>font-size</property>) 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.</p>

<example>
<eg>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 */</eg>

<p>Bütünleşme kurallarının <code>a:hover</code> kuralının <property>color</property> niteliğini gizlememesi için <code>a:hover</code> kuralı, <code>a:link</code> ve <code>a:visited</code> kurallarının sonrasına yerleştirilmelidir. Benzer şekilde, <code>a:active</code> kuralı <code>a:hover</code> 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.</p>
</example>

<example>
<p>Özdevimli sözde sınıfları biraraya getiren bir örnek:</p>

<eg>a:focus { background: yellow }
a:focus:hover { background: white }</eg>

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

<p>Odak sınırlarının gösterimi hakkında daha ayrıntılı bilgi edinmek için <specref ref="dynamic-outlines"/> bölümüne bakınız.</p>

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

      <div3 id="seldef-lang">
      <indexterm><primary><selector>:lang</selector></primary></indexterm>
        <head>Dil sözde sınıfı: <code><kw>:lang</kw></code></head>
<p><indexterm><primary>dil (insan)</primary></indexterm>
<indexterm><primary>dil (sözde sınıf olarak)</primary></indexterm>
<indexterm><primary>sözde sınıflar</primary> <secondary><selector>:lang</selector></secondary></indexterm>
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 <bibref ref="ref-HTML40"/> dil <htmltag>meta</htmltag> elemanının '<tt>lang</tt>' özniteliği ile bir ihtimal protokoldeki bilginin (örn, HTTP başlıklarından) bir birleşimi olarak saptanır. XML, <tt>xml:lang</tt> özniteliğinde belirtir, diğer dillerde dili saptamak için kendilerine özgü yöntemler kullanılıyor olabilir.</p>

<p><indexterm><primary>dil kodu</primary></indexterm>
<termdef id="lang" term=":lang sözde sınıfı"><code>:lang(<var>c</var>)</code> sözde sınıfı. dili <var>c</var> olan bir elemanla eşleşir. Burada <var>c</var>,  <bibref ref="ref-RFC1766"/> ve <bibref ref="ref-HTML40"/>'da belirtilen dil kodlarından biridir. Eşleşme <titleref ref="attribute-selectors"><tt>|=</tt> işleci</titleref>nin kullandığı eşleşme yöntemi ile bulunur</termdef>.</p>

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

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

<p>İkinci kural çifti <htmltag>q</htmltag> elemanının <property>quotes</property> 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.</p>
</example>
      </div3>
    </div2>

    <div2 id="selectorc"><head>Sözde elemanlar</head>
    <indexterm><primary><selector>:first-line</selector></primary></indexterm>
      <div3 id="first-line-pseudo">
        <head>The <code><kw>:first-line</kw></code> sözde elemanı</head>
<p><indexterm><primary>first-line</primary></indexterm>
<indexterm><primary>sözde elemanlar</primary> <secondary><selector>:first-line</selector></secondary></indexterm>
<termdef id="seldef-first-line" term=":first-line sözde elemanı"><code>:first-line</code> sözde elemanı bir paragrafın ilk biçimli satırına özel bir biçem uygular</termdef>.</p>

<example>
<eg>p:first-line { text-transform: uppercase }</eg>

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

<p>İ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>

<eg>&lt;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.&lt;/p></eg>

<p>Satırlar şöyle oluşurdu:</p>

<eg>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.</eg>


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

<eg>&lt;p><kw>&lt;p:first-line></kw>Bu, çok sayıda satıra bölünmüş
uzunca <kw>&lt;/p:first-line></kw> 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.&lt;/p>
</eg>

<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ı <htmltag>span</htmltag> elemanı ile imleyelim:</p>

<eg>&lt;p><kw>&lt;span class="dnm"></kw>Bu, çok sayıda satıra bölünmüş
uzunca bir paragraf olup <kw>&lt;/span></kw> 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.&lt;/p></eg>

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

<eg>&lt;p>&lt;p:first-line><kw>&lt;SPAN class="dnm"></kw>Bu,
çok sayıda satıra bölünmüş uzunca bir <kw>&lt;/SPAN></kw>&lt;/P:first-line>
<kw>&lt;SPAN class="dnm"></kw> paragraf olup <kw>&lt;/SPAN></kw>
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.&lt;/p></eg>
</example>

<p><indexterm><primary>sözde elemanlar</primary> <secondary>:first-line</secondary></indexterm>
<selector>:first-line</selector> sözde elemanı sadece blok seviyesinden elemanlar için kullanılabilir.</p>

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

<eg><![CDATA[<B>...<A>...
<B:first-line>
  <A:first-line>Bu ilk satırdır</A:first-line>
</B:first-line>]]></eg>

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

<p>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:</p>

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

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

<p><selector>:first-line</selector> sözde elemanı satıriçi seviyeden bir eleman gibi olmakla birlikte bazı kısıtlamaları tabidir. Sadece şu niteliklere uygulanır: <titleref ref="font-properties">yazıtipi nitelikleri</titleref>, <titleref ref="colors">renk nitelikleri</titleref>, <titleref ref="background-properties">artalan nitelikleri</titleref>, <property>word-spacing</property>, <property>letter-spacing</property>, <property>text-decoration</property>, <property>vertical-align</property>, <property>text-transform</property>, <property>line-height</property>, <property>text-shadow</property> ve <property>clear</property>.</p>
      </div3>

      <div3 id="first-letter">
<indexterm><primary><selector>:first-letter</selector></primary></indexterm>
        <head><code><kw>:first-letter</kw></code> sözde elemanı</head>

<p><indexterm><primary>ilk harf</primary></indexterm>
<indexterm><primary>sözde elemanlar</primary> <secondary><selector>:first-letter</selector></secondary></indexterm>
<indexterm><primary>baş harf</primary></indexterm>
<termdef id="seldef-first-letter" term=":first-letter sözde elemanı"><code>:first-letter</code> sözde elemanı bir paragrafın baş harfinde bazı görsel etkiler oluşturmak için kullanılır. <property>float</property> niteliği <literal>none</literal> olduğunda bir satıriçi elemana, aksi takdirde bir yüzen elemana benzer</termdef>.</p>

<p><selector>:first-letter</selector> sözde elemanına şu nitelikler uygulanabilir: <titleref ref="font-properties">yazıtipi nitelikleri</titleref>, <titleref ref="colors">renk nitelikleri</titleref>, <titleref ref="background-properties">artalan nitelikleri</titleref>,
<property>text-decoration</property>, <property>vertical-align</property> (sadece <property>float</property> niteliği <literal>none</literal> iken), <property>text-transform</property>, <property>line-height</property>, <titleref ref="margin-properties">dış kenar boşluğu (margin) nitelikleri</titleref>, <titleref ref="padding-properties">iç kenar boşluğu (padding) nitelikleri</titleref>, <titleref ref="border-properties">kenar (border) nitelikleri</titleref>, <property>float</property>, <property>text-shadow</property> ve <property>clear</property>.</p>

<p>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:</p>

<eg><![CDATA[
<!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>]]></eg>

<p>Bu örnek şöyle biçimlenmiş olabilir:</p>

<figure id="img-first-letter">
<graphic source="./images/basharf.png" alt=":first-letter sözde elemanının kullanım örneği"/>
[<loc href="images/longdesc/first-letter-desc.html" title="Başharfin büyütülme örneğinin geniş açıklaması">Açıklama</loc>]
</figure>

<p><indexterm><primary>kurgusal etiketler</primary></indexterm>
Kurgusal etiketler:</p>

<eg><![CDATA[<p>
<span>
<p:first-letter>
A
</p:first-letter>çıklamalar
</span>
 dizgecikler arasında her yerde ...]]></eg>

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

<p>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.</p>

<p>Başharfi de içine alan bir noktalama (yani, <bibref ref="ref-UNICODE"/>'da atanmış olan Ps, Pe ve Po noktalama sınıflarından bir karakter) mevcutsa bu da baş harfle birlikte biçimlenmelidir:</p>

<figure id="img-first-letter2">
<graphic source="./images/basharf1.png" alt="Başharften önceki tırnak işareti, başharfe dahil edilmelidir."/>
[<loc href="images/longdesc/first-letter2-desc.html" title="Tırnak içinde başharf örneğinin geniş açıklaması">Açıklama</loc>]
</figure>

<p><selector>:first-letter</selector> sözde elemanları <termref def="block-level">blok seviyesinden</termref> elemanlarla eşleşir.</p>

<p>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 <selector>:first-letter</selector> sözde elemanı için tek harf kabul edilmelidir.</p>

<example>
<p>Aşağıdaki örnekte üstüste binen sözde elemanların nasıl etkileştikleri gösterilmiştir. Her <htmltag>p</htmltag> 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>

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

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

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

<eg><![CDATA[
<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>]]></eg>

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

      </div3>
      <div3 id="before-and-after">
      <indexterm><primary><selector>:before</selector></primary></indexterm>
      <indexterm><primary><selector>:after</selector></primary></indexterm>
        <head><code><kw>:before</kw></code> ve <code><kw>:after</kw></code> sözde elemanları</head>
<p>
<indexterm><primary>before</primary></indexterm>
<indexterm><primary>sözde elemanlar</primary> <secondary><selector>:before</selector></secondary></indexterm>
<indexterm><primary>after</primary></indexterm>
<indexterm><primary>sözde elemanlar</primary> <secondary><selector>:after</selector></secondary></indexterm>
<termdef id="seldef-before" term=":before sözde elemanı"><code>:before</code> </termdef> ve <termdef id="seldef-after" term=":after sözde elemanı"><code>:after</code> sözde elemanları bir elemanın içeriğinden önce veya sonra üretilmiş bir içeriği yerleştirmek için kullanılır</termdef>. Bunlar <specref ref="generate"/> bölümünde incelenmiştir.</p>

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


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

<example>
<eg>p.special:before {content: "Special! "}
p.special:first-letter {color: #ffd800}</eg>

<p>Bu kural "Special!" dizgesinin "S" harfini altın rengi yapacaktır.</p>
</example>
    </div3>
  </div2>
</div1>


