Kurs CSS3

Pseudo selektory

Notatki

Moja tabelka

Selektor	Wyjaśnienie
input[type="radio"]:checked + label { text-decoration: underline; }	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), a następnie zastosuj styl do następnego elementu. Jaki lubisz kolor? A - czerwony B - zielony C - żółty
input[type="text"]:focus	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 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ą najszybsze.
.download:before	Wybierze wszystkie elementy, które mają klasę .download i dodaj zawartośćz właściwości content. link 1 link 2 link 3
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 Przykładem jest ta tabela, gdzie pogrubiono czcionkę, wszystkim td w pierwszej kolumnie ;)
:nth-child(2n)	zaznaczamy co drugie dziecko CSS-TRICKS - :nth tester
.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 to jest jedyny span w divie pierwszy span drugi span jedyny span ale tu mamy akapit i span nie jest jedynym dzieckiem tego rodzica
.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 nie jestem pusty
#testing_selector p:not(.bezstylu)	wybierz wszystkie elementy o nazwie tagu p wewnątrz elementu o id #testing_selector z wyjątkiem takiego p którego klasa jest równa .bezstylu To jest normalny paragraf To jest paragraf o klasie .bezstylu To jest normalny paragraf To jest paragraf o klasie .bezstylu To jest normalny paragraf To jest normalny paragraf To jest paragraf o klasie .bezstylu To jest paragraf o klasie .bezstylu To jest normalny paragraf To jest normalny paragraf
#testing_selector_2 p:first-letter	wybierz wszystkie elementy o nazwie tagu p o id testing_selector_2, po czym wybierz z tych elementów pierwsze litery (first-letter) i zastosuj poniższe style Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, vel. Dolor vitae numquam hic aperiam porro Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, vel. Dolor vitae numquam hic aperiam porro Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, vel. Dolor vitae numquam hic aperiam porro Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, vel. Dolor vitae numquam hic aperiam porro Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, vel. Dolor vitae numquam hic aperiam porro
#testing_selector_3 p:first-line	wybierz wszystkie elementy o nazwie tagu p o id testing_selector_3, po czym wybierz z tych elementów pierwsze linie (first-linie) i zastosuj poniższe style Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, vel. Dolor vitae numquam hic aperiam porro Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, vel. Dolor vitae numquam hic aperiam porro Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, vel. Dolor vitae numquam hic aperiam porro Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, vel. Dolor vitae numquam hic aperiam porro Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, vel. Dolor vitae numquam hic aperiam porro
input:disabled	Wybierz wszystkie elementy o nazwie tagu input, które są nieaktywne (Disabled) Rejestracja: Email: Polecający:
#showMeFun:target	Element o ID showMeFun, do którego zostanie przeniesiona "akcja" otrzyma poniższe style... Show Me Fun!

Elementy przykładowe

Pojawianie się elementów

.box:hover .show

Po najechaniu kursowem na element .box wybieramy dziecko o nazwie .show

Checked label

input[type="radio"]:checked + label

:nth-child(2n)

zaznaczamy co drugie dziecko

div child 1

div child 2

div child 3

div child 4

div child 5

div child 6

div child 7

div child 8

div child 9

div child 10

div child 11

div child 12

div child 13

zrobiliśmy 3 zaznaczenia.

wszystkie dzieci
co drugie dziecko
co trzecie dziecko

Tabelka z pobrana z kursu

[Show] [Hide]

Pseudo Selektory
Selektor	Wyjaśnienie
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) Jaki najbardziej lubisz kolor? A - czerwony B - zielony C - żółty
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ą jednymi z najszybszych dysków na świecie.
.download:before	wybierz wszystkie elementy które mają klasę download dodaj przed (:before) zawartość z właściwości content Lekcja 1 Lekcja 2 Lekcja 3
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 Przykładem jest ta tabela, gdzie pogrubiono czcionkę, wszystkim td w pierwszej kolumnie ;)
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 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 jestem span jestem span jestem span jestem span jestem akapit
.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 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 To jest testowy test ostylowany. To jest testowy test ostylowany. Tu nie chce mieć stylu To jest testowy test ostylowany. Tu nie chce mieć stylu To jest testowy test ostylowany.
#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... To jest testowy test ostylowany. Inny tekst o niczym tralalala. Coś tam sobie piszę po to by te zdanie zajęło trochę wiecej miejsca. Ogólnie to jest spoko, ponieważ mogę dzięki temu coś pokazać.
#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... To jest testowy test ostylowany. Inny tekst o niczym tralalala. Coś tam sobie piszę po to by te zdanie zajęło trochę wiecej miejsca. Ogólnie to jest spoko, ponieważ mogę dzięki temu coś pokazać. Znowu inny, a jednak podobny tekst o niczym tralalala. Coś tam sobie piszę po to by te zdanie zajęło trochę wiecej miejsca. Ogólnie to jest spoko, ponieważ mogę dzięki temu coś pokazać.
input:disabled	To jest testowy test ostylowany. Inny tekst o niczym tralalala. Coś tam sobie piszę po to by te zdanie zajęło trochę wiecej miejsca. Ogólnie to jest spoko, ponieważ mogę dzięki temu coś pokazać. Znowu inny, a jednak podobny tekst o niczym tralalala. Coś tam sobie piszę po to by te zdanie zajęło trochę wiecej miejsca. Ogólnie to jest spoko, ponieważ mogę dzięki temu coś pokazać.