Przejdź do treści

Odwołanie wartości {...: unset}

Jak odwołać formatowanie wcześniej przypisane do elementu na stronie?

CSS 3

selektor { cecha: unset }
Selektor oznacza wybrany element, któremu chcemy zmienić sposób formatowania określony za pomocą cechy - zostaną opisane w kolejnych rozdziałach.

Nie wszystkie cechy CSS podlegają dziedziczeniu. Wydaje się logiczne, że jeśli ustawimy określony kolor tekstu, to chcemy, aby również każdy z elementów podrzędnych miał właśnie taki kolor. Ale gdybyśmy w ten sposób postąpili np. z obramowaniem, efekt byłby dziwaczny - każdy element podrzędny byłby ujęty w oddzielną ramkę. Z tego właśnie powodu obramowanie jest jedną z cech CSS niepodlegających dziedziczeniu.

W rozdziałach: Komendy CSS 2 oraz Komendy CSS3 możesz sprawdzić, które cechy CSS podlegają, a które nie podlegają dziedziczeniu.

Specjalna wartość unset, którą możemy przypisać do dowolnej cechy CSS, łączy w sobie działanie wcześniej przedstawionych w tym rozdziale technik. Jeżeli przypiszemy ją do cechy CSS, która podlega dziedziczeniu, zachowa się jak w przypadku inherit. W przeciwnym razie działa jak initial. W praktyce oznacza to, że po prostu odwołuje ona wartości wcześniej przypisane do elementu bez względu na to, czy podlegają dziedziczeniu.

Przykład {...: unset}

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), koloru tła (niebieski) oraz koloru obramowania (czerwony).
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, tła oraz obramowania przyjmą wartość "unset". Zatem kolor tekstu zostanie odziedziczony z akapitu (tekst będzie zielony), natomiast kolor obramowania przyjmie wartość domyślną (taką samą co kolor tekstu - również 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; border-color: red; border-style: solid; }
p i b { color: unset; background-color: unset; border-color: unset; }

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
unset41
2015-03-03
27
2014-02-04
13
2015-11-12
28
2015-03-10
9.1
2016-03-21

Komentarze

Zobacz więcej komentarzy

Facebook