: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ë.

Banane
Ferra
Molla
Rrush

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.

Banane
Ferra
Molla
Rrush

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;
}

HTML dhe CSS

Elementi Last Child dhe Not Last Child

:last-child

not:last-child