Applying CSS styles to all elements inside a nav to only a tags

Question

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-static-top marginBottom-0" style="padding-bottom: 0px; padding-top: 0px;" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">
      <img src="~/images/logo_sm.png" width="280" height="60" alt="nj transit logo" /> Text - Company Name
    </a>
  </div>
  ....
</nav>

I want to apply a (nav-link) class to only whose tag is <a ....>. and doesn't contain nav-brand

I want to apply another class whose tag is <ul> but has a class called "dropdown-menu"

What is the simplest and best approach to this?

Answer 1

.navbar-brand{
    /* Every element who has this class will styled by code here. */
}

a.navbar-brand{
    /* Every and only 'a' element who has this class will styled by code here.
    Note that this class inherits all code under .navbar-brand above. 
    Also note that that there's no space between 'a' and 'navbar-brand'. 

    If there is any space, then every child element under <a> who has this class will get styled.  */
}

a .some-class{
    /* Every element who has the class some-class where its parent is <a> will get styled by this.

    eg:-
    This will get styled -> <a><div class="some-class"></div><a> 
    This will not get styled -> <div class="some-class"></div>
*/
}