Merhabalar, bu yazımda Group selector’e bakacağız.

Önceki 3 yazımda 3 tip seçim şekli gördük. Tag, Class, Id seçimleri. Bunları beraber kullanarak group seçimleri yapabiliriz.

Tamamını yazmak zor olsa da 7 tane kullanma ihtimaliniz olan Group selector’leri buraya eklemeye çalıştım.

    1 : *       => tüm etiketler 
    2 : p       => tüm p etiketleri
    3 : div p   => div içindeki tüm p etiketleri
    4 : div,p   => tüm div ve tüm p etiketleri
    5 : div > p => üst etiketi div olan tüm p 
    6 : p ~ div => p ile aynı seviyede tüm div 
    7 : p + div => p etiketinden sonra gelen div 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Group Selectors</title>

    <style>
        /*  Group Selectors  

    1 : (*)     => tüm etiketler 
    2 : (p)    => tüm p etiketleri
	3 : (div p) => div içindeki tüm p etiketleri
	4 : (div,p) => tüm div ve tüm p etiketleri
	5 : (div > p) => üst etiketi div olan tüm p 
	6 : (p ~ div)=> p ile aynı seviyede tüm div 
	7 : (p + div)=> p etiketinden sonra gelen div 

*/

        * {
            border: 1px solid blue;
        }

        div~p {
            border: 1px solid red;
        }

        p {
            border: 1px solid blue;
        }

        .container div.box {
            border: 1px solid red;
        }

        div p {
            border: 1px solid blue;
        }

        div,p {
            border: 1px solid blue;
        }

        div.box,
        p {
            border: 1px solid blue;
        }

        div>p {
            border: 1px solid red;
        }

        p~div {
            border: 1px solid red;
        }
    </style>
    
</head>

<body>

    <div class="container">

        <p class="p1">.container > paragraf 1</p>
        <p class="p1">.container > paragraf 2</p>

        <div class="box">
            .container > box 1

            <p>.container > box > paragraf 3</p>
            <p>.container > box > paragraf 4</p>

        </div>
        <div class="box">
            .container > box 2
        </div>
        <div class="box">
            .container > box 3
        </div>

        <div>
            .container > div
        </div>

    </div>

    <p>paragraf 5</p>
    <p>paragraf 6</p>

    <div class="box">box 4</div>
    <div class="box">box 5</div>


</body>

</html>

Bir sonraki yazımda görüşmek üzere.


What's Your Reaction?

love
0
love
hate
0
hate
win
0
win
geeky
0
geeky
omg
0
omg
lol
0
lol
fail
0
fail
fun
0
fun
Murat Bilginer
21 Şubat 1992'de doğdum. Endüstri Mühendisi olarak lisansımı 2016 yılında tamamladım. Industryolog Akademi - NGenius oluşumlarının kurucusuyum. Şu anda kendi şirketim Brainy Tech ile Web ve Mobil Geliştirme, AWS, Google Cloud Platform Sistemleri İçin DevOps, Big Data Analiz ve Görselleştirme hizmetleri sunmakta ve Online Eğitimler vermekteyiz.