Selektory elementów - CSS
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?
- 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:
- W pierwszej selektorem jest znacznik p, a deklaracja ma postać
{ color: red }
. Cechą jestcolor
, a wartościąred
. - 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ść }
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.
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?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 3.5, Safari 1)
* { 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?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 3.5, Safari 1)
przodek1 przodek2 ... potomek { cecha: wartość }
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>
- Punkt pierwszy
- Podpunkt pierwszy
- Podpunkt drugi
- Punkt drugi
<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
- Podpunkt pierwszy
- 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?
(interpretuje: Chrome 1, Firefox 1, Edge 12, Opera 4, Safari 1)
rodzic > dziecko { cecha: wartość }
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ść }
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ść }
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ść }
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.
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.
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.
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.
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.
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.
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ą.
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.
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.