Dziedziczenie stylów - CSS
Wymuszenie dziedziczenia {...: inherit}
W jaki sposób wymusić przywrócenie dziedziczenia stylów CSS?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 4, Safari 1)
selektor { cecha: inherit }Dziedziczenie stylów jest domyślnym zachowaniem w języku CSS. To znaczy nie trzeba nic robić, żeby z niego skorzystać - zostanie ono zastosowane automatycznie. Dopiero kiedy wybranemu elementowi przypiszemy jakiś styl, nie odziedziczy on go po swoich przodkach (czyli znacznikach, wewnątrz których się znajduje).
A co jeśli się rozmyślimy i jednak będziemy chcieli skorzystać z dziedziczenia? Odpowiedź wydaje się oczywista: po prostu wystarczy usunąć ustawiony styl z wybranego elementu i wtedy odziedziczy go on po przodku. Problem w tym, że nie zawsze jest to możliwe. Wyobraźmy sobie, że np. wszystkim znacznikom pogrubienia w akapicie nadaliśmy jakiś kolor. Ale jednocześnie chcielibyśmy zrobić jeden wyjątek: jeśli pogrubienie znajduje się wewnątrz pochylenia, to powinno mieć kolor taki jak cały akapit. Nie możemy zatem w prosty sposób usunąć koloru, bo wtedy utracilibyśmy go dla wszystkich elementów pogrubienia, a nie tylko w tym jednym, o który nam chodzi.
Właśnie na taką okoliczność została stworzona wartość inherit, którą można przypisać do dowolnej cechy CSS. Wymusza ona powrót do standardowego zachowania wynikającego z dziedziczenia stylów.
Przykład {...: inherit}
To jest akapit koloru zielonego. Do jego elementów podrzędnych został przypisany specjalny styl powodujący, że każde pogrubienie, które się znajduje wewnątrz niego, przyjmie atrybut koloru czcionki (biały) oraz koloru tła (niebieski).
Do elementów podrzędnych tego akapitu został jednak przypisany drugi styl. Dzięki niemu jeśli umieścimy pogrubienie wewnątrz pochylenia, jego kolor tekstu oraz tła przyjmą wartość "inherit". Zatem zostaną odziedziczone z akapitu (tekst będzie zielony).
Dla zainteresowanych
Powyższy efekt został uzyskany przy pomocy selektora typu i selektora potomka umieszczonych w arkuszu stylów:
p { color: green; }
p b { color: white; background-color: blue; }
p i b { color: inherit; background-color: inherit; }