Merhaba.

CSS3 Eğitimlerimizin 4. sü ile beraberiz.

Bugün sizlere CSS3 Seçicilerinden bahsedeceğim. Bundan bahsederken birazda HTML de var olan hiyerarşiye de biraz değinmiş olacağım.

Descandant Selectors ( Torun Seçicileri)

Biliyorsunuz HTML de etiketler içinde etiketler yazabildiğimiz bir yapı var. Bu da bir tür hiyerarşinin oluşmasını sağlamıştır. 

Örneğimizle işe bakarsak anlaması kolaylaşacak. 

Bir H1 etiketiyle başlık oluşturup buna em etikeyi ile italic özelliği verelim.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Project Zeta</title>

    <style>

h1 em{

    font-family: 'Times New Roman', Times, serif;
    color: blueviolet;

}
    
    </style>



</head>
<body>

    <h1><em>Industryolog Akademi</em></h1>

    <h1>Project Zeta</h1>
    
</body>
</html>

Burada farkına varmanız gereken en önemli şey torun seçici olarak yazdığınız CSS hangi etiket hiyerarşisine göre yazılmışsa sadece oraya etki edecektir.

İki tane h1 etiketi ile yazılmış içerik var ama CSS sadece h1 içinde em etiketi olan içeriğe etki etti. 

h1 em{

    font-family: 'Times New Roman', Times, serif;
    color: blueviolet;

}

Şu kod için kısaca şöyle bir açıklama yapabiliriz. Atası h1 olan tüm em etiketleri için var olan özellikler uygulansın demektir.

Daha güçlü bir örneğine bakalım.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Project Zeta</title>

    <style>

h1 em{

    font-family: 'Times New Roman', Times, serif;
    color: blueviolet;

}

ul ol ul em{

    color:brown;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 20px;
}
    
    </style>



</head>
<body>

    <h1><em>Industryolog Akademi</em></h1>

    <h1>Project Zeta</h1>

    <ul>

        <ol>Kahve</ol>
        <ol>
            <ul>
                <em>Çay</em>

            </ul>

            </ol>

    </ul>
    
</body>
</html>

Daha güçlü bir örneğimizle devam edelim şimdi. Normalde HTML ile yapmanın çok olasılıklı olmadığı bir durumu ele alacağız. Bir tablo oluşturacağız Bir tane alanın arka planı sarı bir tanesi kırmızı olacak ve içerisinde link verdiğimiz bir içerik olacak. Bu içerik renkleri de farklı farklı olacak.

Yapalım.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Project Zeta</title>

    <style>

h1 em{

    font-family: 'Times New Roman', Times, serif;
    color: blueviolet;

}

ul ol ul em{

    color:brown;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 20px;
}

td.sidebar{
    background: yellow;
    
}

td.main{

background: red;


}

td.sidebar a:link{
    color:black;
}

td.main a:link{
    color:white;
}
    
    </style>



</head>
<body>

    <h1><em>Industryolog Akademi</em></h1>

    <h1>Project Zeta</h1>

    <table style="width:100%">
            <tr>
              <th>Site Adı</th>
              <th>Site Linki</th> 
              
            </tr>

            <tr>
              <td class="sidebar">Industryolog</td>
              <td class="main"> <a href="https://www.dna.industryolog.com">www.dna.industryolog.com</a></td> 
             
            </tr>

            <tr>
              <td class="sidebar">DNA</td>
              <td class="main"><a href="https://www.industryolog.com">www.industryolog.com</a></td> 
             
            </tr>

          </table>

         
          
    
</body>
</html>

Child Selectors (Çocuk Seçicileri)

Bazen öyle durumlar olur ki tanımladığımız bir torun element başka bir ataya sahip olabilir. Biz onun değil sadece o torun elemente ait özellikleri değiştirirsek biraz daha derine inip özelleştirilmiş bir seçici kullanmamız gerekecektir. O da çocuk elemen seçicimizdir.

Hemen örnekle görelim. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Project Zeta</title>

    <style>

h1>strong{

    color:blue;
}    
    </style>

</head>
<body>

    <h1><strong>Industryolog Akademi</strong></h1>

    <h1><em>Project<strong>Zeta</strong></em> </h1>
    
</body>
</html>

Gördüğümüz gibi h1 direkt olarak sadece ilk strong elementinin ebeveyni olduğu için stil sadece ilk satıra etkidi. Alt satırdaki strong elementinin ebeveyni em olduğu için em>strong tanımlamasıyla stil özellikleri yazılmalıydı.

Bitişik Seçiciler

Bitişik Kardeş Seçicileri birbiri ardına gelen aynı seviyedeki elementlerden sonra gelenine stil tanımlamak için kullanılır. Tam olarak “Bir Ufak Kardeş Seçicisi” olmalıdır. Bir örnek verelim bir başlığımız var ve sonrasında ard arda paragraflar geliyor. Biz başlık ile hemen ardından gelen paragrafın arasına mesafe koymak için bu seçiciyi kullanabiliriz.

Bitişik kardeş seçiciler için 

h1+h1{

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Project Zeta</title>

    <style>

h1+h2{

    margin: 10px;
}    
    </style>

</head>
<body>
        <h1>Industryolog</h2>
        <h2>Project Zeta</h3>
        <p>Buraya <em>önemli</em> ve <strong>iyi</strong>kod gir</p>
        <p>Buraya <em>önemli</em> ve <strong>iyi</strong>kod gir</p>
</body>
</html>

Genel Seçiciler

Bir HTML dosyası içinde bir özelliği tüm elementlere uygulamak isteyebiliriz. Bunun içinde bir genel element seçici oluşturulmuş. * işaretiyle gösterilir.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Project Zeta</title>

    <style>

h1+h2{

    margin: 10px;
}    

*{

background: red;

}
    </style>

</head>
<body>
        <h1>Industryolog</h2>
        <h2>Project Zeta</h3>
        <p>Buraya <em>önemli</em> ve <strong>iyi</strong>kod gir</p>
        <p>Buraya <em>önemli</em> ve <strong>iyi</strong>kod gir</p>
</body>
</html>

Bugünkü yazımda bu kadardı. Element seçicileri tanımış olduk. Bir sonraki yazımda görüşmek üzere.


muratbilginer