W tym rozdziale dowiesz się...

Używanie selektorów elementów w arkuszach CSS.

• 
  Wstęp

  Co to są selektory w języku CSS i dlaczego są tak ważne?

• 
  Reguły stylów

  Co to są reguły stylów CSS? Z czego składa się deklaracja stylu i czym różni się od reguły?

• 
  Selektor typu

  Jak utworzyć selektor typu - podstawowy rodzaj selektora CSS?

• 
  Selektor uniwersalny

  W jaki sposób przypisać styl do wszystkich elementów?

• 
  Selektor potomka

  W jaki sposób nadać formatowanie znacznikom potomków znajdującym się wewnątrz innego elementu - przodka?

• 
  Selektor dziecka

  W jaki sposób nadać formatowanie znacznikowi dziecka znajdującemu się bezpośrednio wewnątrz elementu rodzica?

• 
  Selektor braci

  W jaki sposób nadać formatowanie znacznikowi znajdującemu się bezpośrednio po innym elemencie - bracie?

• 
  Ogólny selektor braci

  W jaki sposób nadać formatowanie znacznikom znajdującym się w dowolnym miejscu po innym elemencie - bracie?

• 
  Grupowanie selektorów

  W jaki sposób za jednym razem przypisać formatowanie różnym selektorom CSS?

• 
  Pytania i odpowiedzi

  CSS

• 
  Powtórka

  CSS

Wstęp

Co to są selektory w języku CSS i dlaczego są tak ważne?

Siła CSS leży nie tylko w możliwości dostarczania deklaracji z różnych źródeł, ale także w różnorodnych sposobach precyzyjnego określania konkretnych elementów w kodzie źródłowym dokumentu HTML, którym będą przypisywane atrybuty formatowania, zmieniające ich wygląd. Umożliwiają to tzw. selektory. Ich wielość nie wynika ze złośliwości twórców języka CSS, którzy chcieli utrudnić Tobie drogi czytelniku naukę, ale z chęci dania większej swobody i elastyczności rozwiązań twórcom stron WWW podczas projektowania arkuszy CSS.

Reguły stylów

Co to są reguły stylów CSS? Z czego składa się deklaracja stylu i czym różni się od reguły?

Atrybuty formatowania w języku CSS definiuje się za pomocą tzw. reguł stylów. Każda reguła odnosi się do konkretnego elementu (znacznika) i składa się z dwóch części: selektora i deklaracji. Selektor określa do jakich elementów ma zostać przypisane formatowanie, a deklaracja podaje to formatowanie i jest umieszczona w nawiasie klamrowym {...}. Każda deklaracja składa się przynajmniej z jednego zespołu cecha lub inaczej własność albo właściwość (ang. property) - wartość (ang. value), przy czym można podać dowolną liczbę, rozdzielając kolejne znakiem średnika (;). Średnik na końcu deklaracji nie jest konieczny.

Każda grupa elementów (znaczników) ma określony zespół cech CSS, które można jej przypisać, a każda cecha ma ściśle wyszczególnioną listę wartości, które może przyjąć. Na przykład: cecha text-align (wyrównanie tekstu) może być przypisana tylko i wyłącznie do elementów blokowych, ponieważ podanie jej dla elementów wyświetlanych w linii nie miałoby sensu. Z drugiej strony cecha ta może przyjmować tylko wartości takie jak: left, right, center, justify. Przypisanie do niej np. wartości koloru nie miałoby sensu.

W MSIE 8.0 i starszych jeden plik arkusza CSS może zawierać tylko 4095 selektorów, przy czym w listach każdy selektor liczy się osobno - następne deklaracje zostaną pominięte! W przypadku przekroczenia tej granicy, jedynym rozwiązaniem jest podział arkusza CSS na kilka osobnych plików, ale nie więcej niż 31.

Przykład

/* Pierwsza reguła: */
p { color: red }
/* Druga reguła: */
p b { color: red; background-color: yellow }

Powyżej mamy przykład dwóch reguł stylów:

1. W pierwszej selektorem jest znacznik p, a deklaracja ma postać { color: red }. Cechą jest color, a wartością red.
2. W drugiej selektorem jest zestawienie znaczników p b. Deklaracja zawiera dwa zespoły cecha-wartość.

Pytania i odpowiedzi

Co to reguła CSS?

Reguła CSS to zbiór instrukcji, które określają wygląd i formatowanie elementów na stronie internetowej.

Jakie są części reguły CSS?

Reguła CSS składa się z dwóch głównych części: selektora i deklaracji. Selektor wskazuje na element lub elementy, do których reguła ma być zastosowana, np. p oznacza akapit. Deklaracje określają konkretne właściwości i wartości stylów, które mają zostać zastosowane do wybranych elementów, np. color: blue; zmienia kolor tekstu na niebieski.

Selektor typu

Jak utworzyć selektor typu - podstawowy rodzaj selektora CSS?

selektor { cecha: wartość }

Selektor typu jest podstawowym rodzajem selektora. Pozwala on wybrać pojedynczy zwykły element dokumentu HTML podanego typu, czyli o określonej nazwie, a następnie nadać mu atrybuty (za pomocą cechy oraz wartości - opisane w następnych rozdziałach). Można powiedzieć, że selektor ten to inaczej element (znacznik), występujący w kodzie źródłowym strony.

UWAGA!
W języku XHTML wszystkie selektory muszą być pisane małymi literami.

Przykład

Załóżmy że w arkuszu stylów została umieszczona następująca reguła:

h6 { color: red }

Jak widać jest to selektor typu (podstawowy). Dzięki niemu wystarczyłoby teraz napisać:

<h6>To jest tytuł rzędu szóstego</h6>

aby otrzymać tytuł, napisany czerwoną czcionką (red).

Pytania i odpowiedzi

Co to jest selektor CSS?

Selektor CSS to wzorzec lub nazwa, która określa zbiór elementów HTML, do których ma być zastosowana dana reguła stylów. Selektor identyfikuje elementy, które zostaną sformatowane według określonych właściwości i wartości.

Czy H1 to selektor?

Selektorem CSS może być dowolny znacznik HTML, w tym również h1, który jest selektorem odnoszącym się do nagłówków pierwszego poziomu.

Selektor uniwersalny

W jaki sposób przypisać styl do wszystkich elementów?

* { cecha: wartość }

Selektor taki pozwala ustalić określone atrybuty dla wszystkich elementów strony, a więc dla różnych selektorów typu. Możemy za pomocą tej komendy nadać to samo formatowanie dla wszystkich elementów na całej stronie, niezależnie od ich typu (p, h1, li itd.). Niestety jego działanie nie zawsze jest jednoznaczne, dlatego dużo bezpieczniej jest używać selektora typu dla elementu body, chyba że zastosujemy to polecenie w odniesieniu do klasy selektorów.

Jeśli selektor uniwersalny chcemy zastosować do selektora innego niż selektor typu (w połączeniu z selektorami: atrybutów, specjalnymi, pseudoelementów lub pseudoklas), to gwiazdkę można pominąć.

Pytania i odpowiedzi

Co oznacza * w CSS?

W CSS * jest znakiem wieloznacznym, który odnosi się do wszystkich elementów HTML na stronie. Przykład: * { margin: 0; } zeruje marginesy dla wszystkich elementów.

Co to jest selektor uniwersalny?

Selektor uniwersalny w CSS odnosi się do wszystkich elementów na stronie. Jest to najogólniejszy selektor, który ma zastosowanie do każdego elementu HTML, umożliwiając jednolitą zmianę stylów dla całej strony.

Jaką rolę podczas definiowania stylów odgrywa selektor uniwersalny?

Selektor uniwersalny ma rolę zmiany stylów dla wszystkich elementów na stronie. Jest przydatny do zastosowań takich jak resetowanie domyślnych stylów przeglądarek, lub wprowadzanie globalnych zmian do marginesów czy paddingu.

Selektor potomka

W jaki sposób nadać formatowanie znacznikom potomków znajdującym się wewnątrz innego elementu - przodka?

przodek1 przodek2 ... potomek { cecha: wartość }

Selektor tego typu pozwala nadać atrybuty elementom, które leżą niżej w hierarchii drzewa dokumentu (zawierają się w innych zewnętrznych znacznikach). Dzięki temu możemy zmienić typ formatowania tylko dla określonych elementów, które są podrzędne w stosunku do innych (przodków). Potomek nie musi leżeć bezpośrednio wewnątrz znacznika przodka. Może być zawarty jeszcze w innych znacznikach, które z kolei zawierają się w rodzicu. Nie jest wtedy konieczne podawanie w deklaracji wszystkich rodziców, a jedynie przodka i potomka.

Selektor taki jest szczególnie przydatny, dla określenia wyglądu odsyłaczy wewnątrz bloku, ponieważ jeśli nie określimy dla nich tzw. pseudoklas odsyłaczowych, nie odziedziczą one formatowania po przodkach.

Przykład

Załóżmy, że w arkuszu stylów strony została umieszczona następująca reguła:

p b { color: red }

Dzięki temu, jeśli wewnątrz znacznika p (akapit) znajdzie się znacznik b (czyli pogrubienie tekstu), to zostanie on automatycznie napisany czcionką koloru czerwonego:

Zwróć uwagę, że pogrubienie (potomek) nie musi znajdować się bezpośrednio w akapicie (przodek).

p i b  { color: red }

Inny przykład:

ol ul { color: red }

Taka deklaracja spodowuje, że każdy wykaz typu wypunktowanie (ul), który znajdzie się wewnątrz wykazu numerowanego (ol), będzie miał automatycznie nadany kolor czerowny:

<ol>
<li>Punkt pierwszy
	<ul>
	<li>Podpunkt pierwszy</li>
	<li>Podpunkt drugi</li>
	</ul>
</li>
<li>Punkt drugi</li>
</ol>

1. Punkt pierwszy
   • Podpunkt pierwszy
   • Podpunkt drugi
2. Punkt drugi

Dla porównania żaden z poniższych wykazów nie będzie czerwony:

<ul>
<li>Punkt pierwszy
	<ul>
	<li>Podpunkt pierwszy</li>
	<li>Podpunkt drugi</li>
	</ul>
</li>
<li>Punkt prugi
	<ol>
	<li>Podpunkt pierwszy</li>
	<li>Podpunkt drugi</li>
	</ol>
</li>
<li>Punkt trzeci</li>
</ul>

• Punkt pierwszy
  • Podpunkt pierwszy
  • Podpunkt drugi
• Punkt prugi
  1. Podpunkt pierwszy
  2. Podpunkt drugi
• Punkt trzeci

Pytania i odpowiedzi

Na czym polega selektor potomka?

Selektor potomka w CSS służy do wybierania elementów potomnych, czyli elementów znajdujących się wewnątrz określonych elementów nadrzędnych. Selektor potomka jest zapisywany jako kombinacja nazw elementów oddzielonych spacją.

Jak wybrać wszystkie elementy P wewnątrz elementu DIV?

Aby wybrać wszystkie elementy <p> znajdujące się wewnątrz elementu <div>...</div>, można użyć selektora potomka. Na przykład: div p zastosowany w regule CSS spowoduje, że zostaną wybrane wszystkie akapity wewnątrz kontenerów.

Selektor dziecka

W jaki sposób nadać formatowanie znacznikowi dziecka znajdującemu się bezpośrednio wewnątrz elementu rodzica?

rodzic > dziecko { cecha: wartość }

Selektor tego typu pozwala nadać atrybuty elementom, które leżą o jeden rząd niżej w hierarchii drzewa dokumentu (zawierają się w innym zewnętrznym znaczniku). W odróżnieniu do poprzedniego przypadku, tutaj znacznik będący dzieckiem, musi znajdować się bezpośrednio wewnątrz znacznika rodzica.

UWAGA! Polecenie nie jest interpretowane przez MSIE 6 (od wersji 7 wszystko jest już w porządku).

Przykład

Załóżmy, że w arkuszu stylów strony została umieszczona następująca reguła:

p > b { color: red }

Dzięki temu, jeśli bezpośrednio wewnątrz znacznika p (akapit) znajdzie się znacznik b (czyli pogrubienie tekstu), to zostanie on automatycznie napisany czcionką koloru czerwonego:

Zwróć uwagę na różnice w stosunku do selektora potomka.

Jeśli używasz Internet Explorera 6, interpretacja powyższego przykładu prawdopodobnie nie będzie poprawna. Tylko pogrubienie, które zostało wpisane w drugiej kolejności, powinno być czerwone.

Selektor braci

W jaki sposób nadać formatowanie znacznikowi znajdującemu się bezpośrednio po innym elemencie - bracie?

brat1 + brat2 { cecha: wartość }

Selektor ten umożliwia nadanie określonych atrybutów jednemu z sąsiadujących ze sobą braci - temu, który w deklaracji został podany jako drugi (czyli brat2). Zwykły tekst znajdujący się pomiędzy braćmi nie ma wpływu na działanie selektora, tzn. jest ignorowany.

UWAGA! Polecenie nie jest interpretowane przez MSIE 6 (od wersji 7 wszystko jest już w porządku).

Przykład

Załóżmy, że w arkuszu stylów strony została umieszczona następująca reguła:

i + b { color: red }

Dzięki temu, jeśli wewnątrz tego samego znacznika (rodzica), będą znajdowały się po sobie znaczniki i oraz b, to ten drugi uzyska określone atrybuty:

Jeśli używasz Internet Explorera 6, interpretacja powyższego przykładu prawdopodobnie nie będzie poprawna. Tylko pogrubienie, które zostało wpisane w pierwszym akapicie jako pierwsze w kolejności, powinno być czerwone.

Ogólny selektor braci

W jaki sposób nadać formatowanie znacznikom znajdującym się w dowolnym miejscu po innym elemencie - bracie?

CSS 3 -

brat1 ~ brat2 { cecha: wartość }

Selektor ten umożliwia nadanie określonych atrybutów wszystkim braciom - tym, których typ w deklaracji został podany jako drugi (czyli brat2). Zwykły tekst znajdujący się pomiędzy braćmi nie ma wpływu na działanie selektora, tzn. jest ignorowany. W odróżnieniu jednak od podstawowego selektora braci, w tym przypadku pomiędzy braćmi mogą się znajdować również elementy innego typu - zostaną pominięte.

Nie obsługuje MSIE 6.0!.

Przykład

Załóżmy, że w arkuszu stylów strony została umieszczona następująca reguła:

i ~ b { color: red }

Dzięki temu, jeśli wewnątrz tego samego znacznika (rodzica), będą znajdowały się znaczniki i oraz b, to te drugie uzyskają określone atrybuty:

Zwróć uwagę, że pomiędzy braćmi, oprócz zwykłego tekstu, znajduje się dodatkowo znacznik klawiatury (kbd) i mimo to nie zaburza on działania selektora, gdyż jest innego typu niż bracia wyszczególnieni w regule stylów. Ponadto warto zauważyć, że inaczej niż dla podstawowego selektora braci, w tym przypadku formatowanie otrzymują również wszystkie następne znaczniki typu brat2, a nie tylko pierwszy z nich. Właśnie dlatego w powyższym przykładzie drugie pogrubienie również jest czerwone.

Grupowanie selektorów

W jaki sposób za jednym razem przypisać formatowanie różnym selektorom CSS?

selektor1, selektor2, selektor3... { cecha: wartość }

Taka deklaracja stylu pozwala nadać te same wartości atrybutów kilku różnym selektorom jednocześnie (bez względu na ich położenie w hierarchii drzewa dokumentu). Oznacza to, że zamiast wpisywać kilka razy te same deklaracje, wystarczy wymienić dowolną liczbę selektorów po przecinku i jednorazowo przypisać im wszystkim ten sam styl.

Przykład

Jeśli w arkuszu stylów strony została umieszczona następująca reguła:

b, i { color: red }

to po wpisaniu:

<b>pogrubienie</b>
<i>pochylenie</i>

otrzymamy tekst, napisany w całości czcionką koloru czerwonego:

pogrubienie pochylenie

Przykład ten działa tak samo jak:

b { color: red }
i { color: red }

jednak jak widać, dzięki użyciu znaku przecinka, oszczędzamy sobie pisania. Dodatkowo jeśli kiedyś musielibyśmy zmienić ustalony wcześniej dla tych selektorów kolor tekstu, będzie wystarczyło zrobić to tylko w jednym miejscu.

Pytania i odpowiedzi

Poniżej znajdziesz wykaz najczęściej zadawanych pytań z tego rozdziału wraz ze zwięzłymi odpowiedziami i gotowymi do użycia przykładami kodu CSS. Aby sprawdzić bardziej szczegółowy opis, kliknij odnośnik "Zobacz więcej..." pod wybraną odpowiedzią.

Powtórka

Sprawdź, czy pamiętasz, za co odpowiadają poniższe fragmenty kodu źródłowego CSS. W razie wątpliwości kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.

Jak utworzyć selektor typu - podstawowy rodzaj selektora CSS?

selektor { cecha: wartość }

Zobacz więcej...

W jaki sposób przypisać styl do wszystkich elementów?

* { cecha: wartość }

Zobacz więcej...

W jaki sposób nadać formatowanie znacznikom potomków znajdującym się wewnątrz innego elementu - przodka?

przodek1 przodek2 ... potomek { cecha: wartość }

Zobacz więcej...

W jaki sposób nadać formatowanie znacznikowi dziecka znajdującemu się bezpośrednio wewnątrz elementu rodzica?

rodzic > dziecko { cecha: wartość }

Zobacz więcej...

W jaki sposób nadać formatowanie znacznikowi znajdującemu się bezpośrednio po innym elemencie - bracie?

brat1 + brat2 { cecha: wartość }

Zobacz więcej...

W jaki sposób nadać formatowanie znacznikom znajdującym się w dowolnym miejscu po innym elemencie - bracie?

brat1 ~ brat2 { cecha: wartość }

Zobacz więcej...

W jaki sposób za jednym razem przypisać formatowanie różnym selektorom CSS?

selektor1, selektor2, selektor3... { cecha: wartość }

Zobacz więcej...