HIZLI
TEKLİF AL
WEB TASARIM AJANSI TÜRKİYE

CSS Birleştirici Seçiciler

  1. Anasayfa
  2. CSS Birleştirici Seçiciler

Birleştirici seçiciler elemanlar arasındaki ilişkiyi belirleyen css seçicileridir.

Bir seçici içerisindeki diğer elemanları, komşu ve çocuk elemenları seçebilmek için birleştirici css seçicileri kullanırız.

 

 

Sayfa Başlıkları

Birleştirici (Combinator) CSS Seçici Türleri

  • boşluk : Bir elemanın soyundan gelen bir öğeyi seçmek için boşluk kullanılır. örenek: div.main h1{} dediğimizde .main classname'e sahip div içerisindeki h1 öğesi seçilmiş olur.
  • > : Çocuk seçicidir. Bir elemanın hemen altındaki ilk element düğümümünden öğeleri seçmek için kullanılır.
  • + : Komşu kardeş öğeleri seçmek için kullanılır.
  • ~ : Genel kardeş öğeleri seçmek için kullanılır.

Alt Seçicler (Boşluk)

Bir HTML öğesi altındaki seçilmek istenen öğeleri belritmek için kullanılır.

HTML Kodu

<div class="main">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti accusantium rerum
        sapiente ad rem porro eligendi non eos error praesentium.</p>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti accusantium rerum
        sapiente ad rem porro eligendi non eos error praesentium.</p>
CSS Kodu

div.main{
    padding:20px;
    margin:20px;
    background-color:red;
}
div.main p{
    color:#fff;
    font-size:20px;
    text-align:center;
}
Sonuç

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti accusantium rerum sapiente ad rem porro eligendi non eos error praesentium.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti accusantium rerum sapiente ad rem porro eligendi non eos error praesentium.

Burada .main classname'e sahip div öğesi içerisindeki p elemanını stillendirmiş olduk.

Çocuk (>) Seçiciler

Bir HTML öğesinin hemen altındaki ilk hiyerarşiden gelen öğeleri seçmek için kullanılır. Seçilen öğelerin altındaki aynı tür elemanları farklı şekilde stillendirmek istiyorsak çocuk seçici > kullanmak büyük fayda sağlayacaktır.

Örnek HTML Kodları

<ul class="example">
    <li><a href="#">1. Seviye a Elemanı</a>
        <ul>
            <li><a href="#">2. Seviye a Elemanları Seçilmeyecek.</a></li>
            <li><a href="#">2. Seviye a Elemanları Seçilmeyecek.</a></li>
            <li><a href="#">2. Seviye a Elemanları Seçilmeyecek.</a></li>
        </ul>
    </li>
    <li><a href="#">1. Seviye a Elemanı</a></li>
    <li><a href="#">1. Seviye a Elemanı</a></li>
    <li><a href="#">1. Seviye a Elemanı</a></li>
</ul>
Örnek CSS Kodları

ul.example{
    list-style:none;
    padding:20px;
    
}
ul.example > li > a{
    background-color:red;
    color:#fff;
    font-size:20px;
    padding:10px;
    display:inline-block;
}
Sonuç

Komşu Kardeş Seçici (+)

Komşu kardeş seçiciler genellikle belirli bir öğeden sonra gelen aynı hiyerarşideki ilk öğeyi seçmek için kullanılır.

Aşağıdaki örenkte h4 öğesinden sonra gelen ilk p öğesi seçilmektedir.


<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur, corrupti.</p>
<h6>Örnek HTML Kodları</h6>
<h4 class="myTitle">Örnek Başlık</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur, corrupti.</p>
<div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, dolore.</p>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, dolore.</p>
Örnek CSS Kodları

h4.myTitle+p{
    background-color:blue;
    padding:10px;
    color:#fff;
    font-size:20px;
}
Sonuç

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur, corrupti.

Örnek Başlık

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur, corrupti.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, dolore.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, dolore.

Genel Seçici (~)

Genel seçici ~ ile bir öğeden sonra gelen tüm kardeş öğeler seçilebilir.

Örnek HTML Kodları

<p>Div'den önce gelen "p" öğesi Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Ipsum,
    provident?</p>
<div class="example1">
    <span>Div Öğesi</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, provident?</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, provident?</p>
<span>Span Öğesi</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, provident?</p>
Örnek CSS Kodları

div.example1 {
    border: 2px solid red;
    padding: 15px;
}
div.example1~p {
    background-color: yellow;
    color: red;
    font-weight: bold;
    font-size: 18px;
    padding: 10px;
}
Sonuç

Div'den önce gelen "p" öğesi Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, provident?

Div Öğesi

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, provident?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, provident?

span öğesi

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, provident?

CSS Seçiciler Önceki Ders CSS Pseudo Class (Sözde Sınıf Seçiciler) Sonraki Ders