:last-child
Synon vetëm elementin e fundit në një grup elementësh vëllezër. Në demonstrimin më poshtë të gjithë elementët e kanë një kufi lartë (top), por ai i fundit e ka gjithashtu një kufi poshtë (bottom). Në këtë mënyrë të gjitha lidhjet e kanë një kufi lartë dhe një poshtë.
Kliko këtu për të ndërruar pamjen, me apo pa stilin CSS për :last-child.
not:last-child
Synon të gjithë elementët në një grup elementësh vëllezër, përveç atij të fundit. Në demonstrimin më poshtë të gjithë elementët kanë 20px zbrazëti në anën e djathtë të tyre, por jo ai i fundit, përndryshe elementet nuk tregohen plotësisht në mes të elementit të tyre.
Kliko këtu për të ndërruar pamjen, me apo pa stilin CSS për not:last-child.
HTML
<ul class="lista-me-demonstrim lista-me-demonstrim-e-para">
<li>Banane</li>
<li>Ferra</li>
<li>Molla</li>
<li>Rrush</li>
</ul>
<ul class="lista-me-demonstrim lista-me-demonstrim-e-dyta">
<li>Banane</li>
<li>Ferra</li>
<li>Molla</li>
<li>Rrush</li>
</ul>
CSS
.lista-me-demonstrim {
list-style-type: none;
margin: 2rem 0;
padding: 0;
}
.lista-me-demonstrim-e-para li {
background: #F0F0F0;
padding: 2px;
border-top: 1px dotted #C06800;
}
.lista-me-demonstrim-e-para li:hover,
.lista-me-demonstrim-e-dyta li:hover {
background: #CFCECE;
cursor: pointer;
}
.lista-me-demonstrim-e-para li:last-child {
border-bottom: 1px dotted #C06800;
}
.lista-me-demonstrim-e-dyta {
text-align: center;
}
.lista-me-demonstrim-e-dyta li {
display: inline-block;
text-align: center;
border: 1px dotted #C06800;
padding: 1rem;
}
.lista-me-demonstrim-e-dyta li:not(:last-child) {
margin-right: 20px;
}
