Różnice w stylizowaniu "ul ul" vs "ul > ul"

pytanie zadane 22 lutego 2017 w HTML i CSS przez Karol Loczeski Użytkownik (820 p.)

Proszę o łopatologiczne wyjaśnienie w sekcji CSS jest ul ul,zamiana na ul > ul powoduję rozwalenie całego schematu. Natomiast na końcu gdzie stylizowałem
ul.menu1 > li.glowne:hover > ul.menu2 tutaj znacznik ">" nie ma znaczenia i trochę się pogubiłem.

Wiem że ul >ul1 - stylizujemy ul1 no ale idąc tym tokiem myślenia na końcu ul.menu1 > li.glowne:hover > ul.menu2 tutaj znacznik "> powinniśmy stylizować ul.menu2 a nie wszystkie ?

Raczkuję, proszę o wyrozumiałość.

<!DOCTYPE html>
<html lang="pl">
<head>
                <title>kebab</title>
                <meta charset="utf-8">
                <meta name="description" content="ćwiczenia z divami">
                <meta name="keywords" content="kafelki,div,cwiczenia">
                <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
                <link href="style1.css" style="text/css" rel="stylesheet">
</head>

<body>
        

<div id="nic"></div>
<ul class="menu1">
        

                <li class="glowne"><a href="#">Zakładka 1</a>
                        <ul class="menu2">
                                <li><a href="#">Podzakładka 1</a></li>
                                <li><a href="#">Podzakładka 1</a></li>
                                <li><a href="#">Podzakładka 1</a></li>
                                <li><a href="#">Podzakładka 1</a></li>
                        </ul>
                </li>


                <li class="glowne"><a href="#">Zakładka 2</a>
                        <ul class="menu2">
                                <li><a href="#">Podzakładka 2</a></li>
                                <li><a href="#">Podzakładka 2</a></li>
                                <li><a href="#">Podzakładka 2</a></li>
                                <li><a href="#">Podzakładka 2</a></li>
                        </ul>
                </li>

</ul>





</body>

</html>

CSS:

body
{
        background-color: grey;
        margin: 0 !important;
        
}
#nic

{       
        width: 100%;
        height: 200px;

}


ul
{
margin: 0;
padding: 0;
width: 200px;
background-color: green;
font-size: 20px;
text-align: center;
list-style-type: none;
}
li 
{
position: relative;
list-style: none;
}

ul ul
{
position: absolute; 
top:0;
left:200px;
display: none;

}

a
{
display: block;
padding: 5px;
text-decoration: none;
width:auto;
color:white;
}

a:hover
{
        color:red;
}

li:hover
{
        background-color: black;
}

li.glowne:hover
{
background-color: blue;
color: #ff00ff;
}

ul.menu1 > li.glowne:hover > ul.menu2
{
display: block;

}

4 odpowiedzi

odpowiedź 22 lutego 2017 przez Ivan Maniak (60,650 p.)
wybrane 23 lutego 2017 przez Karol Loczeski

Najlepsza

ul > ul

Szuka tylko i wyłączenie ;) dziecka elementu poprzedzającego (rodzica). W twoim kodzie to nie działa, ponieważ dzieckiem elementu ul jest li

ul ul

Szuka wszystkie elementy ul w ul, czyli także te, które nie są dzieckiem dla pierwszego ul.

Podobnie jak w drzewie genealogicznym. Ty jesteś dzieckiem swoich rodziców, ale nie jesteś dzieckiem dla babci czy dziadka. Chcesz poszukać czy osoba X ma w rodzinie osobę Y to używasz X Y, ale jak chcesz sprawdzić czy ktoś jest rodzicem dla kogoś to używasz X > Y

odpowiedź 22 lutego 2017 przez Benek Szeryf (91,010 p.)

odpowiedź 22 lutego 2017 przez krzysiuup Obywatel (1,140 p.)

Selektor > wybiera dziecko - czyli element, który znajduje się bezpośrednio wewnątrz znacznika, w tym przypadku <ul>. Właściwie jedynym słusznym dzieckiem <ul> jest <li> i nic innego.

Natomiast zapis

ul ul

wybiera wszystkie elementy ul, które znajdują się bezpośrednio w ul i jego dzieciach.

komentarz 23 lutego 2017 przez Karol Loczeski Użytkownik (820 p.)

Żebym dobrze zrozumiał..."wybiera wszystkie elementy ul, które znajdują się bezpośrednio w ul i jego dzieciach.", czyli na podstawie przykładu ul ul stylizujemy całość ponieważ wszystko jest w ul, wnioskuję że również li będzie stylizowane ?

<ul class=L1">
 <li class="menu"><a href="#">1</a>
  <ul class="L2">
   <li><a href="#"> a</a></li>
   <li><a href="#">b</a></li>
   <li><a href="#"> c</a></li>
   <li><a href="#">d</a></li>
       <li><a href="#"> e</a>
              <ul class="L3">
                  <li><a href="#"> a</a></li>
                  <li><a href="#">b</a></li>
       </li>
       </ul>
 </li>