Pseudo selectors css

Asked

Viewed 35 times

0

I need to use two pseudo selectors in the same css type ul li:Nth-Child(4), but I have a submenu with another ul and end up focusing on the two ul, I need you to change only the first ul, I’ve tried ul:first li:Nth-Child(4) but it doesn’t work. I don’t really know if you can use two pseudo selectors in the same css. Any tips or help? Thank you

html:

   <nav class="nav">
            <label class="menuMobile">&#9776</label>
            <ul>
                <li><a href="#"><img class="lupa" src="img/lupa.png" alt="Pesquisar" onClick="MostrarCampoPesquisa()"></a>
                  <div id="caixaPesquisa">
                        <form id="formPesquisa" action="" method="get">
                            <input id="pesquisa" type="text" value="" maxlength="150" placeholder="Pesquisar..." onBlur="EsconderCampoPesquisa()">
                        </form>
                  </div>
                </li>
                <li><a href="#">Página Inicial</a></li>
                <li><a href="#">Produtos<img class="flechaVertical" src="img/flecha.png" alt="flecha"></a>
                    <ul>
                        <li><a href="#">Aparadores de Livros</a></li>
                        <li><a href="#">Caixinhas</a></li>
                        <li><a href="#">Chaveiros</a></li>
                        <li><a href="#">Decoração</a></li>
                        <li><a href="#">Pontos Turísticos</a></li>
                        <li><a href="#">Porta Celulares</a></li>
                        <li><a href="#">Porta Guardanapos</a></li>
                        <li><a href="#">Porta Retratos</a></li>
                        <li><a href="#">Relógios</a></li>
                        <li><a href="#">Topos De Bolos</a></li>
                        <li><a href="#">Veículos</a></li>
                    </ul>
                </li>
                <li class="resli"><a href="#"><img id="navLogo" class="navLogo" src="img/logotipo.png" alt="Versatyll"></a></li>
                <li><a href="#">Sobre</a></li>
                <li><a href="#">Contato</a></li>
                <li><a href="#">Dúvidas</a></li>
            </ul>
        </nav>

CSS:

    #caixaPesquisa{
    padding-left:15px;  
}

#pesquisa{
    width:160px;
    height:50px;
    margin-left:10px;
    display:none;
    position:absolute;
    text-align:center;
    border:1px solid #222222;   
}

/* -------------------------------*/

/* Navigation Menus */

.lupa{
    width:30px;
    height:30px;
    padding-left:35px;  
}

.flechaVertical{
    width:8px;
    height:8px;
    padding-left:5px;
    padding-top:20px;
    position:absolute;
    -moz-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
}

.navLogo{
    width:160px;
    height:90px;
    display:block;
}

.menuMobile{
    width:40px;
    height:40px;
    position:fixed;
    margin-left:200px;
    display:block;
    text-align:center;
    background-color:#FFFFFF;
    font-size:30px;
    padding-top:5px;
    cursor:pointer;
    z-index:10;
}

.nav{
    width:200px;
    margin: 0;
    text-align: left;
    background-color: #FFFFFF;
    position: fixed;
}

.nav ul{    
    list-style:none;
    padding:0;
    margin:0;
    position:relative;
}

.nav ul li:nth-child(4){
    display:none;
}

.nav ul li a,visited{
    color:#000000;
    display:block;
    padding:20px;
    padding-left:45px;
    text-decoration:none;
}

.nav ul li a:hover{
    color: #990000;
    text-decoration: none;
}

/*------------------------------------*/
/* Nav Submenu */

.nav ul li:hover ul{
    display:block;
}

.nav ul ul{
    display:none;
    position:absolute;
    background-color:#FFFFFF;
    margin-left:200px;
    margin-top:-200px;
    overflow-y:scroll;
    height:550px;
}

.nav ul ul li{
    display:block;
    padding:8px;
}

.nav ul ul li a,visited{
    color:#000000;
    padding:0;
}

.nav ul ul li a:hover{
    color:#FFFFFF;
    background-color:#990000;
}

/*----------------------------------------*/

1 answer

1


ul > li:nth-child(4)

the > will force you to be the direct son of ul

Browser other questions tagged

You are not signed in. Login or sign up in order to post.