Jedyne dziecko :only-child
Jak zmienić wygląd elementu dziecka, który nie ma braci?
CSS 3
- Dowolny rodzic:
dziecko:only-child { cecha: wartość } - Określony rodzic:
rodzic > dziecko:only-child { cecha: wartość }
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:📋 Zaznacz kod ▶ Edytuj na żywo
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 | Poziom wsparcia min. 2,5 roku | |
|---|---|---|---|---|---|---|
:only-child | 2 2009-05-21 | 1.5 2005-11-29 | 12 2015-07-29 | 9.5 2008-06-12 | 3.1 2008-03-18 |
Komentarze
Sławomir Kokłowski18.05.2020 20:19
Zależy o co pytasz. Ale generalnie na tak postawione pytanie odpowiedź brzmi: tak ;-)
Zobacz więcej
Gosc18.05.2020 19:29
Ktoś to jeszcze "ulepsza"?
Zobacz więcej
Nitr0Skay07.01.2015 20:17
kurshtml
Teraz już jest w porządku. Dziękuję za poprawkę :)
Zobacz więcej- Sławomir Kokłowski
06.01.2015 23:41
Dziękuję za informację. Minifikator kodu usunął białe znaki z tego znacznika.
Zobacz więcej - Nitr0Skay
06.01.2015 21:24
Gość
Potwierdzam. U mnie też to występuje. Korzystam z Chrome
http://caniuse.com/#search=%3Aempty
http://i.imgur.com/T3Mv6F2.png
Zobacz więcej - Gość
06.01.2015 21:05
Chciałam zapytać: czy tu (http://www.kurshtml.edu.pl/css/pusty_element,pseudoklasy.html) nie ma błędu? U mnie zarówno pierwszy jak i trzeci akapit mają czerwone tło.
Zobacz więcej 
Roberto31.03.2013 18:27
ujemne marginesy, position:absolute, ogólnie wyjęcie z obiegu albo 'przeciwdziałanie' zmianom.
nazwy muszą być dzieckiem elementu, którego :hover powoduje zmianę - [...] jak najedziesz na 'magia' to strong nadal jest...
Zobacz więcej- GoŚćX
31.03.2013 18:21
Chciałbym wiedzieć czy istnieje taka cecha że pojawiający się element który wcześniej miał ceche i wartość: display:none; nie rozwali żadnych elementów strony, tylko pokaże się nad nimi. I gdy robię menu gdzie po najechaniu na klawisz np: galeria zwiększa on wysokoś i na nim wyskakują nazwy...
Zobacz więcej - Roberto
30.03.2013 20:03
zmiana display dziecka z none na jakiś przy :hover rodzica...
Zobacz więcej - jaaa
30.03.2013 19:12
Jak zrobić żeby po najechaniu myszką na jakiś elemnt (np: klawisz z menu) oprucz zmiany (podświetlenia klawisza) pod nim pokazywał się na przykład jakiś bloczek (zupełnie inny elemnt) jakie selektory użyć???
Zobacz więcej
