-4

I want to remove CSS selector greater than ('>') in menu into simple CSS class. Greater than ('>') this selector have a lot of confusion for me actually I'm a beginner in web programming so I does not understand how this selector work.

this CSS rule and html code grab from anywhere so I want to change into class selector.

    // css
     .menu>ul>li{
            float:left;
            font-size:13px;
            position:relative
        }


         .menu>ul>li:hover{
            background:#083b65; 
        }
        .menu>ul>li>a{
            height:38px;
            padding:13px 1px 13px 6px
        }


        .mobmenu ul li:hover{
            background:#083b65;
        }
        .mobmenu ul li{
            border-bottom: 1px solid white;
        }

        .mobmenu ul li a{
            padding:8px;
            white-space:nowrap;
            display:block; 
            width:100%
        } 

// html code

  <nav class="menu" > 
            <ul class="mobmenu"> 
                <li>
                    <a href="#">Beginner</a> 
                    <ul>
                        <li><a href="">  Web Programming for beginner  </a></li>  
                        <li><a href="">  java Programming for beginner   </a></li>    
                         <li><a href="">C# Programming for beginner      </a></li> 
                         <li><a href="">>.NET Programming for beginner   </a></li>
                         <li><a href=""> C++ Programming for beginner    </a></li>
                    </ul>
                </li>
                 <li>
                    <a href="#">intermediate</a> 
                    <ul >
                       <li><a href="">  Web Programming for intermediate  </a></li>  
                        <li><a href="">  java Programming for intermediate   </a></li>    
                         <li><a href="">C# Programming for intermediate      </a></li> 
                         <li><a href="">>.NET Programming for intermediate   </a></li>
                         <li><a href=""> C++ Programming for intermediate    </a></li>

                    </ul>
                </li>
                  <li>
                    <a href="#">Advance</a> 
                    <ul >
                       <li><a href="">  Web Programming for Advance  </a></li>  
                        <li><a href="">  java Programming for Advance   </a></li>    
                         <li><a href="">C# Programming for Advance      </a></li> 
                         <li><a href="">>.NET Programming for Advance   </a></li>
                         <li><a href=""> C++ Programming for Advance    </a></li>
                       <li><a href="">  Web Programming for Advance  </a></li>  
                        <li><a href="">  java Programming for Advance   </a></li>    
                         <li><a href="">C# Programming for Advance      </a></li> 
                         <li><a href="">>.NET Programming for Advance   </a></li>
                         <li><a href=""> C++ Programming for Advance    </a></li>

                    </ul>
                </li> 
            </ul>

        </nav>
Zoe
  • 27,060
  • 21
  • 118
  • 148
noorwala
  • 101
  • 2
  • 3
  • 10
  • https://stackoverflow.com/questions/3225891/what-does-the-greater-than-sign-css-selector-mean – Roland Starke Dec 04 '17 at 18:31
  • _I'm a beginner in web programming so i does not understand how this selecter work._ The highest time to begin, not a question to stackoverflow. – pavel Dec 04 '17 at 18:32

1 Answers1

0

They are parent-child relationships. In your first selector (on top), .menu is a direct parent of ul and ul is a direct parent of li.

So that whole selector will target all li that has a ul as a parent that also has a .menu class as a parent.

Hope that helps.

SnowSlopes
  • 1
  • 2