Ali Bahaari Ali Bahaari - 4 months ago 7
HTML Question

Bottom Padding doesn't apply to Last-Child

I want to create a Jumbotron for myself like bootstrap one. I wrote the HTML Codes :

<div class="jumbotron">
<div class="title">Rojbas Framework !</div>
<div>This Roj Framework !</div>
<div>
<button type="button" class="btn btn-primary">More Info</button>
</div>
</div>


After that I wanted to apply a Top Padding to First Child & Bottom Padding to Last Child. The First Child works but the Last Child doesn't ...
This is the code :

.jumbotron:last-child {
padding-bottom: 40px;}

Answer

To apply the padding to the last div in this structure.

<div class="jumbotron">
    <div class="title">Rojbas Framework !</div>
    <div>This Roj Framework !</div>
    <div>
        <button type="button" class="btn btn-primary">More Info</button>
    </div>
</div>

The selector should be

.jumbotron >:last-child {
    padding-bottom: 40px;}

Note:

.jumbotron :last-child {
    padding-bottom: 40px;}

will apply padding to both the last div and any last child however deep inside the .jumbotron element.

Comments