Podstawy cz.1| Selektor | Wyjaśnienie |
|---|---|
| input[type='radio']:checked | Wybierz wszystkie elementy o nazwie tagu radio, które mają atrybut type o wartości radio. Wybierz tylko te elementy z tego zbioru, które są zaznaczone (checked) |
| input[type="text"]:focus | Wybierz wszystkie elementy o nazwie tagu input, które mają atrybut type o wartości text. Wybierz tylko te elementy z tego zbioru, które mają skupienie (focus) Imię: Nazwisko: |
| [data-tooltip]:hover:after | Wybierz wszystkie elementy, które mają atrybut data-tooltip, gdy ktoś najedzie na (:hover) taki element dodaj po (:after) zawartość z właściwości content
Dyski SSD są są szybsze od dysków HDD |
| .download:before | Wybierz wszystkie elementy, które mają klasę download. Dodaj przed (:before) zawartość z właściwości content. |
| table tr td:first-child | Wybierz wszystkie table, a w nich wiersze (tr), a w nich wszystkie komórki (td), które są NA PEWNO pierwszymi dziećmi swojego rodzica.
|
| table tr:nth-child(2n) td:first-child table tr:nth-child(2n) td:last-child table tr:nth-of-type(2n) td:first-of-type table tr:nth-of-type(2n) td:last-of-type |
Wybierz wszystkie table, a w nich co drugi (2n) wiersz tr poczynając od 2 elementu, a w nich wszystkie komórki td, które są pierwszymi dziećmi swojego rodzica.
Wybierz wszystkie table, a w nich co drugi (2n) wiersz tr poczynając od 2 elementu, a w nich wszystkie komórki td, które są ostatnimi dziećmi swojego rodzica W obu przypadkach nth-child obliczamy w taki sposób, że za n podstawiamy liczby całkowite nieujemne tzn. 0, 1, 2, 3, 4... First-of-type, last-of-type,nth-of-type różni się od first-child, last-child, nth-child tylko tym, że przed wybranymi elementami mogą sąsiadować inne tagi. Nie muszą być np, BEZPOŚREDNIO pierwszym dzieciekim rodzica, tylko musząbyć np. w przypadki first-of-type pierwszym tego typu elementem rodzica. |
| .example span:only-child(span) | Wybierz wszystkie elementy o nazwie klasy example, a z nich wybierz span w taki sposób, aby było to jedyne dziecko tego elementu.
|
| .example p:empty | Wybierz takie p, które są puste (empty), oraz są wewnątrz elementu, który ma klasę example
Nie jestem pusty Nie jestem pusty |
| #testing_selector p:not(.bezstylu) | Wybierz wszystkie elementy o nazwie tagu p wewnątrz elementu o id testing_selector3 z wyjątkiem takiego p, którego klasa jest równa bezstylu
Ten tekst powinien być zielony. Ten tekst powinien być zielony. Tu nie chcę mieć stylu Ten tekst powinien być zielony. Tu nie chcę mieć stylu Ten tekst powinien być zielony. |
| #testing_selector2 p:first-letter | Wybierz wszystkie elementy o nazwie tagu p wewnątrz elementu o id testing_selector2, po czym wybierz z tych elementów pierwsze litery (first-letter) i zastosuj poniżej style...
To jest tekst z wielką pierwszą literą |
| #testing_selector3 p:first-line | Wybierz wszystkie elementy o nazwie tagu p wewnątrz elementu o id testing_selector3, po czym wybierz z tych elementów pierwszą linię (first-line) i zastosuj poniższe style.
Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst |
| input: disabled lub input:enabled |
Wybierz wszystkie elmenty o nazwie tagu input, które są nieaktywne (disabled)
|
| #showMeFun: target | Element o id showMeFun do którego została przeniesiona "akcja" otrzyma poniższe style...
Show me something! |
Normalnie jestem ukryty