CSS its generalizing the meaning of First Child too much

Solution for CSS its generalizing the meaning of First Child too much
is Given Below:

I’m trying to make it so only the background of the first child in the element li.active-trail becomes dark blue (check the background property in the style with right-click->inspect).

However, it seems that the code its picking all of the because each one its the first child of a

  • inside of li.active-trail.

    If I wanted to do that, I’d probably do: li [class*="sf-depth-"]:first-child

    But I did: li.active-trail [class*="sf-depth-"]:first-child – because I want the first child of li.active-trail specifically to be dark!

    ul.sf-menu.sf-style-blue {
      float: left;
      margin-bottom: 1em;
      padding: 0;
    }
    ul.sf-menu.sf-style-blue.sf-navbar {
      width: 100%;
    }
    ul.sf-menu.sf-style-blue ul {
      margin: 0;
      padding: 0;
    }
    ul.sf-menu.sf-style-blue a,
    ul.sf-menu.sf-style-blue a:visited,
    ul.sf-menu.sf-style-blue span {
      border: 0 none;
      color: #076698;
      padding: 0.75em 1em;
    }
    ul.sf-menu.sf-style-blue a.sf-with-ul,
    ul.sf-menu.sf-style-blue span.sf-with-ul {
      padding-right: 2.25em;
    }
    ul.sf-menu.sf-style-blue.rtl a.sf-with-ul,
    ul.sf-menu.sf-style-blue.rtl span.sf-with-ul {
      padding-left: 2.25em;
      padding-right: 1em;
    }
    ul.sf-menu.sf-style-blue span.sf-description {
      color: #ffffff;
      display: block;
      font-size: smaller;
      line-height: 1.5;
      margin: 0.25em 0 0 0;
      padding: 0;
    }
    ul.sf-menu.sf-style-blue li,
    ul.sf-menu.sf-style-blue.sf-navbar {
      background: linear-gradient(to bottom, #c1eaff 0%, #3d3d3d 40%, #3d3d3d 60%, #c1eaff 100%) !important;
    }
    ul.sf-menu.sf-style-blue li li,
    ul.sf-menu.sf-style-blue.sf-navbar > li > ul {
      background: #0151a4;
    }
    ul.sf-menu.sf-style-blue li li li {
      background: #00478f;
    }
    ul.sf-menu.sf-style-blue a:focus,
    ul.sf-menu.sf-style-blue a:hover,
    ul.sf-menu.sf-style-blue a:focus span,
    ul.sf-menu.sf-style-blue a:hover span,
    ul.sf-menu.sf-style-blue span:focus,
    ul.sf-menu.sf-style-blue span:hover,
    ul.sf-menu.sf-style-blue span:focus span,
    ul.sf-menu.sf-style-blue span:hover span {
      background: #368fbd !important;
      color: #ffffff;
      outline: 0;
    }
    .sf-menu.sf-style-blue.sf-navbar li ul {
      background: #3270c5;
    }
    .sf-menu.sf-style-blue.sf-navbar li ul li ul {
      background: transparent;
    }
    div.sf-accordion-toggle.sf-style-blue a {
      background: #c1eaff;
      color: #076698;
      display: inline-block;
      font-weight: bold;
      padding: 1em 3em 1em 1em;
      position: relative;
    }
    div.sf-accordion-toggle.sf-style-blue  > a:after {
      content: "≡";
      font-size: 2em;
      position: absolute;
      right: 0.5em;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      speak: none;
    }
    div.sf-accordion-toggle.sf-style-blue a.sf-expanded,
    ul.sf-menu.sf-style-blue.sf-accordion li.sf-expanded {
      background: #3270c5;
    }
    div.sf-accordion-toggle.sf-style-blue a.sf-expanded,
    ul.sf-menu.sf-style-blue.sf-accordion li.sf-expanded > a,
    ul.sf-menu.sf-style-blue.sf-accordion li.sf-expanded > span {
      font-weight: bold;
    }
    ul.sf-menu.sf-style-blue.sf-accordion li a.sf-accordion-button {
      font-weight: bold;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 499;
    }
    ul.sf-menu.sf-style-blue.sf-accordion li li a,
    ul.sf-menu.sf-style-blue.sf-accordion li li span {
      padding-left: 2em;
    }
    ul.sf-menu.sf-style-blue.sf-accordion li li li a,
    ul.sf-menu.sf-style-blue.sf-accordion li li li span {
      padding-left: 3em;
    }
    ul.sf-menu.sf-style-blue.sf-accordion li li li li a,
    ul.sf-menu.sf-style-blue.sf-accordion li li li li span {
      padding-left: 4em;
    }
    ul.sf-menu.sf-style-blue.sf-accordion li li li li li a,
    ul.sf-menu.sf-style-blue.sf-accordion li li li li li span {
      padding-left: 5em;
    }
    ul.sf-menu.sf-style-blue.rtl.sf-accordion li li a,
    ul.sf-menu.sf-style-blue.rtl.sf-accordion li li span {
      padding-left: auto;
      padding-right: 2em;
    }
    ul.sf-menu.sf-style-blue.rtl.sf-accordion li li li a,
    ul.sf-menu.sf-style-blue.rtl.sf-accordion li li li span {
      padding-left: auto;
      padding-right: 3em;
    }
    ul.sf-menu.sf-style-blue.rtl.sf-accordion li li li li a,
    ul.sf-menu.sf-style-blue.rtl.sf-accordion li li li li span {
      padding-left: auto;
      padding-right: 4em;
    }
    ul.sf-menu.sf-style-blue.rtl.sf-accordion li li li li li a,
    ul.sf-menu.sf-style-blue.rtl.sf-accordion li li li li li span {
      padding-left: auto;
      padding-right: 5em;
    }
    ul.sf-menu.sf-style-blue li.sf-multicolumn-wrapper ol,
    ul.sf-menu.sf-style-blue li.sf-multicolumn-wrapper ol li {
      margin: 0;
      padding: 0;
    }
    ul.sf-menu.sf-style-blue li.sf-multicolumn-wrapper a.menuparent,
    ul.sf-menu.sf-style-blue li.sf-multicolumn-wrapper span.menuparent {
      font-weight: bold;
    }
    ul.sf-style-blue [class*="sf-depth-"], #superfish-main-toggle {
      background: #c1eaff;
    }
    ul.sf-style-blue li.active-trail a[class*="sf-depth-"]:first-child, ul.sf-style-blue li.active-trail span[class*="sf-depth-"]:first-child  {
      background: #91d7fd;
    }
    ul.sf-style-blue ul li ul li [class*="sf-depth-"] {
      background: #e7f7ff;
    }
    <ul id="superfish-main" class="menu sf-menu sf-main sf-horizontal sf-style-blue sf-js-enabled sf-shadow">
    <li id="main-menu-link-contente4a4631e-985c-4020-a5a3-cc75a185515e" class="active-trail sf-depth-1 menuparent">
       <a href="https://stackoverflow.com/sustantivas" class="sf-depth-1 menuparent sf-with-ul">Áreas sustantivas<span class="sf-sub-indicator"> »</span></a>
       <ul class="sf-hidden" style="float: none; width: 15em; display: block;">
          <li id="main-menu-link-content93839a29-bc0e-4610-9b18-6f607402b21b" class="sf-depth-2 sf-no-children" style=""><a href="http://stackoverflow.com/accionsocial" class="sf-depth-2" style="">Acción Social</a></li>
          <li id="main-menu-link-contentd657b847-c069-48e8-ac8b-e0d53385f381" class="active-trail sf-depth-2 menuparent" style="">
             <a href="http://stackoverflow.com/investigacion" class="sf-depth-2 menuparent sf-with-ul" style="">Investigación<span class="sf-sub-indicator"> »</span></a>
             <ul class="sf-hidden" style="left: 100%; float: none; width: 15em; display: block;">
                <li id="main-menu-link-content78ac704c-a8ec-4c66-9f56-4fa2fcb43363" class="active-trail sf-depth-3 sf-no-children" style=""><a href="http://stackoverflow.com/revista" class="is-active sf-depth-3" style="">Revista Educación</a></li>
                <li id="main-menu-link-content1821fb41-d94c-41ed-b37a-4341525d76d3" class="sf-depth-3 sf-no-children" style=""><a href="http://stackoverflow.com/observatorios" class="sf-depth-3" style="">Observatorios</a></li>
             </ul>
          </li>
          <li id="main-menu-link-content2e770e8a-41d5-4618-b4d2-0aa5d4f8591f" class="sf-depth-2 menuparent" style="">
             <span class="sf-depth-2 menuparent nolink sf-with-ul">Docencia<span class="sf-sub-indicator"> »</span></span>
             <ul class="sf-hidden" style="left: 100%; float: none; width: 15em;">
                <li id="main-menu-link-content64838b6d-495f-4574-825d-55f98026d5b3" class="sf-depth-3 sf-no-children" style=""><a href="http://stackoverflow.com/carreras-acreditadas" class="sf-depth-3" style="">Carreras Acreditadas</a></li>
                <li id="main-menu-link-content47b43bf2-48f1-4c9b-b23c-ca04b03212e2" class="sf-depth-3 sf-no-children" style=""><a href="http://stackoverflow.com/carreras-desconcentradas" class="sf-depth-3" style="">Carreras Desconcentradas</a></li>
             </ul>
          </li>
          <li id="main-menu-link-content68b4ea4e-edf4-4d91-af6f-d0bf65a5fbec" class="sf-depth-2 menuparent" style="">
             <a href="http://stackoverflow.com/cifras" class="sf-depth-2 menuparent sf-with-ul" style="">Facultad en Cifras<span class="sf-sub-indicator"> »</span></a>
             <ul class="sf-hidden" style="left: 100%; float: none; width: 15em;">
                <li id="main-menu-link-content68158ebc-1783-4632-b518-3ba1db6257d7" class="sf-depth-3 sf-no-children" style=""><a href="http://stackoverflow.com/matricula-ciclo-lectivo-17-19" class="sf-depth-3" style="">Matrícula por ciclo lectivo</a></li>
             </ul>
          </li>
          <li id="main-menu-link-content87351a83-53e9-4afa-b218-af975b7e8a88" class="sf-depth-2 sf-no-children" style=""><a href="http://stackoverflow.com/difusion" class="sf-depth-2" style="">II Jornada de Difusión</a></li>
       </ul>
    </li>
    </ul>