Adjacent Sibling Selector (Bitişik Kardeş Seçiciler)

Adjacent Sibling Selector (Bitişik Kardeş Seçiciler), Adjacent Sibling Selector, Bitişik Kardeş Seçiciler, Evrensel Seçiciler, Universal Selector, Css Selector, Css Seçici kodlar… Web Tasarım CSS Kodları, HTML5 Web Tasarım CSS Kodları, Merhabalar değerli ziyaretçimiz web sitemize hoş geldiniz, bugünkü konumuz Bitişik Kardeş Seçiciler yani Adjacent Sibling, diğer bir konumuz Evrensel Seçiciler yani Universal Selector.

Hemen bilgi paylaşımına başlayalım.

Belge hiyerarşisinde aynı katmandaki seçiciler arasındaki ilişkiyi ifade eden terimdir.

<body>

<h2> Başlık2 <em> Metni </em> </h2>

<h3> Başlık3 Metni </h3>

<p> Okuduğumuz bu <em> metin </em> örnekleme <strong> amaçlıdır. </strong> </p>

</body>

Şemadan kolaylıkla anlaşıldığı gibi h2 ile h3 ve em ile strong etiketleri aynı seviyede olduklarından kardeş etikettirler. Buna göre örnek bir kullanımı inceleyelim.

h2 +h3 {margin:2em;}

şeklindeki kullanımda em ve strong kardeş seçici durumunda olduklarından arama + (artı) işareti konularak kullanılır

Evrensel Seçiciler (Universal Selector)

Tanımlanacak stilin, belgenin tamamına ya da bir seçicinin içindeki tüm öğelere uygulanmak istendiği durumlarda kullanılır * {Özellik:Değer;} şeklinde kullanılır.

Başındaki *(yıldız) işareti özelliğe uygulanan değerin tüm belgede geçerli olacağı anlamına gelmektedir.

<body>

<h2> Başlık Metni </h2>

<h3> Altbaşlık Metni </h3>

<p> Lorem ipsum dolor sit amet, <i> consectetuer adipiscing </i> elit. <strong>Vestibulum convallis </strong> sapien eget dolor. Duis eget massa et nisi blandit sagittis. </p> </body>

Yukarıdaki gibi bir XHTML belgede örneğin;

*{text-decoration:underline;}

şeklindeki bir kullanımda, aşağıdaki resimde gördüğümüz gibi uyguladığımız özellik belgenin tamamında geçerli olmaktadır.

Özelliği tüm belgeye değil de, bir seçiciye uygulayacağımızda ise kullanımı:

seçici * { Özellik:Değer;} şeklinde olmaktadır.

Buna göre, bir örnek yapalım:

p*{text-decoration:underline;}

şeklindeki kod saedce belgedeki p seçicisinin içindeeki tüm öğelere uygulanacaktır.

Öznitelik Seçiçileri (Attribute Selectors)

XHTML etiketleri ile birlikte kullanılan özniteliklere göre stil ataması yapmamızı sağlayan yöntemdir. Basit Öznitelik Seçicisi, Öznitelik Değeri Seçicisi, Kısmi Öznitelik Değeri Seçicisi, Ayrımlı Öznitelik Değeri Seçicisi olmak üzere dört tür öznitelik seçicisi mevcuttur.