Selektory w CSS czyli jak zapanować dokładnie nad kodem strony i jej wyglądem.

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…
Opublikowany w CSS

Dodaj komentarz