5. selektory potomne

1
Selektory CSS
Selektor
E
E#f
E.f
Nazwa
Selektor typu
Selektor
identyfikatora
Selektor
identyfikatora
Selektor klasy
.f
Selektor klasy
EF
Selektor potomka
E>F
Selektor dziecka
E+F
Selektor
rodzeństwa
Selektor
rodzeństwa
Selektor atrybutu
#f
E~F
E[f]
E[f=”b”]
*
S1, S2, S3
Selektor atrybutu o
podanej dokładnej
wartości
Selektor
uniwersalny
Selektor grupowy
[f$=”b”]
[f^=”b”]
[f*=”b”]
Znaczenie
Pasuje do elementu E
Pasuje do elementu E o
identyfikatorze f
Pasuje do elementu o
identyfikatorze f
Pasuje do elementów E, których
jedną z wartości atrybutu class jest f
Pasuje do elementów, których jedną
z wartości atrybutu class jest f
Pasuje do elementu F zawartego
(dowolnie głęboko) wewnątrz E
Pasuje do elementu F zawartego
bezpośrednio w E
Pasuje do elementu F bezpośrednio
poprzedzonego przez E
Pasuje do elementu F
poprzedzonego przez E
Pasuje do elementów E, które mają
atrybut f
Pasuje do elementów E, które mają
atrybut f o wartości b
Przykład
p
p#pierwszy
#pierwszy
p.parzyste
.parzyste
p em
p>em
em+strong
em~strong
p[class]
input[name=”hobby”]
Pasuje do dowolnego elementu
S1, S2, S3 są dowolnymi selektorami.
Selektor grupowy pasuje do każdego
z nich. Liczba selektorów w grupie
może być dowolna.
elementy, których atrybut f jest
zakończony napisem b
elementy, których atrybut f zaczyna
się napisem b
elementy, których atrybut f zwiera
napis b
h1,h2,h3
a[href$="i"]
a[href^="i"]
a[href*="i"]
Selektory pseudoklas:
:first-child – wybranie elementów będących pierwszymi dziećmi swoich
rodziców, np.
div>p:first-child {
background: red;
}
spowoduje zmianę koloru tła dla wszystkich akapitów, które są pierwszymi dziećmi
elementów div.
:last-child – wybranie elementów będących ostatnimi dziećmi swoich rodziców,
np.
div>p:last-child {
background: blue;
2
}
:nth-child(odd) – wybranie elementów będących nieparzystymi dziećmi swoich
rodziców (even – parzyste elementy)
:nth-child(2) – wybranie elementów będących drugimi dziećmi swoich
rodziców (indeksowanie dzieci od 1)
:nth-child(3n+1) – wybranie co trzeciego dziecka, począwszy od pierwszego,
np.
p:nth-child(3n+1) {
background: yellow;
}
:first-of-type - wybranie elementów będących pierwszymi dziećmi swoich
rodziców wśród dzieci wskazanego typu, np.
p:first-of-type {
background: blue;
}
spowoduje zmianę koloru tła dla wszystkich akapitów, które są pierwszymi dziećmi
tego typu (może je poprzedzać inne rodzeństwo, np. h1, span, itd.).
:last-of-type - wybranie elementów będących ostatnimi dziećmi swoich
rodziców wśród dzieci wskazanego typu
:nth-of-type(3) - wybranie elementów będących trzecimi dziećmi swoich
rodziców wśród dzieci wskazanego typu. Jako parametru można użyć również odd,
even, 3n+1 itd.
ĆWICZENIA
Zad.1
Na stronie zadanie1.html wykonaj następujące polecenia:
- co trzeci akapit ma odstępy między słowami na 10pt
- parzyste akapity mają tło żółte
- ostatnie dzieci akapitów, które są elementami em mają czcionkę koloru niebieskiego
- piąte dziecko elementu div ma obramowanie niebieskie wykropkowane, a prawa krawędź
obramowania ma być niewidoczna
- nieparzyste akapity mają tekst pochylony
- elementy em, które są drugimi dziećmi tego typu swoich rodziców mają tekst podkreślony
- obrazki, których nazwa pliku to obrazek.jpg mają obramowanie lewo- i prawostronne,
zielone o szerokości 3px
- wszystkie elementy strong zagnieżdżone dowolnie głęboko wewnątrz elementu o
identyfikatorze trzeci mają rozmiar czcionki 20pt
- odnośniki, które mają nadany jakikolwiek tytuł mają odstępy między literami 6px
- nagłówki h1,h2,h3 mają lewy margines na 50px
- co druga opcja listy ma tło koloru #cc0000
- akapity, których nazwa klasy kończy się literą ‘y’ mają górny margines 15px
- odnośniki, których tytuł zawiera napis ”em” mają górną krawędź pomarańczową o
szerokości 4px
- akapit poprzedzony bezpośrednio przez listę ma mieć czcionkę pomarańczową