Co to jest selektor CSS? - Kurs HTML i CSS
Dobre praktyki / Przykazania webmastera...znaczniki semantyczne, które już znajdują się w kodzie źródłowym - wstaw jeden element div, będący pojemnikiem całego obiektu, a potem korzystaj z selektora potomka w celu wystylizowania elementów, które zawiera obiekt. Wstawianie zbędnych znaczników nie tylko zaciemnia kod, ale również wydłuża czas ładowania strony. Formatuj kod źródłowy Kod zawierający znaczniki z dodanymi wcięciami - zgodnie z poziomem ich zagnieżdżenia w drzewie dokumentu - jest czytelniejszy, a dzięki temu mniej...
- Selektory specjalne / 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 pseudoelementów / Pierwsza linia :first-line
selektor:first-line { cecha: wartość } Selektorem może być znacznik wyświetlany w bloku. CSS 2.1 dozwala zastosowanie dodatkowo do elementów inline-block, tytułów (podpisów) tabeli (<caption>...</caption>) oraz komórek tabeli (<td>...</td>). [Zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Polecenie raz zdefiniowane w arkuszu stylów, pozwala na nadanie określonych cech wszystkim...
- Selektory pseudoelementów / Pierwsza litera :first-letter
selektor:first-letter { cecha: wartość } Selektorem może być dowolny znacznik wyświetlany w bloku [zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Aby selektor zadziałał, blok musi się rozpoczynać tekstem, a nie np. obrazkiem ani tabelką. Polecenie pozwala na nadanie określonych cech pierwszej literze treści, znajdującej się wewnątrz znacznika, na który wskazuje selektor. UWAGA...
- Selektory pseudoelementów / Przed... :before
...treści :before Przed... :before Obrazek przed... :before {content: url} Wartość atrybutu przed... :before {content: attr} Przed... :before selektor:before { content: "treść" } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów]. Natomiast jako wyraz "treść" można wpisać dowolny tekst. Polecenie pozwala automatycznie dopisywać podaną treść przed określonymi elementami, na które wskazuje selektor. UWAGA...
- Selektory pseudoelementów / Po... :after
Spis treści :after Po... :after Obrazek po... :after {content: url} Wartość atrybutu po... :after {content: attr} Po... :after selektor:after { content: "treść" } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów]. Natomiast jako wyraz "treść" można wpisać dowolny tekst. Polecenie pozwala automatycznie dopisywać podaną treść po określonych elementach, na które wskazuje selektor. UWAGA! Polecenie nie interpretuje...
- Selektory pseudoklas / Domyślne :default
(CSS 3 - interpretuje Firefox 3, Opera 12- i 38, Chrome 51) selektor:default { cecha: wartość } Selektorem mogą być pola formularza: wyboru, opcji oraz opcje listy rozwijalnej, a także przyciski [zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Niektóre elementy formularza mogą oznaczać domyślną akcję. Na przykład przycisk wysłania formularza powinien być domyślnym. Mimo iż w...
- Selektory pseudoklas / Etykieta :target
(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome) selektor:target { cecha: wartość } Selektorem może być praktycznie dowolny znacznik, który posiada atrybut id="..." albo ewentualnie może to być element A posiadający atrybut name="..." [zobacz: Odsyłacz do etykiety i Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Czasami podział serwisu na podstrony jest niewystarczający...
- Selektory pseudoklas / Negacja :not
(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome) selektor:not(argument) { cecha: wartość } Selektorem może być dowolny znacznik [zobacz: Wstawianie stylów]. Argument to jeden z selektorów: typu, uniwersalny, atrybutu, klasy/identyfikatora albo dowolna pseuoklasa (z wyjątkiem samej pseudoklasy negacji). Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Wyobraźmy sobie sytuację, kiedy chcemy...
- Selektory pseudoklas / 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ć...