Skip to main content

Visit Mozilla.org

CSS::last-child

z Mozilla Developer Center, polskiego centrum programistów Mozilli.

« Dokumentacja CSS

[edytuj] Podsumowanie

Pseudoklasa :last-child sprawia iż własności stosowane są do elementu tylko wtedy gdy jest on ostatnim węzłem potomnym swojego rodzica. :last-child ignoruje węzły tekstowe. Pseudoklasą, która działa identycznie, jednak uwzględnia węzły tekstowe jest :last-node.

[edytuj] Składnia 

selektor:last-child { własności }

[edytuj] Przykłady 

<html>
  <body>
  Trochę tekstu.
    <span id="first">pierwszy</span>
    <div>
      <span id="dfirst">pierwszy</span>
      <span id="dsecond">drugi</span>
    </div>
    <span id="second">drugi</span>
  </body>
</html>

span:last-child { font-weight: bold; }

Powyższy zapis pogrubi czcionkę wewnątrz wszystkich elementów span, które są ostatnimi dziećmi swoich rodziców. Zostaną tutaj pogrubione słowa "drugi":

  1. W pierwszym przypadku span o id dsecond jest ostatnim dzieckiem elementu div
  2. W drugim przypadku span o id second jest ostatnim dzieckiem elementu body 


div:first-child:last-child { background-color: red; }

Ten przykład ustawi czerwony kolor tła wszystkim elementom div, które są jedynymi dziećmi swojego rodzica.


[edytuj] Notatki

[edytuj] Zobacz także

:before, :after, :first-child

Źródło: "http://developer.mozilla.org/pl/docs/CSS::last-child"