Entfernen Sie die Grenze rechts auf: Last-Kind-Pseudo-Klasse

Question

Dies macht mich verrückt. Ich übersehe wahrscheinlich etwas sehr Einfaches, da ich normalerweise keine Probleme mit so etwas wie einer Pseudo-Klasse habe.

Ich versuche, den rechten Rand auf einem Div-Element für das letzte Kind zu entfernen. Ich kann es mit einer Klasse für das letzte Element arbeiten lassen, aber ich muss es nicht so machen (da der Inhalt in einer ee Schleife ist).

Hier ist der Code. Alles ist in einem Abschnitt mit einer ID von # kleinen Features verpackt. Der gesamte Inhalt, der in Bootstrap-Spalten verschachtelt ist, ist in einen # featured-wrapper eingebettet.

<section id="small-featured"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-3"> 
     <div class="featured-wrapper"> 
      <a href="#"><img src="assets/img/36-6022.png" alt=""></a> 
      <p>The Product Title</p> 
     </div> 
     </div> 
     <div class="col-md-3"> 
     <div class="featured-wrapper"> 
      <a href="#"><img src="assets/img/36-5100.jpg" alt=""></a> 
      <p>The Product Title</p> 
     </div> 
     </div> 
     <div class="col-md-3"> 
     <div class="featured-wrapper"> 
      <a href="#"><img src="assets/img/46-455.jpg" alt=""></a> 
      <p>The Product Title</p> 
     </div> 
     </div> 
     <div class="col-md-3"> 
     <div class="featured-wrapper"> 
      <a href="#"><img src="assets/img/unisaw.jpg" alt=""></a> 
      <p>The Product Title</p> 
     </div> 
     </div> 
    </div> 
    </div> 
</section> 

Hier CSS

#small-featured { 
    text-align: center; 
} 

#small-featured img { 
    width: 250px; 
    padding: 0 15px; 
} 

.featured-wrapper { 
    border-right: 1px solid #eee; 
} 

#small-featured .featured-wrapper:last-child { 
    border-right: none; 
} 

Alle Grenzen verschwinden, wenn ich meine letzt bisschen CSS hinzufügen. Ich habe versucht, nur .featured-Wrapper: Last-Kind als auch.

Irgendwelche Ideen?

Answer 1

(Alle .featured-wrapper sind :last-child.) ¯ \ _ (ツ) _/¯