FrontEnd Developer RoadMap - CSS3 Tutorial 17 Group Selector

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>