Strona główna >CSS >Leksykon CSS – właściwości, selektory, funkcje >:only-child

:only-child

selektor:only-child

Wybiera element, który w swoim rodzicu nie ma rodzeństwa (tekst i komentarze się nie liczą). Przydaje się, gdy pojedynczy element ma wyglądać inaczej – na przykład rozciągnąć się na całą szerokość. To samo co :first-child:last-child, tylko z niższą specyficznością: 0-1-0 zamiast 0-2-0.

Przykłady

Dwa przyciski stoją obok siebie, pojedynczy przycisk rozciąga się na całą szerokość:

<div class="actions">
  <a href="#">Wstecz</a>
  <a href="#">Dalej</a>
</div>
<div class="actions">
  <a href="#">Dalej</a>
</div>

.actions {
  max-width: 260px;
  margin-bottom: 8px;
}
.actions a {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 6px;
  background: #0088d1;
  color: #fff;
  text-decoration: none;
}
.actions a:only-child {
  display: block;
  text-align: center;
}

Wynik

Wstecz Dalej

Dalej

Na co uważać

Tekst obok elementu nie ma znaczenia: w <p>Tekst <strong>pogrubiony</strong></p> strong jest jedynym dzieckiem. Liczy się każdy inny element, także ukryty.
:only-of-type jest łagodniejsza – wybiera element, który jest jedynym swojego typu, nawet jeśli ma rodzeństwo innego typu.
Przy warunkach dotyczących liczby elementów (co najmniej cztery, najwyżej dwa…) pomoże :has() z :nth-child() albo połączenie z :nth-last-child().

Obsługa w przeglądarkach

Baseline – szeroko dostępne: działa we wszystkich popularnych przeglądarkach, i to od dawna (najpóźniej od 2015 roku). Od wersji: Chrome 2, Firefox 1.5, Safari 3.1. Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
:first-child
:last-child
:first-of-type i :last-of-type
:empty
:has()