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:

«poprzednia 1 2 3 4 ... 9 następna »

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

9 skomentuj »

Komentarze

#1 miklosz^® 2009-09-30 09:42:48 0
Artykuł miesiąc jak dla mnie! Tak powinien wyglądać cały webhosting.pl!
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
Dzięki miklosz, staramy się. PS: miło, że znów Cię widać w serwisie.
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
Dziękujemy i witamy Cię Miklosz z przyjemnością. Obiecujemy, że będziemy starali się trzymać poziom, nie obiecujemy, że będziemy pisać w Wh tylko o CSS :).
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
Bardzo ciekawy artykuł. Pomimo, że sporo czasu koduję css dowiedziałem się kilku nowych, przydatnych rzeczy.

Pozdrawiam
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
Przyłączam się do gratulacji, bardzo potrzebne i ciekawe informacje, wszystko zrozumiałe.
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
Naprawde pomocne informacje :) dzieki wielki
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
oby więcej takich artykułów. myślałem, że w miarę dobrze znam css zanim nie przejrzałem tego artykułu. nie miałem jeszcze czasu przeczytać całego.

dobra robota!
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
"Obsługa przez przeglądarki

Oczywiście, jak zwykle wszystkie nowoczesne przeglądarki oprócz IE obsługują powyższe pseudoklasy."
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
Artykuł ma błąd.

Odnośnie specyficzności. Klasy i pseudoklasy mają tą samą hierarchię. Tak twierdzą inne źródła i firebug.
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

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.