zapis css #div1 > .div2 #div1 .div2 #div1 , .div2

pytanie zadane 3 marca 2016 w HTML i CSS przez Dynamic Bywalec (2,910 p.)

Witam mam pytanie czym różnią się zapisy

#div1 > .div2
{

}

#div1  .div2
{

}

#div1 ,  .div2
{

}

jest jakaś konkretna różnica między tymi zapisami?

5 odpowiedzi

odpowiedź 3 marca 2016 przez Arkadiusz Waluk Ekspert (287,950 p.)

Jest i to bardzo duża.

Pierwszy zapis będzie dotyczył tylko elementów o klasie div2 które są bezpośrednio w elemencie o id div1.

Drugi zapis będzie dotyczył wszystkich elementów o klasie div2 w elemencie o id div1 - już nie muszą być bezpośrednio.

Przykład:

<div id="div1">
    <div class="div2">pierwszy</div>
    <div>
        <div class="div2">drugi</div>
    </div>
</div>

W przypadku zapisu pierwszego wpisane właściwości CSS będą dotyczyły tylko diva z zawartością pierwszy - bo tylko on jest bezpośrednio w elemencie o id div1. W przypadku zapisu drugiego podane reguły CSS będą dotyczyły zarówno diva o zawartości pierwszy i drugi.

A trzeci zapis to zupełnie co innego, on po prostu będzie dotyczył elementu o id div1 i elementów o klasie div2 bez żadnych powiązań.

komentarz 3 marca 2016 przez Dynamic Bywalec (2,910 p.)

    <div class="div2">pierwszy</div>
    <div>  /* do czego jest ten div

komentarz 3 marca 2016 przez Arkadiusz Waluk Ekspert (287,950 p.)

Do niczego, po prostu dałem go tu dla przykładu, aby pokazać że gdy element nie jest bezpośrednio w elemencie o id div1 to przy pierwszym zapisie właściwości CSS nie będą go obowiązywały.

komentarz 3 marca 2016 przez Eimens Maniak (69,240 p.)

Bardzo fajnie wytłumaczone :)

odpowiedź 3 marca 2016 przez chomek Gaduła (4,500 p.)

odpowiedź 3 marca 2016 przez niezalogowany

Wszystkie elementy z klasą div2, których rodzicem jest element div1
Wszystkie elementy z klasą div2 będące potomkiem elementu div1
Element div1 i elementy z klasą div2

komentarz 3 marca 2016 przez Dynamic Bywalec (2,910 p.)

z definicji wiedziałem,chodzi mi o to co to znaczy xd

odpowiedź 3 marca 2016 przez Dynamic Bywalec (2,910 p.)

*
{
    margin:0;
}
.div1
{
    height: 100px;
    background-color: red;
}

.div1 .div2
{
    color: #fff;
}

*
{
    margin:0;
}
.div1
{
    height: 100px;
    background-color: red;
}

.div1 > .div2
{
    color: #fff;
}

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="div1">
    <div class="div2">pierwszy</div>
</div>

</body>
</html>

Efekt jest ten sam, nadal nie rozumiem ;c

komentarz 3 marca 2016 przez Arkadiusz Waluk Ekspert (287,950 p.)

Zmień sobie dla testu fragment na takie coś jak było u mnie, przykładowo:

<div class="div1">
    <div class="div2">pierwszy</div>
    <div>
        <div class="div2">drugi</div>
    </div>
</div>

I wtedy powinieneś zobaczyć różnicę.

odpowiedź 3 marca 2016 przez Dynamic Bywalec (2,910 p.)

Czyli na przykład mam

coś cos cos
coś cos cos

To zapis .menu > ol { Color:red; } Odwołany się tylko do ol A .menu ol { Color: red; } Tez do li ?

komentarz 3 marca 2016 przez Arkadiusz Waluk Ekspert (287,950 p.)

Trochę nie za bardzo rozumiem co chciałeś przekazać. Chodziło Ci o to, że pisząc .menu ol odwołamy się także do li? Jeśli tak, to oczywiście, że nie. Pisząc bez znaku > odwołasz się po prostu do wszystkich elementów danego typu (w przykładzie dałeś ol), a pisząc z > tylko do tych które są bezpośrednio w danym elemencie. Spróbowałeś tego przykładu jaki pisałem Ci wyżej?

Zobacz jeszcze tutaj: http://codepen.io/awaluk/pen/eZNXKR

Nie wiem jak to już prościej można wytłumaczyć, wszystko ewidentnie widać. Przy zapisie .test1 > p właściwości dotyczą tylko elementów które są bezpośrednio w elemencie o klasie test1 - jeśli więc np. dałem tam dodatkowego diva i w nim dopiero p to jak widać nie działa, kolor czerwony nie jest nadawany. Gdy wpiszemy .test2 p to już działa na wszystkie elementy w danym elemencie (w przykładzie klasa test2) - bez znaczenia ile by tam było różnych elementów i gdzie by to p było, to będzie na niego działało. Przeanalizuj uważnie ten przykład, prościej chyba się nie da.

Aha, odpowiadając na to samo pisz komentarz, a nie nową odpowiedź - tak jest wygodniej i czytelniej.