How do I make the CSS class not affect anyone who has a particular class?

Question

I have a ul where it is a menu in which items that are not inside a ul son have the tag dropdown-toggle. The items that are in ul son doesn’t have that tag.

The class .navbar-solid is applied to <ul> father. I don’t want her to apply the properties of a in those who do not have the class dropdown-toggle, or in other words, within the ul son. In the code below, it is applied to all 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>

How do I filter in CSS?

Answer 1

To do this just add the class dropdown-toggle of your tag <a> after the tag statement in css:

a.dropdown-toggle

See working:

.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>

Answer 2

If I understand correctly, you want to add the transparency effect only to links with the class 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;
    }
}

In the above case how you want to add transparency only to class dropdown-toggle, you can use the class instead of the a, because he had selected all the a inside the . navbar-Solid element. If you do not want or can not use the class dropdown-toggle, you can add a new class to your links.

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;
    }
}

and in 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>

Explaining, we have the class link-transparent that will only be changed when the user screen has at least 1100px, because it is inside your @media.

Answer 3

Just for the record, tbm can do whatever it wants with CSS attribute selectors:

.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>

Answer 4

.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>