selektor typu - Kurs HTML i CSS
Selektory elementów CSS / Selektor typuselektor { 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...
- Selektory CSS
...atrybutów Selektory specjalne Selektory pseudoelementów Selektory pseudoklas Wstęp Poniżej znajdziesz skrócony opis wszystkich rodzajów selektorów CSS. Dokładniej na ich temat możesz przeczytać klikając odnośnik w kolumnie "Opis". Natomiast kolumna "CSS" zawiera poziom specyfikacji języka, w którym po raz pierwszy selektor został wprowadzony. Źródło: Cascading Style Sheets, Level 2, Selectors Level 3 Selektory elementów Wzór Znaczenie Opis CSS * każdy element...
- Selektory pseudoklas CSS / Pseudoklasy cykliczne :nth-child :nth-last-child :nth-of-type :nth-last-of-type
...Dzieci - począwszy od ostatniego: dziecko:nth-last-child(cykl) rodzic > dziecko:nth-last-child(cykl) Elementy wybranego typu: selektor:nth-of-type(cykl) rodzic > dziecko:nth-of-type(cykl) Elementy wybranego typu - począwszy od ostatniego: selektor:nth-last-of-type(cykl) rodzic > dziecko:nth-last-of-type(cykl) Selektorem, rodzicem oraz dzieckiem może być praktycznie dowolny znacznik, przy czym dziecko zawiera się w znaczniku rodzica [zobacz: Wstawianie stylów]...
- Wykazy CSS / Niestandardowy typ stylu wykazu @counter-style
...Punkt trzeci Punkt czwarty Punkt piąty Punkt szósty Anonimowy typ stylu wykazu {list-style-type: symbols} (CSS 3 - interpretuje Firefox 35) selektor { list-style-type: symbols(symbole) } lub selektor { list-style-type: symbols(algorytm symbole) } Selektorem mogą być znaczniki dotyczące wykazów: ul - wypunktowanie, ol - wykaz numerowany oraz li - pojedynczy punkt wykazu [zobacz: Wstawianie stylów]. W przypadku definiowania anonimowego typu stylu wykazu każdy element listy symbolów...
- Selektory elementów CSS / Selektor uniwersalny
...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...
- Selektory specjalne CSS / Klasy selektorów <... class>
Spis treści <... class> Klasy selektorów <... class> Lista klas Podzbiory klas Klasy selektorów <... class> selektor.klasa { cecha: wartość } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne) [zobacz: Wstawianie stylów]. Klasa to wartość atrybutu class="..." nadanego selektorowi z poziomu języka HTML. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Jako...
- Selektory elementów CSS / Selektor potomka
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...
- Selektory pseudoklas CSS / Pseudoklasy typu :first-of-type :last-of-type :only-of-type
(CSS 3 - interpretuje Internet Explorer 9, Firefox 3, Opera, Chrome) Pierwszy element wybranego typu: selektor:first-of-type { cecha: wartość } rodzic > dziecko:first-of-type { cecha: wartość } Ostatni element wybranego typu: selektor:last-of-type { cecha: wartość } rodzic > dziecko:last-of-type { cecha: wartość } Jedyny element wybranego typu: selektor:only-of-type { cecha: wartość } rodzic > dziecko:only-of-type { cecha: wartość } Selektorem, rodzicem oraz dzieckiem może być...
Formularze HTML / Selektor plików <input "file">...</form> gdzie jako "nazwa" należy wpisać krótką nazwę danego pola. Zostanie ona później wysłana wraz z formularzem. Polecenie wprowadza selektor plików, składający się z dwóch pól: pola tekstowego, w którym wpisuje się ścieżkę dostępu do pliku, przycisku, po naciśnięciu którego, można przeszukać dysk, aby odnaleźć plik. Selektor plików został wprowadzony teoretycznie po to, aby można było przesłać wybrany plik w załączniku do listu (formularza). Wtedy dla znacznika...
- Selektory pseudoklas CSS / Łączenie selektorów
Na koniec warto wspomnieć o jeszcze jednej przydatnej własności selektorów CSS. Jak się można było przekonać, rodzajów selektorów jest bardzo wiele - każdy przeznaczony do innego celu. Co jednak zrobić, jeżeli potrzebujemy w jednej regule stylu zastosować kilka selektorów prostych? Czy jest to w ogóle możliwe? Oczywiście, że tak. Wystarczy po prostu wpisać je jeden po drugim (bez żadnych odstępów) w następującej kolejności: selektor typu lub selektor uniwersalny selektory atrybutów...