1

Gostaria de aplicar a propriedade padding nos elementos do navbar, menos no último elemento que possui a classe nav-login

Utilizo bootstrap 4.0

Html:

<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" [routerLink]="['/home']">EducaGeek</a>
<button class="navbar-toggler" type="button" (click)="isCollapsed = !isCollapsed"
    [attr.aria-expanded]="!isCollapsed" aria-controls="collapseBasic">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" [collapse]="isCollapsed" [isAnimated]="true">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item">
            <a class="nav-link" [routerLink]="['/home']" routerLinkActive="active">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" [routerLink]="['/quemSomos']" routerLinkActive="active">Quem Somos</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" [routerLink]="['/metodologia']" routerLinkActive="active">Metodologia</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" [routerLink]="['/cursos']" routerLinkActive="active">Cursos</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" [routerLink]="['/loja']" routerLinkActive="active">Loja</a>
        </li>
    </ul>
    <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
        <li class="nav-item">
            <a class="nav-link nav-login"  [routerLink]="['/login']" routerLinkActive="active">Login</a>
        </li>
    </ul>
</div>

CSS:

    nav.navbar:not(a.nav-login) {
    padding:  0.5rem 1rem;
}

Porém não surge efeito em nenhum elemento.

1 Resposta 1

2

Sua regra not está errada, vc está aplicando ela na nav, tipo nav:not() e deveria ser no a dentro da nav tipo nav a:not()

Veja o exemplo, repare que eu estou colocando um bg red em todos os a, menos no a que tem a classe .nav-login

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<style>

nav.navbar a:not(.nav-login) {
    padding:  0.5rem 1rem;
    background-color: red;
}

</style>
</head>
<body>
  
  <nav class="navbar navbar-expand-lg navbar-light">
    <a class="navbar-brand" [routerLink]="['/home']">EducaGeek</a>
    <button class="navbar-toggler" type="button" (click)="isCollapsed = !isCollapsed"
        [attr.aria-expanded]="!isCollapsed" aria-controls="collapseBasic">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" [collapse]="isCollapsed" [isAnimated]="true">
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            <li class="nav-item">
                <a class="nav-link" [routerLink]="['/home']" routerLinkActive="active">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" [routerLink]="['/quemSomos']" routerLinkActive="active">Quem Somos</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" [routerLink]="['/metodologia']" routerLinkActive="active">Metodologia</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" [routerLink]="['/cursos']" routerLinkActive="active">Cursos</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" [routerLink]="['/loja']" routerLinkActive="active">Loja</a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
            <li class="nav-item">
                <a class="nav-link nav-login"  [routerLink]="['/login']" routerLinkActive="active">Login</a>
            </li>
        </ul>
    </div>
    </nav>
  
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>

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 .