Odkrywamy zaawansowane techniki CSS: złożone selektory
Kaskadowe arkusze stylów dają najwięcej możliwości projektantom stron WWW. Dzięki CSS możemy całkowicie odmienić wygląd strony w kilka minut, bez ingerencji w kod HTML. Ale mimo ogromnego potencjału CSS, najczęściej nie korzystamy z możliwości jego pseudoklas, pseudoelementów oraz specjalnych znaczników i nadmiernie komplikujemy dokument HTML ogromną ilością niepotrzebnych klas, identyfikatorów, DIV-ów oraz SPAN-ów. Najlepszym sposobem, aby Twój HTML nie zawierał nadmiaru niepotrzebnych tworów jest używanie bardziej złożonych selektorów CSS. Dzięki temu kod będzie bardziej czytelny a arkusze CSS mniej skomplikowane.
Specyficzność CSS
Specyficzność CSS (z ang. ‘specifity’) określa wagę właściwości CSS. Innymi słowy, jeśli w dwóch lub więcej miejscach zostaną zadeklarowane dla tego samego elementu różne właściwości, np. różne kolory tła, specyficzność określa, która z deklaracji jest „ważniejsza”.
Ważna jest więc umiejętność obliczania specyficzności danego elementu, która pozwala niekiedy zaoszczędzić sporo czasu straconego na przeszukiwaniu pliku CSS w odpowiedzi na pytanie: „dlaczego ten akapit ma niebieskie tło, skoro deklarowałem zielone”.
Oto jak oblicza się specyficzność konkretnego selektora:
- Dodaj 1000 (styl jest umieszczony w kodzie HTML):
| <span style=”color:red”>Czerwony tekst</span> |
- Za każdy identyfikator należy dodać po 100:
| #sidebar, #footer { color:red; } |
- Każda klasa to 10:
| .form { margin-top:20px; } |
- Wszystkie inne elementy, pseudoklasy, elementy HTML mają wartość 1:
| img { border:none; } |
- Uniwersalny selektor (*) ma wartość 0 (zero).
Jeśli właściwość danego elementu będzie różnie zadeklarowana w wielu miejscach, dominującą będzie ta, która ma największą specyficzność (nawet, gdy jest zadeklarowana wcześniej niż pozostałe).
Przykłady:
- a.stopka, h4, h5 0013
- #footer, img 0101
- #sidebar, p:first-line 0102
- h2, h3, h4, h5 0004
Spośród poniższych dwóch selektorów, właściwości tego pierwszego zostaną nadane elementom, ponieważ ma on większą specyficzność.
- #sidebar p#first { color: red; } — 0201
- #sidebar p:first-line { color: blue; } — 0102
W zrozumieniu specyficzności pomóc może podstawowe narzędzie webmastera, czyli Firebug. Po zaznaczeniu elementu na karcie HTML, w oknie styl po prawej stronie można przeglądać, jakie właściwości ma on nadany w kolejności od największej specyficzności.

Przydatne linki:
- CSS Specificity: Things You Should Know
- Link Specificity¯MeyerWeb
- CSS: Specificity Wars
- Assigning property values, Cascading, and Inheritance—W3C
«poprzednia 1 2 3 4 ... 9 następna »
Komentarze
Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka
(słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.
Popularne
Nazwa padła ofiarą szantażystów, inni polscy hosterzy też zagrożeni?
20
Premiera Diablo 3 wzbudziła dyskusję na temat gier, które zawsze chcą być online
19
Darmowy Internet od Aero2. Jak go zdobyć i jakie są prawdziwe koszta? Instrukcja krok po kroku
11
Programowanie w środowisku Android – wprowadzenie do projektowania aplikacji dla urządzeń mobilnych
17
Nowy problem z Windows 8: bootuje się za szybko
10
Amerykańscy rodzice straszeni „e-narkotykami” dostępnymi w Sieci
21
Z okazji wypuszczenia akcji Facebooka przypomnijmy sobie, kim jest Zuckerberg
10
Blueseed: libertariańska sztuczna wyspa przyciągnęła już ponad sto startupów z całego świata
8
Rewolucja w Firefoksie, nowa łatka czterokrotnie ograniczyła zużycie pamięci
20
Darmowy Internet od Aero2. Jak go zdobyć i jakie są prawdziwe koszta? Instrukcja krok po kroku
11
CVDazzle: makijaż jest w stanie pokonać automatyczne systemy ulicznego monitoringu
3
Programowanie w środowisku Android – wprowadzenie do projektowania aplikacji dla urządzeń mobilnych
17
Co czeka programistów po czterdziestce?
27
Ubuntu 12.04 LTS już dostępny: stabilna dystrybucja na następne pięć lat?
28
Społeczność
Jarek1983-2 Potwierdzam , że nie webd.pl nie działał przez kilka godzin.
Do...
Wszerad Tylko dwa gatunki mogą na tym skorzystać, filmy przyrodnicze i porno w...
gosc Jak by tak zaczęli kręcić filmy to rewolucja w przemyśle kinowym i TV...
m_gol @_Igancio:
Chyba pomyliłeś gazetę z natemat.pl...
m_gol Niestety na razie nie wszędzie Flasha da się zastąpić, nawet w takich...
stop_gupota "Fanatyczny" Diablo 3 jest dopiero od 10 dni.
Mas Ciekawa informacja, ale akurat projekt wytopu stali przez chłopów to był...
- Najdmen.pl: Konta www z wyłączonym licznikiem transferu od IONIC.pl (1)
- 2BE.PL: [Oferta] Promocja jak złoto w 2BE.PL (1)
- gardius: Dobra hurtownia sportowa (1)
- gardius: Tanie książki gdzie warto kupować? (1)
- Najdmen.pl: PROMOCJA, 500 DOMEN .EU ZA 1 PLN NETTO ! (1)
- VMLine: [Oferta] Serwery VPS Xen-HVM/OpenVZ z darmową administracją (2)
- Marek: Generowanie PDFa (2)
Polecane książki
Praca
Czytaj Webhosting
Chcesz być na bieżąco z naszymi informacjami? Zapisz się na Newsletter.
Zarejestruj domenę
Sprawdź dostępność swojej domeny:
| .pl: | 0 zł | .com: | 19.90 zł | |
|---|---|---|---|---|
| .com.pl: | 0 zł | .eu: | 19.90 zł |









#1 miklosz® 2009-09-30 09:42:48 0
IP: 83.19.243.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 (.NET CLR 3.5.30729)
#2 dAREuS® 2009-09-30 09:47:20 0
IP: 194.181.106.[...] Opera/9.80 (Windows NT 6.0; U; pl) Presto/2.2.15 Version/10.00
#3 eimi® 2009-09-30 10:27:55 0
IP: 88.156.95.[...] Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.1) Gecko/20090805 Firefox/3.5.2
#4 sln 2009-09-30 10:41:46 0
IP: 83.12.235.[...] Opera/9.80 (Windows NT 5.1; U; pl) Presto/2.2.15 Version/10.00
#5 MariuszT 2009-09-30 10:43:03 0
IP: 62.141.255.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 (.NET CLR 3.5.30729)
#6 soran 2009-09-30 16:50:15 0
IP: 79.163.242.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 FirePHP/0.3
#7 wujekbogdan 2009-10-01 09:07:06 0
IP: 83.18.108.[...] Opera/9.80 (Windows NT 5.1; U; pl) Presto/2.2.15 Version/10.00
#8 hahaha! 2009-10-07 14:56:44 0
IP: 83.21.255.[...] Mozilla/5.0 (X11; U; Linux i686; pl-PL; rv:1.9.1.2) Gecko/20090820 Iceweasel/3.5.3 (Debian-3.5.3-1)
#9 Sony 2010-03-10 14:05:39 0
IP: 81.210.21.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/533.2 (KHTML, like Gecko) Chrome/5.0.342.2 Safari/533.2