html - CSS :last-of-type is not working -
i creating html form , adding css it. html looks
<html> <body> <div class="pt-form row"> <!-- top layer input box --> <div class="pt-form-input-group"> <label>label1</label> <div class="pt-input-text-group"> <input type="tel" class="pt-form-input"> </div> </div> <div class="pt-form-input-group"> <label>label2</label> <div class="pt-input-text-group"> <input type="tel" class="pt-form-input"> </div> </div> <!-- of type drop-down --> <div class="pt-form-input-group"> <label>label3</label> <div class="pt-input-text-group"> <input type="tel" class="pt-form-input"> </div> </div> <div class="pt-form-input-group"> <label>label4</label> <div class="pt-input-text-group"> <input type="tel" class="pt-form-input"> </div> </div> <div class="pt-form-submit"> <a href="#">add</a> </div> </div> <!-- build:js scripts/main.min.js --> <script src="scripts/main.js"></script> </body> </html> and css looks
* { margin: 0; padding: 0; box-sizing: border-box; } *:focus { outline: none; } html, body { /*background-color: #ecf0f1;*/ background-color: white; color: black; font-family: 'lato', 'arial', sans-serif; font-weight: 400; font-size: 20px; text-rendering: optimizelegibility; overflow-x: hidden; } .row { max-width: 1140px; margin: 0 auto; } /* --- form */ .pt-form { margin-top: 10%; margin-left: 25%; } .pt-form-input-group { position: relative; font-size: 14px; border: 1px solid #d3d5d8; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom: none; width: 50%; } .pt-form-input-group:last-of-type { border-bottom: 1px solid #d3d5d8; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; margin-bottom: 10%; } .pt-form-input-group label { color: #6f8691; display: block; margin-left: 2%; margin-top: 2%; } .pt-input-text-group { position: relative; display: table; border-collapse: separate; width: 100%; } .pt-form-input { height: 60px; width: 100%; padding: 15px 12px 10px; font-size: 22px; line-height: 32px; border: none; } .pt-form-submit { background-color: darkorchid; height: 60px; width: 50%; margin-top: 2%; padding-top: 20px; padding-left: 20%; } .pt-form-submit { color: white; width: 100%; text-decoration: none; } i want draw border on last input box, ,
.pt-form-input-group:last-of-type { border-bottom: 1px solid #d3d5d8; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; margin-bottom: 10%; } but border not show up. demo available @ https://codepen.io/harit66/pen/jbjamj
what doing wrong?
:last-of-type works elements, not classes. put .pt-form-input-group elements in own parent, target :last-child
* { margin: 0; padding: 0; box-sizing: border-box; } *:focus { outline: none; } html, body { /*background-color: #ecf0f1;*/ background-color: white; color: black; font-family: 'lato', 'arial', sans-serif; font-weight: 400; font-size: 20px; text-rendering: optimizelegibility; overflow-x: hidden; } .row { max-width: 1140px; margin: 0 auto; } /* --- form */ .pt-form { margin-top: 10%; margin-left: 25%; } .pt-form-input-group { position: relative; font-size: 14px; border: 1px solid #d3d5d8; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom: none; width: 50%; } .pt-form-input-group:last-child { border-bottom: 1px solid #d3d5d8; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; margin-bottom: 10%; } .pt-form-input-group label { color: #6f8691; display: block; margin-left: 2%; margin-top: 2%; } .pt-input-text-group { position: relative; display: table; border-collapse: separate; width: 100%; } .pt-form-input { height: 60px; width: 100%; padding: 15px 12px 10px; font-size: 22px; line-height: 32px; border: none; } .pt-form-submit { background-color: darkorchid; height: 60px; width: 50%; margin-top: 2%; padding-top: 20px; padding-left: 20%; } .pt-form-submit { color: white; width: 100%; text-decoration: none; }<html> <body> <div class="pt-form row"> <div> <!-- top layer input box --> <div class="pt-form-input-group"> <label>label1</label> <div class="pt-input-text-group"> <input type="tel" class="pt-form-input"> </div> </div> <div class="pt-form-input-group"> <label>label2</label> <div class="pt-input-text-group"> <input type="tel" class="pt-form-input"> </div> </div> <!-- of type drop-down --> <div class="pt-form-input-group"> <label>label3</label> <div class="pt-input-text-group"> <input type="tel" class="pt-form-input"> </div> </div> <div class="pt-form-input-group"> <label>label4</label> <div class="pt-input-text-group"> <input type="tel" class="pt-form-input"> </div> </div> </div> <div class="pt-form-submit"> <a href="#">add</a> </div> </div> <!-- build:js scripts/main.min.js --> <script src="scripts/main.js"></script> </body> </html>
Comments
Post a Comment