Apply Padding to all elements except one in particular

Asked

Viewed 56 times

1

I would like to apply the property padding in the navbar elements, except for the last element in the class nav-login

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

But no effect appears on any element.

html css angular bootstrap-4 padding

1 answer

2


Your rule not is wrong, you’re applying her to nav, guy nav:not() and should be in the a within the Nav type nav a:not()

Look at the example, notice that I’m putting one bg red in all the a, except in the a classy .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>

Browser other questions tagged html css angular bootstrap-4 padding

You are not signed in. Login or sign up in order to post.