html - Why do I need to add a class two times to make justify work? -


i'm wondering why menu-items correctly show when class menu added direct parent , again parent of parent.

when remove 1 of menu classes span items won't justify.

http://codepen.io/anon/pen/vlvwjv

<nav> <div class="top-nav"></div> <div class="bottom-nav"> <div class="container">     <div class="row">         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">             <h1>portfolio van dirk</h1>         </div>     </div>     <div class="row">         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 menu">             <div class="menu">                 <span>concepten</span>                 <span>ontwerp</span>                 <span>artikelen </span>                 <span>programmeren</span>                 <span>curriculum vitea</span>                 <span>contact</span>             </div>         </div>     </div> </div> </div> 

.menu text-align: justify text-transform: lowercase position: relative padding-top: 20px  span     padding-bottom: 20px     font-weight: 200     font-size: 18px     color: white   .menu:after     content: ' '     display: inline-block     width: 100%     height: 0   .menu > span      display: inline-block 

in sass css defined .menu class within .menu class. css compiling to:

.menu .menu > span {     display: inline-block; }  .menu .menu:after {     content: " ";     display: inline-block;     width: 100%;     height: 0; } 

that's not want. remove "menu" column div looks this:

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 

and update sass css looks this:

.menu     text-align: justify     text-transform: lowercase     position: relative     padding-top: 20px      span         padding-bottom: 20px         font-weight: 200         font-size: 18px         color: white       &:after         content: ' '         display: inline-block         width: 100%         height: 0       > span          display: inline-block 

http://codepen.io/partypete25/pen/bjqegn


Comments

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -