Selektory elementów

1. Selektory elementów

2. Selektor typu selektor {cecha: wartość} Selektor typu jest podstawowym rodzajem selektora. Pozwala on wybrać pojedynczy zwykły element dokumentu (X)HTML podanego typu, czyli o określonej nazwie, a następnie nadać mu. <h6>To jest tytuł rzędu szóstego</h6> To jest tytuł rzędu szóstego h6 { color: red }

3. Selektor uniwersalny * {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.).

4. Selektor potomka 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.

5. Selektor potomka p b {color: red} <p>To jest akapit, a to jest <i><b> pogrubienie (czerwone)</b>, umieszczone wewnątrz tego akapitu oraz wewnątrz znacznika tekstu pochylonego.</i> A to jest <b> pogrubienie (czerwone)</b> bezpośrednio w akapicie, które nie zawiera się w znaczniku pochylenia… </p>

6. Selektor potomka 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…

7. Selektor potomka p i b {color: red} <p>To jest akapit, a to jest <i><b> pogrubienie (czerwone)</b>, umieszczone wewnątrz tego akapitu oraz wewnątrz znacznika tekstu pochylonego.</i> A to jest <b> pogrubienie (nie powinno być czerwone)</b> bezpośrednio w akapicie, które nie zawiera się w znaczniku pochylenia… </p>

8. Selektor potomka 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…

9. Selektor potomka ol ul{color: red} <ol> <li>Punkt pierwszy <ul> <li>Podpunkt pierwszy</li> <li>Podpunkt drugi</li> </ul> </li> <li>Punkt drugi</li> </ol>

10. Selektor potomka 1. Punkt pierwszy • Podpunkt pierwszy • Podpunkt drugi 2. Punkt drugi

11. ol ul{color: red} <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 drugi • Podpunkt pierwszy • Podpunkt drugi • Punkt trzeci

12. Selektor dziecka 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.

13. Selektor dziecka p > b {color: red} <p>To jest akapit, a to jest <i><b>pogrubienie (nie powinno być czerwone)</b> umieszczone wewnątrz p, ale i wewnątrz znacznika pochylenia</i>. Natomiast to jest <b>pogrubienie (powinno być czerwone)</b> umieszczone bezpośrednio wewnątrz znacznika akapitu.</p>

14. Selektor dziecka p > b {color: red} 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.</p>

15. Selektor braci i + b {color: red} <p>To jest akapit, wewnątrz którego znajduje się: <i>pochylenie (nie powinno być czerwone)</i> oraz <b>pogrubienie (powinno być czerwone)</b> (zwróć uwagę, że pomiędzy znacznikami jest zwykły tekst - wyraz "oraz"; nie ma on wpływu na działanie selektora)... następne <b>pogrubienie (nie powinno być czerwone)</b>. A to jest <i><b>pogrubienie (nie powinno być czerwone)</b> wewnątrz pochylenia (nie powinno być czerwone)</i>. Tutaj kończy się akapit. <p>To jest następny akapit, a w nim kolejne <b>pogrubienie (nie powinno być czerwone)</b>, które nie sąsiaduje bezpośrednio z żadnym pochyleniem.</p>

16. Selektor braci i + b {color: red} 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ątrz 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.

17. Grupowanie selektorów selektor1, selektor2, selektor3… {cecha: wartość} b, i { color: red } <b>pogrubienie</b> <i>pochylenie</i> pogrubieniepochylenie

18. Grupowanie selektorów selektor1, selektor2, selektor3… {cecha: wartość} b, i { color: red } b {color: red} i {color: red}