W CSS selektor (selecor) to cześć stylu która poprzedza otwierający nawias klamrowy. Określa on do jakiego elementu odnosi się dana reguła.
Bez znajomości selektorów, nie znasz tak naprawdę CSS aktualnie, dlatego poniżej dostajesz wykaz najwazniejszych selektorów które musisz znać.
| SELEKTORY | |
| p | wybierz wszystkie elementy o nazwie p |
| .foo | wybierz wszystkie elementy, których class=’foo‚ |
| #identyfikator | wybierz wszystkie elementy, których id=’identyfikator‚ |
| * | wybierz wszystkie elementy na stronie |
| div, p | wybierz wszystkie elementy o nazwie div oraz p |
| div p.foo | wybierz wszystkie elementy o nazwie p, których class=’foo‚ – dodatkowo muszą znajdować się w jakimś div. |
| div > p.foo | wybierz wszystkie elementy o nazwie p, gdy class=’foo‚ które są w środku div, dodatkowo muszą być to elementy, które są bezpośrednimi dziećmi elementu div |
| div + p.foo | wybierz wszystkie elementy o nazwie p, gdy class=’foo‚ które są dokładnie obok (po) elemencie div. Inaczej – jeśli dokładnie po div, będzie p.foo to zastosuj na tym elemencie i tylko tym poniższy styl – TO JEST WARUNEK |
| div ~ p.foo | to samo co wyżej tylko, że wybiera wszystkie elementy p.foo sąsiadujące po div (muszą być na tym samym poziomie w hierarchii) |
| SELEKTORY ATRYBUTÓW | |
| input[required] | wybierz wszystkie elementy o nazwie tagu input które mają atrybut required |
| [href=”twojastrona.pl”] | wybierz wszystkie elementy które mają atrybut href równy twojastrona.pl |
| input[type=”text”] | wybierz wszystkie elementy o nazwie tagu input, a atrybut type równy jest text |
| [href*=”twojastrona.pl”] | wybierz wszystkie elementy które mają atrybut href w której wartości znajduje się gdziekolwiek twojastrona.pl |
| [id^=”produkt-„] | wybierz wszystkie elementy które mają atrybut id o wartości rozpoczynającej się od produkt- |
| a[href^=”http://”] | wybierz wszystkie elementy o tagu a które mają atrybut href w której wartości znajduje się na początku http:// |
| [href$=”.jpg”] | wybierz wszystkie elementy które mają atrybut href o wartości kończącej się na .jpg |
| [lang|=en] | wybierz wszystkie elementy które mają atrybut lang o wartości en lub też jest połączony z innym słowem przy pomocy –(myślnika) |
| [data-filetype=”obrazek”] | wybierz wszystkie elementy które mają atrybut data-filetype o wartości równej obrazek |
| a[data-info~=”external”] | wybierz wszystkie elementy, których tag nazywa się a oraz które mają atrybut data-info oraz jedną z wartości data-info jest external |
| PSEUDO SELEKTORY | |
| input[type=’radio’]:checked | wybierz wszystkie elementy o nazwie tagu input 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) |
| [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 |
| .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 PEWNOpierwszymi dziećmi swojego rodzica |
| table tr:nth-child(2n) td:first-child table tr:nth-child(2n) td:last-childtable 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 rodzicaW obu przypadkach nth-child obliczamy w taki sposób, że za n podstawiamy liczby całkowite nieujemne to jest: 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 dzieckiem rodzica, tylko muszą być np. w przypadku 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 |
| #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 |
| #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ższe style… |
| #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 pierwsze litery (first-letter) i zastosuj poniższe style… |
| input:disabled | wybierz wszystkie elementy o nazwie tagu input, które są nieaktwyne (disabled) |
| #showMeFun:target | Element o id showMeFun, do którego zostanie przeniesiona „akcja” otrzyma poniższe style… |