:last-child vs. :not vs. & + &

von

Bekanntes Szenario: das letzte einer Reihe von Elementen (ob nun Listen- oder andere Html-Elemente) muß anders gestyled werden als der Rest. Wie selected man nun die Elemente auf elegante Art?

Eine schöne Auflistung verschiedener Möglichkeiten und der Pro- und Kontra-Argumente findet sich in diesem Gist von Matt Smith:

.element {

  // die nicht so elegante Standard-Variante...
  border-right: 1px solid #424242;
  &:last-child {
    border-right: 0;
  }

  // verständlich formuliertes Conditional...
  &:not(:last-child) {
    border-right: 1px solid #424242;
  }

  // unverständliches Conditional...
  &:nth-last-child(n+2) {
    border-right: 1px solid #424242;
  }

  // wenn man IE7+8 supporten muß...
  & + &  {
    border-left: 1px solid #424242;
  }

}

Kommentieren