10

Eu tenho um ul onde ele é um menu em que os itens que não estão dentro de um ul filho têm a tag dropdown-toggle. Os itens que estão em ul filho não tem essa tag.

A classe .navbar-solid é aplicada ao <ul> pai. Eu não quero que ela aplique as propriedades do a em quem não tiver a classe dropdown-toggle, ou em outras palavras, dentro do ul filho. No código abaixo, ela está aplicado para todos os a.

.navbar-solid  {
    background-color: transparent !important;
    transition: background-color 1s ease 0s;
}
.navbar-solid img {
    filter: brightness(0) invert(1);
}
@media (min-device-width: 1100px) {
    .navbar-solid a {
        color: green !important;
        transition: background-color 1s ease 0s;
    }
    .navbar-solid a:hover, i:hover {
        color: blue !important;
        transition: background-color 1s ease 0s;
    }
}
<ul class="navbar-solid">
    <li class="dropdown">
        <a class="dropdown-item dropdown-toggle" href="xxx">
             Aaaaa
        </a>
    </li>
    <li class="dropdown">
        <a class="dropdown-item dropdown-toggle" href="xxx">
             Bbbbb
        </a>
    </li>
    <ul class="dropdown-menu">
        <li class="dropdown">
             <a class="dropdown-item" href="xxx">
                  Sub-item
             </a>
        </li>
        <li class="dropdown">
             <a class="dropdown-item" href="xxx">
                  Sub-item 2
             </a>
        </li>
    </ul>
<ul>

Como faço essa filtragem em CSS?

4 Respostas 4

7

Para fazer isso basta adicionar a classe dropdown-toggle da sua tag <a> depois da indicação da tag no css:

a.dropdown-toggle

Veja a funcionar:

.navbar-solid {
    background-color: transparent !important;
    transition: background-color 1s ease 0s;
}
.navbar-solid img {
    filter: brightness(0) invert(1);
}
@media (min-device-width: 1100px) {
    .navbar-solid a.dropdown-toggle {
        color: green !important;
        transition: background-color 1s ease 0s;
    }
    .navbar-solid a.dropdown-toggle:hover, i:hover {
        color: blue !important;
        transition: background-color 1s ease 0s;
    }
}
<ul class="navbar-solid">
    <li class="dropdown">
        <a class="dropdown-item dropdown-toggle" href="xxx">
             Aaaaa
        </a>
    </li>
    <li class="dropdown">
        <a class="dropdown-item dropdown-toggle" href="xxx">
             Bbbbb
        </a>
    </li>
    <ul class="dropdown-menu">
        <li class="dropdown">
             <a class="dropdown-item" href="xxx">
                  Sub-item
             </a>
        </li>
        <li class="dropdown">
             <a class="dropdown-item" href="xxx">
                  Sub-item 2
             </a>
        </li>
    </ul>
</ul>

2

Se Entendi bem, você deseja adicionar o efeito de transparência somente aos links com a classe dropdown-toggle

css:

.navbar-solid  {
    background-color: transparent !important;
    transition: background-color 1s ease 0s;
}
.navbar-solid img {
    filter: brightness(0) invert(1);
}
@media (min-device-width: 1100px) {
    .navbar-solid .dropdown-toggle {
        color: green !important;
        transition: background-color 1s ease 0s;
    }
    .navbar-solid .dropdown-toggle:hover, i:hover {
        color: blue !important;
        transition: background-color 1s ease 0s;
    }
}

No caso acima como você quer adicionar a transparência somente a classe dropdown-toggle, você pode usar a classe em vez do a, pois ele selecionara todos os a dentro do elemento .navbar-solid. Se você não quiser ou não puder usar a classe dropdown-toggle, você pode adicionar ao seus links uma nova class.

css:

.navbar-solid  {
    background-color: transparent !important;
    transition: background-color 1s ease 0s;
}
.navbar-solid img {
    filter: brightness(0) invert(1);
}
@media (min-device-width: 1100px) {
    .navbar-solid .link-transparent {
        color: green !important;
        transition: background-color 1s ease 0s;
    }
    .navbar-solid .link-transparent:hover, i:hover {
        color: blue !important;
        transition: background-color 1s ease 0s;
    }
}

e no html::

<ul class="navbar-solid">
    <li class="dropdown">
        <a class="dropdown-item dropdown-toggle link-transparent" href="xxx">
             Aaaaa
        </a>
    </li>
    <li class="dropdown">
        <a class="dropdown-item dropdown-toggle link-transparent" href="xxx">
             Bbbbb
        </a>
    </li>
    <ul class="dropdown-menu">
        <li class="dropdown">
             <a class="dropdown-item" href="xxx">
                  Sub-item
             </a>
        </li>
        <li class="dropdown">
             <a class="dropdown-item" href="xxx">
                  Sub-item 2
             </a>
        </li>
    </ul>
<ul>

Explicando, a gente tem a classe link-transparent que só sera alterada quando a tela do usuário tiver no minimo 1100px, pois ele ta dentro do seu @media.

2

Só para deixar registrado, tbm consegue fazer o que quer com seletores de atributos CSS:

.navbar-solid {
  background-color: transparent !important;
  transition: background-color 1s ease 0s;
}

.navbar-solid img {
  filter: brightness(0) invert(1);
}

@media (min-device-width: 1100px) {
  .navbar-solid a[class*="dropdown-toggle"] {
    color: green !important;
    transition: background-color 1s ease 0s;
  }
  .navbar-solid a[class*="dropdown-toggle"]:hover,
  i:hover {
    color: red !important;
    transition: background-color 1s ease 0s;
  }
}
<ul class="navbar-solid">
  <li class="dropdown">
    <a class="dropdown-item dropdown-toggle" href="xxx">Aaaaa</a>
  </li>
  <li class="dropdown">
    <a class="dropdown-item dropdown-toggle" href="xxx">Bbbbb</a>
  </li>
  <ul class="dropdown-menu">
    <li class="dropdown">
      <a class="dropdown-item" href="xxx">Sub-item</a>
    </li>
    <li class="dropdown">
      <a class="dropdown-item" href="xxx">Sub-item 2</a>
    </li>
    <li class="dropdown">
      <a class="dropdown-item dropdown-toggle" href="xxx">Teste</a>
    </li>
  </ul>
<ul>

3
  • Quem negativou poderia por favor dizer o que está errado, para mim poder aprender tbm?
    – LeAndrade
    4/11/2019 às 19:24
  • Não fui eu que dei -1, mas como está o a:hover será aplicado a todos os casos. Por acaso a cor que está é a mesma que a default. Se mudar color:blue para color:red já vai notar a diferença.
    – Jorge B.
    5/11/2019 às 12:48
  • 1
    Hmmm... certo Jorge agora entendi, não tinha me atentado ao hover, embora a lógica seja a mesma adiconando o seletor no hover.
    – LeAndrade
    5/11/2019 às 12:58
1
.navbar-solid > li a
.navbar-solid > li a:hover, i:hover

.navbar-solid > .dropdown {
    background-color: transparent !important;
    transition: background-color 1s ease 0s;
}
.navbar-solid img {
    filter: brightness(0) invert(1);
}
@media (min-device-width: 1100px) {
    .navbar-solid > li a {
        color: green !important;
        transition: background-color 1s ease 0s;
    }
    .navbar-solid > li a:hover, i:hover {
        color: blue !important;
        transition: background-color 1s ease 0s;
    }
}
<ul class="navbar-solid">
    <li class="dropdown">
        <a class="dropdown-item dropdown-toggle" href="xxx">
             Aaaaa
        </a>
    </li>
    <li class="dropdown">
        <a class="dropdown-item dropdown-toggle" href="xxx">
             Bbbbb
        </a>
    </li>
    <ul class="dropdown-menu">
        <li class="dropdown">
             <a class="dropdown-item" href="xxx">
                  Sub-item
             </a>
        </li>
        <li class="dropdown">
             <a class="dropdown-item" href="xxx">
                  Sub-item 2
             </a>
        </li>
    </ul>
<ul>

5
  • Mas aí faz o contrário do que pedi. Eu quero que aplique somente nos <a> que estiver nos <li> do <ul> pai, não do filho. 4/11/2019 às 18:42
  • @CypherPotato Entendi errado... veja agora.
    – rbz
    4/11/2019 às 18:46
  • 2
    @CypherPotato poderia ser li em vez de ul nesta resposta. Só que na próxima vez que fizer uma qualquer li sem dropdown-toggle vai apanhar na mesma esse CSS.
    – Jorge B.
    4/11/2019 às 18:46
  • @CypherPotato o rbz editou, mas mesmo assim todas as li sem dropdown-toggle seriam afetadas.
    – Jorge B.
    4/11/2019 às 18:47
  • @JorgeB. Corrigi! rs... E dessa forma que fiz, teria que usar o dropdown-toggle como referência as opções "pai".
    – rbz
    4/11/2019 às 18:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .