How not to affect next elements of the same tag

Asked

Viewed 131 times

1

I have a horizontal menu with several elements <li>. But as the mouse on the last item, namely on the last item <li> - "Services", opens another list of items that also contains elements with the tag li.

The problem is that in this second list of items I do not want to apply the styles of the previous list (first list). How can I get around this?

Follows the HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<style>
.breadcrumb {
    padding: 0px;
    background: #D4D4D4;
    list-style: none; 
    overflow: hidden;
    margin-top: 20px;
}
.breadcrumb>li+li:before {
    padding: 0;
}
.breadcrumb li { 
    float: left; 
}
.breadcrumb li.active a {
    background: brown;                   
    background: #ffc107 ; 
}
.breadcrumb li.completed a {
    background: brown;                   
    background: hsla(153, 57%, 51%, 1); 
}
.breadcrumb li.active a:after {
    border-left: 30px solid #ffc107 ;
}
.breadcrumb li.completed a:after {
    border-left: 30px solid hsla(153, 57%, 51%, 1);
} 

.breadcrumb li a {
    color: white;
    text-decoration: none; 
    padding: 10px 0 10px 45px;
    position: relative; 
    display: block;
    float: left;
}
.breadcrumb li a:after { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent; 
    border-bottom: 50px solid transparent;
    border-left: 30px solid hsla(0, 0%, 83%, 1);
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    left: 100%;
    z-index: 2; 
} 
.breadcrumb li a:before { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent;    
    border-bottom: 50px solid transparent;
    border-left: 30px solid white;
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    margin-left: 1px;
    left: 100%;
    z-index: 1; 
} 
.breadcrumb li:first-child a {
    padding-left: 15px;
}
.breadcrumb li a:hover { 
    background: #ffc107  ; 
}
.breadcrumb li a:hover:after { 
    border-left-color: #ffc107   !important; 
}
</style>

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="container">
            <div class="row">
                <ul class="breadcrumb">
                    <li class=""><a href="#">Inicio</a></li>
                    <li class=""><a href="#">Noticias</a></li>
                    <li class="dropdown mega-dropdown ">
                        <a href="#" class="dropdown-toggle  Negrito" data-toggle="dropdown">Serviços <span class="caret"></span></a>        
                        <div class="dropdown-menu mega-dropdown-menu">
                            <div class="widget-box">
                                <div class="widget-title">
                                    <ul class="nav nav-tabs nav-tabs-carousel">
                                        <li class="active"><a data-toggle="tab" href="#tab1">Serviço 1</a> </li>
                                        <li><a data-toggle="tab" href="#tab2">Serviço 2</a></li>
                                        <li><a data-toggle="tab" href="#tab3">Serviço 3</a></li>
                                        <li><a data-toggle="tab" href="#tab4">Serviço 4</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>

html css twitter-bootstrap
  • 1

    create a class specific to the style you want to apply instead of using li: The li you want the effect applied add for example <class ='meuefeito'> and in css you style the . me

  • @Target The problem that I have some effects of Hover, before, that do not work when I create the class without the ripple effect in li. I do not know why.

1 answer

1


As our friend @Bsalvo said, add concrete classes to the elements you want to add the desired styles:

.breadcrumb .bread-li { 
    /* estilos aqui */
}
.breadcrumb .bread-li.active .bread-link {
    /* estilos aqui */
}

Or you can use a direct Child-selector as follows:

.breadcrumb > li {
    /* estilos aqui */
}
.breadcrumb > li.active > a {
    /* estilos aqui */
}

With a little magic from both worlds, you can do something like in the code below:

Editing:

I added the class again nav-tabs, because I see that the intention is to create a mega-menu with several options of tabs.

<!-- BIBLITECAS JQUERY E BOOTSTRAP -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- ESTILO NECESSITA SER IMPLEMENTADO DEPOIS DO CSS BOOTSTRAP -->
<style>
.breadcrumb {
    padding: 0px;
    background: #D4D4D4;
    list-style: none;
    margin-top: 20px;
    display: block;
    overflow:hidden;
}
.breadcrumb > li + li:before {
    padding: 0;
}
.breadcrumb .bread-li { 
    float: left; 
}
.breadcrumb .bread-li.active > a {
    background: brown;                   
    background: #ffc107 ; 
}
.breadcrumb .bread-li.completed > a {
    background: brown;                   
    background: hsla(153, 57%, 51%, 1); 
}
.breadcrumb .bread-li.active > a:after {
    border-left: 30px solid #ffc107 ;
}
.breadcrumb .bread-li.completed > a:after {
    border-left: 30px solid hsla(153, 57%, 51%, 1);
} 

.breadcrumb .bread-li > a {
    color: white;
    text-decoration: none; 
    padding: 10px 0 10px 45px;
    position: relative; 
    display: block;
    float: left;
}
.breadcrumb .bread-li > a:after { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent; 
    border-bottom: 50px solid transparent;
    border-left: 30px solid hsla(0, 0%, 83%, 1);
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    left: 100%;
    z-index: 2; 
} 
.breadcrumb .bread-li > a:before { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent;    
    border-bottom: 50px solid transparent;
    border-left: 30px solid white;
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    margin-left: 1px;
    left: 100%;
    z-index: 1; 
} 
.breadcrumb .bread-li:first-child > a {
    padding-left: 15px;
}
.breadcrumb .bread-li > a:hover { 
    background: #ffc107  ; 
}
.breadcrumb .bread-li > a:hover:after { 
    border-left-color: #ffc107   !important; 
}
.breadcrumb > li.dropdown {
    position: static;
}
</style>

<!-- O CÓDIGO -->
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="container">
            <div class="row">
                <ul class="breadcrumb">
                    <li class="bread-li"><a href="#">Inicio</a></li>
                    <li class="bread-li"><a href="#">Noticias</a></li>
                    <li class="bread-li dropdown mega-dropdown ">
                        <a href="#" class="caret-link dropdown-toggle Negrito" data-toggle="dropdown">Serviços <span class="caret"></span>
                        </a>        
                        <div class="dropdown-menu mega-dropdown-menu">
                            <div class="widget-box">
                                <div class="widget-title">
                                    <ul class="nav nav-tabs nav-tabs-carousel">
                                        <li class="active"><a data-toggle="tab" href="#tab1">Serviço 1</a></li>
                                        <li><a data-toggle="tab" href="#tab2">Serviço 2</a></li>
                                        <li><a data-toggle="tab" href="#tab3">Serviço 3</a></li>
                                        <li><a data-toggle="tab" href="#tab4">Serviço 4</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>

Example in jsFiddle using only Child-selectors: https://jsfiddle.net/shuffledPixels/0otautec/3/

However, it is not always advisable to use the second option, because when it comes to large projects, nesting elements in CSS in this way can be a headache.

NOTE: Some tags like links "<a>" are not properly closed, HTML5 does not care about this and automatically closes them, but it must be taken into account because it is not good practice at all, you may experience validation issues in previous HTML versions and may affect your work when working on your platform.

  • So, more is changing the element of the tag <li> within the <ul> classy nav.

  • I retracted my comment above. I had tested it before its last edition and I realized it now and I re-ran the test. Reply exactly as intended. Thank you.

  • A question that has nothing to do with the question. Can you tell me why the mega menu on Chrome when changing tab it keeps opening and closing by itself when passing the mouse over ?

  • 1

    @Williancoqueiro When passing the mouse over to me it does not close, but now if you click yes, it closes. I am using Version 59.0.3071.115 . But it’s even part of its function it closes even when a click happens.

  • I’m with the same version, knows how to get around the situation of having a click in and it does not close. Sometimes it closes by itself just because I’m changing tab.

  • 1

    This should do the trick @Williancoqueiro : https://jsfiddle.net/shuffledPixels/0otautec/4/ . If necessary also for the hover just change the second line to $('.breadcrumb .dropdown').on({'click hover': function(event) { that is to add the hover in front of the event click.

  • Strange and that in your example only opens to click and here with me opens when passing the mouse. The problem is there, but I do not know where this command is coming from.

  • 1

    I myself had made a Javascript function so that when I passed the mouse over it would open, as I did a few days ago I forgot about it. kkkk are along with its conflicting function. Thanks for your attention. I will add all your comments here as something useful.

Show 3 more comments

Browser other questions tagged html css twitter-bootstrap

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