Przejdź do treści

Jedyne dziecko :only-child

Jak zmienić wygląd elementu dziecka, który nie ma braci?

CSS 3

  1. Dowolny rodzic:
    dziecko:only-child { cecha: wartość }
  2. Określony rodzic:
    rodzic > dziecko:only-child { cecha: wartość }
Rodzicem oraz dzieckiem może być praktycznie dowolny znacznik, przy czym dziecko zawiera się w znaczniku rodzica [zobacz: Wstawianie stylów].
Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Polecenie pozwala nadać określone atrybuty formatowania dla elementu, który jest dzieckiem innego elementu - o jeden rząd niżej w hierarchii drzewa dokumentu, ale tylko jeśli rodzic nie ma już innych dzieci.

Przykład :only-child

Po wpisaniu w arkuszu stylów:
b:only-child { color: red }
otrzymamy na stronie:

To jest akapit, wewnątrz którego znajduje się pogrubienie (powinno być czerwone). Ten akapit ma tylko jedno dziecko.

Dla porównania to jest akapit, wewnątrz którego znajduje się pierwsze pogrubienie (nie powinno być czerwone) oraz drugie pogrubienie (również nie powinno być czerwone). Ten akapit ma więcej niż jedno dziecko.

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
:only-child2
2009-05-21
1.5
2005-11-29
12
2015-07-29
9.5
2008-06-12
3.1
2008-03-18

Komentarze

Zobacz więcej komentarzy

Facebook