Przejdź do treści

Selektory elementów - CSS

W tym rozdziale dowiesz się...

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

  • CSS
    Wstęp

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

  • 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?

  • CSS
    Selektor typu

    Jak utworzyć selektor typu - podstawowy rodzaj selektora CSS?

  • CSS
    Selektor uniwersalny

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

  • CSS
    Selektor potomka

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

  • CSS
    Selektor dziecka

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

  • CSS
    Selektor braci

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

  • CSS
    Ogólny selektor braci

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

  • CSS
    Grupowanie selektorów

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

  • Pytania i odpowiedzi
  • Powtórka

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?

(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 3.5, Safari 1)

selektor { cecha: wartość }
gdzie wyrazem selektor może być praktycznie dowolny znacznik, np. p (akapit), h1 (tytuł), td (komórka tabeli) i inne [zobacz: Wstawianie stylów]. To właśnie elementom znajdującym się pomiędzy tymi znacznikami, nadajemy atrybuty formatowania.
Wyrazy "cecha" (ang. property) oraz "wartość" (ang. value) określają atrybuty elementu i zostaną opisane w dalszych rozdziałach. Tutaj będą przedstawione jedynie selektory.

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.

Selektor uniwersalny

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

(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 3.5, Safari 1)

* { cecha: wartość }
gdzie wyrazy "cecha" oraz "wartość" określają atrybuty elementu i zostaną opisane w dalszych rozdziałach [zobacz także: Wstawianie stylów].

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.

Selektor potomka

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

(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 3.5, Safari 1)

przodek1 przodek2 ... potomek { cecha: wartość }
gdzie wyrazy "przodek1, przodek2,..." oraz "potomek" (wielokropek należy pominąć!) są selektorami typu, przy czym przodek leży wyżej w hierarchii drzewa dokumentu [zobacz: Wstawianie stylów].

Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu i zostaną opisane w dalszych rozdziałach.

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:

To jest akapit, a to jest pogrubienie (czerwone), umieszczone wewnątrz tego akapitu oraz wewnątrz znacznika tekstu pochylonego. A to jest pogrubienie (czerwone) bezpośrednio w akapicie, które nie zawiera się w znaczniku pochylenia.

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

p i b  { color: red }

To jest akapit, a to jest pogrubienie (czerwone), umieszczone wewnątrz tego akapitu oraz wewnątrz znacznika tekstu pochylonego. A to jest pogrubienie (nie powinno być czerwone) bezpośrednio w akapicie, które nie zawiera się w znaczniku pochylenia.


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ą.

Selektor dziecka

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

(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 4, Safari 1)

rodzic > dziecko { cecha: wartość }
gdzie wyrazy "rodzic" oraz "dziecko" są selektorami typu, przy czym rodzic leży o jeden rząd wyżej w hierarchii drzewa dokumentu [zobacz: Wstawianie stylów].

Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu i zostaną opisane w dalszych rozdziałach.

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:

To jest akapit, a to jest pogrubienie (nie powinno być czerwone) umieszczone wewnątrz p, ale i wewnątrz znacznika pochylenia. Natomiast to jest pogrubienie (powinno być czerwone) umieszczone bezpośrednio wewnątrz znacznika akapitu.

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?

(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 3.5, Safari 1)

brat1 + brat2 { cecha: wartość }
gdzie wyrazy "brat1" oraz "brat2" są selektorami typu, przy czym leżą one w tym samym rzędzie hierarchii drzewa dokumentu [zobacz: Wstawianie stylów].

Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu i zostaną opisane w dalszych rozdziałach.

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:

To jest akapit, wewnątrz którego znajduje się: pochylenie (nie powinno być czerwone) oraz pogrubienie (powinno być czerwone) (zwróć uwagę, że pomiędzy znacznikami jest zwykły tekst - wyraz "oraz"; nie ma on wpływu na działanie selektora)... następne pogrubienie (nie powinno być czerwone). A to jest pogrubienie (nie powinno być czerwone) wewnąrz pochylenia (nie powinno być czerwone). Tutaj kończy się akapit.

To jest następny akapit, a w nim kolejne pogrubienie (nie powinno być czerwone), które nie sąsiaduje bezpośrednio z żadnym pochyleniem.

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 - interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 9, Safari 3)

brat1 ~ brat2 { cecha: wartość }
gdzie wyrazy "brat1" oraz "brat2" są selektorami typu, przy czym leżą one w tym samym rzędzie hierarchii drzewa dokumentu [zobacz: Wstawianie stylów].

Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu i zostaną opisane w dalszych rozdziałach.

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:

To jest akapit, wewnątrz którego znajduje się: pochylenie (nie powinno być czerwone), klawiatura (nie powinien być czerwony) oraz pogrubienie (powinno być czerwone)... następne pogrubienie (powinno być czerwone). A to jest pogrubienie (nie powinno być czerwone) wewnąrz pochylenia (nie powinno być czerwone). Tutaj kończy się akapit.

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ść }
gdzie wyrazy "cecha" oraz "wartość" określają atrybuty elementu i zostaną opisane w dalszych rozdziałach [zobacz także: Wstawianie stylów].

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ą.

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

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.

Zobacz więcej...

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.

Zobacz więcej...

Jak utworzyć selektor typu - podstawowy rodzaj selektora CSS?

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.

Zobacz więcej...

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.

Zobacz więcej...

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

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.

Zobacz więcej...

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.

Zobacz więcej...

Zobacz więcej...

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

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ą.

Zobacz więcej...

Zobacz więcej...

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...

Facebook