html - I don't see why my :last-child selector isn't working as it should be -
in css i've used wrapped divs class call last-child remove right margin, reason can't find problem.
.user-panel { border-bottom-color: #8f8f8f; background-color: #fcfcfc; border-style: solid; border-width: 1px; border-color: #d9d9d9; float: left; width: 257px; margin-top: 40px; border-bottom-color: #8f8f8f; margin-right: 5px; } .user-panel-wrap:last-child { margin-right: 0px; } .user-panel:hover { background-color: #b2d195; } .user-panel-image { margin: 5px auto; display: block; } .user-panel-header { font-size: 26px; text-align: center; margin: 0; color: black; } .user-panel-paragraph { color: #a0a09e; margin: 0; text-align: center; font-size: 19px; }
<div class="user-panel-wrap"> <a class="user-panel-link" href="#"> <div class="user-panel"> <img class="user-panel-image" src="pictures/tockici.jpg"> <p class="user-panel-header">services</p> <p class="user-panel-paragraph">it's do!</p> </div> </a> <a class="user-panel-link" href="#"> <div class="user-panel"> <img src="pictures/cart.png" alt="" class="user-panel-image"> <p class="user-panel-header">order</p> <p class="user-panel-paragraph">start process!</p> </div> </a> <a class="user-panel-link" href="#"> <div class="user-panel"> <img src="pictures/faq.png" alt="" class="user-panel-image"> <p class="user-panel-header">faq</p> <p class="user-panel-paragraph">find answers</p> </div> </a> <a class="user-panel-link" href="#"> <div class="user-panel"> <img src="pictures/login.jpg" alt="" class="user-panel-image"> <p class="user-panel-header">log in</p> <p class="user-panel-paragraph">current clients</p> </div> </a> </div>
the :last-child
pseudo selector applied on wrapping div here. result select wrapper last child of parent. , because created 1 wrapper, select 1 have.
i suspect want select last child of wrapper. this, need .user-panel-wrap > :last-child
. , because suspect want set margin not of <a>
tag on .user-panel
, should .user-panel-wrap > :last-child .user-panel
.
.user-panel { border-bottom-color: #8f8f8f; background-color: #fcfcfc; border-style: solid; border-width: 1px; border-color: #d9d9d9; float: left; width: 257px; margin-top: 40px; border-bottom-color: #8f8f8f; margin-right: 5px; } .user-panel-wrap > :last-child .user-panel { margin-right: 0px; } .user-panel:hover { background-color: #b2d195; } .user-panel-image { margin: 5px auto; display: block; } .user-panel-header { font-size: 26px; text-align: center; margin: 0; color: black; } .user-panel-paragraph { color: #a0a09e; margin: 0; text-align: center; font-size: 19px; }
<div class="user-panel-wrap"> <a class="user-panel-link" href="#"> <div class="user-panel"> <img class="user-panel-image" src="pictures/tockici.jpg"> <p class="user-panel-header">services</p> <p class="user-panel-paragraph">it's do!</p> </div> </a> <a class="user-panel-link" href="#"> <div class="user-panel"> <img src="pictures/cart.png" alt="" class="user-panel-image"> <p class="user-panel-header">order</p> <p class="user-panel-paragraph">start process!</p> </div> </a> <a class="user-panel-link" href="#"> <div class="user-panel"> <img src="pictures/faq.png" alt="" class="user-panel-image"> <p class="user-panel-header">faq</p> <p class="user-panel-paragraph">find answers</p> </div> </a> <a class="user-panel-link" href="#"> <div class="user-panel"> <img src="pictures/login.jpg" alt="" class="user-panel-image"> <p class="user-panel-header">log in</p> <p class="user-panel-paragraph">current clients</p> </div> </a> </div>
Comments
Post a Comment