Detské selektory. Podradené a kontextové selektory css css vyberajú podradené prvky

Myslím, že o tom veľa ľudí vie kontextové selektory v CSS... Používajú sa najčastejšie, avšak skúsení dizajnéri rozloženia si dobre uvedomujú, že kontextové selektory niekedy prinášajú určité problémy. Tento problém súvisí so skutočnosťou, že v štruktúre prvku môže byť veľa rovnakých prvkov vnorených do seba. A je potrebné aplikovať štýl nie na všetky vnorené elementy, ale len na priamo podriadený element. Toto na to používajú. podradené selektory v CSS.

Aby bol problém jasnejší, uvedieme malý príklad. Dajme si také Html kód:

Prvý odsek

Druhý odsek

A našou úlohou je urobiť iba červenú " Druhý odsek". Ak píšeme pomocou kontextového selektora:

Kontajner p (
farba: červená;
}

Potom sa oba odseky sfarbia na červeno, čo vôbec nepotrebujeme. Táto úloha je veľmi ľahko riešiteľná pomocou podradené selektory v CSS:

Kontajner> p (
farba: červená;
}

Všetko, teraz sme sa stali iba červenými" Druhý odsek Keďže tento konkrétny odsek je priamo podriadený .kontajner... A " Prvý odsek„je dieťaťom vnútra div teda nepodlieha detskému selektoru.

Takto ľahko sa takéto úlohy riešia, má to však jednu obrovskú nevýhodu. podradené selektory v CSS- nefungujú v prehliadačoch internet Explorer ... Z tohto dôvodu je ich použitie veľmi nežiaduce. Ale ak sa zrazu niekde stretnete, teraz budete vedieť, čo to znamená daný typ selektory a čo robí.

Dosiahli ste tretiu časť tejto kapitoly. Tu sa dozviete, ako používať selektory potomkov v CSS, ako aj niektoré ďalšie pseudotriedy na presnejšie vzorkovanie.

Podradené selektory CSS

V predchádzajúcom článku sme hovorili o vzťahoch medzi prvkami dokumentu HTML vrátane detí. Pozrime sa na príklad, ako sa dajú tieto vzťahy použiť v CSS.

Predstavte si, že stačí upraviť štýl týchto značiek

Z ktorých sú deti bez ovplyvnenia zvyšku

(Napríklad,

Dcérske spoločnosti z

).
Ako to spraviť? Veľmi jednoduché: vytvorte detský selektor:

Body> p (farba: # 333;)

Všimnite si symbol > za telom. Pomocou neho označíte, že štýl sa použije výlučne na podradené značky.

Rodič ... Ak sa symbol odstráni, štýl sa použije na úplne všetky značky.

Ktoré sú vo vnútri štítku , hoci nemusia byť jeho deťmi.

Ďalšie pseudotriedy

V CSS3 existuje množstvo pseudotried pre prácu s deťmi. Nižšie je uvedený popis každého z nich, príklady použitia, ako aj rozdiely medzi pseudotriedami formy „dieťa“ a „typu“.

: first-child – Táto pseudotrieda sa môže použiť na úpravu špecifikovaného prvku webovej stránky za predpokladu, že je prvý
: last-child - štýl sa použije na zadaný prvok webovej stránky za predpokladu, že je posledný dieťa svojho rodiča;
: n-té dieťa - umožňuje vybrať párne (párne) a nepárne (nepárne) deti; túto pseudotriedu môžete použiť aj na štýl striedania detí pomocou výrazov ako a + b a číslic;
: only-child – Vzťahuje sa na podradený prvok za predpokladu, že je jediný dieťa s rodičom;
: first-of-type – štýl sa použije na prvý prvok zadaného typu(aj keď tento prvok nie je prvým potomkom svojho rodiča a nad ním sú ďalšie deti iných typov);
: last-of-type – funguje úplne rovnako ako predchádzajúca pseudotrieda, len s tým rozdielom, že štýl je aplikovaný na na posledný prvok zadaného typu;
: n-tého typu – funguje ako: n-té dieťa, ale zameriava sa na typ element;
: only-of-type - platí pre potomka zadaného typu za predpokladu, že ho má rodič jediné dieťa svojho druhu.

Príklad použitia: first-child,: last-child a: nth-child

Prvé dieťa

Druhé dieťa

Tretie dieťa

Nepárne číslo

Párne číslo

Nepárne číslo

Párne číslo

Posledné dieťa

/ * CSS * / p: prvé dieťa (váha písma: tučné; transformácia textu: veľké písmená;) p: posledné dieťa (štýl písma: kurzíva; veľkosť písma: 0,8 em;) p: nté dieťa ( 3) (farba: červená;) tr: n-té dieťa (nepárne) (farba pozadia: # A2DED0;) tr: n-té dieťa (párne) (farba pozadia: # C8F7C5;) Snímka obrazovky: uplatňovanie: prvé dieťa, : posledné dieťa a: n-té dieťa

Napísali sme štýl CSS pre deti jednoduchého dokumentu HTML, kde je značka

je rodič pre značky

... Poďme sa pozrieť na CSS po poriadku.

Prvé pravidlo – p: prvorodené – sa zaoberá prvkom p: ak je prvé dieťa svojho rodiča, potom sa naň aplikuje štýl (v našom prípade je to tučné písmo a prevod textu na veľké písmená). Ak je v danom HTML kóde hneď za otváracou značkou

pridajte inú značku (napr.

), potom sa štýl p: pre prvé dieťa už nebude zobrazovať, pretože
Prestane byť prvou detskou značkou. V tomto prípade bude prvým dieťaťom h2.

To isté sa stane s pravidlom p: last-child – na značku sa použije štýl CSS
Až keď sa objaví posledné dieťa svojho rodiča... Pridajte po
Akákoľvek iná značka iného typu a uvidíte, že pravidlo p: posledné dieťa už nebude platiť.

Pravidlo p: n-té dieťa (3) funguje pre tretí detská značka
(Svedčí o tom číslo 3 v zátvorke). Farba písma tohto odseku sa zmení na červenú. Môžete zmeniť číslo 3 (napríklad na 2) a vidieť výsledok.

Pravidlá tr: n-té dieťa (nepárne) a tr: n-té dieťa (párne) fungujú pre nepárne a párne prvky tr. Výsledok môžete vidieť na snímke obrazovky, ako aj skopírovať celý kód a sami experimentovať so štýlmi.

Príklad použitia: first-of-type,: last-of-type,: nth-of-type and: only-of-type

Prvé dieťa

Druhé dieťa

Tretie dieťa

Štvrté dieťa

Piate dieťa

Posledné dieťa

/ * CSS * / p: prvý typ (farba: fialová; transformácia textu: veľké písmená;) p: posledný typ písma (štýl písma: kurzíva; veľkosť písma: 0,8em;) p: n-tý- typu (3) (farba: červená;) p: n-tého typu (nepárne) (farba pozadia: # A2DED0;) p: n-tého typu (párne) (farba pozadia: # C8F7C5;) h3: only-of-type (text-decoration: underline;)
Snímka obrazovky: Používa sa: prvý typ,: posledný typ,: n-tý typ a: jediný typ

Prvé pravidlo CSS, ktoré vidíte, je p: first-of-type. Čo to robí? Vyberie potomka typu p, ktorý prvý sa vyskytuje u rodiča. A nezáleží na tom, kde je táto značka medzi prvkami iných typov - na prvom, druhom alebo desiatom. Toto je rozdiel medzi pseudotriedami: first-child a: first-of-type.

Druhé pravidlo, p: last-of-type, aplikuje štýl na posledný dieťa typu p. Ako môžete vidieť z HTML kódu, za posledným tagom

Je tam aj visačka

, ktorého prítomnosť žiadnym spôsobom neovplyvňuje vykonanie pravidla CSS (na rozdiel od možnosti s: last-of-child).

Ďalšie pravidlo - p: n-tého typu (3) - zmení farbu písma na červenú. Použije tento štýl na značku
Ktorý je tretí prvkom vlastného typu u rodiča. Na snímke obrazovky môžete vidieť, že na značku je použitá červená
Čo je v skutočnosti piate dieťa značky
... Ak však neberiete do úvahy prvky iných typov, ukáže sa, že značka
S červeným písmom je na treťom mieste (medzi tagmi svojho typu). Toto pravidlo funguje takto.

Pravidlá p: n-tého typu (párne) a p: n-tého typu (nepárne) fungujú podobne: keďže meno p je uvedené pred dvojbodkou, vyberú sa párne a nepárne potomkovia typu p a farebné s prednastavené farby... Ostatné prvky sú preskočené.

Posledné pravidlo - h3: only-of-type - platí pre obsah značky
podčiarknutím textu. Tento štýl funguje len vďaka tagu
je jediný dieťa svojho druhu. Ak do kódu HTML pridáte ďalšiu značku
, štýl sa nepoužije.

závery

Podradený selektor CSS vám umožňuje naštylizovať potomka dokumentu HTML podľa toho, kto je rodič.

Pomocou dodatočných pseudotried: first-child,: last-child,: n-th-child,: only-child, môžete štylizovať podradené prvky dokumentu HTML so zameraním na ich umiestnenie, číslovanie v strome prvkov.

Pseudotriedy: first-of-type,: last-of-type,: nth-of-type,: only-of-type vám umožňujú štylizovať podradené prvky dokumentu HTML na základe ich typu a číslovania v prvku. strom...

Posledná aktualizácia: 21.04.2016

Špeciálnu skupinu pseudotried tvoria pseudotriedy, ktoré vám umožňujú vybrať konkrétne deti:

: first-child: predstavuje prvok, ktorý je prvým dieťaťom

: last-child: predstavuje prvok, ktorý je posledným potomkom

: only-child: predstavuje prvok, ktorý je jediným potomkom v nejakom kontajneri

: only-of-type: vyberie prvok, ktorý je jediným prvkom konkrétneho typu (značky) v nejakom kontajneri

: n-té dieťa (n): predstavuje podradený prvok, ktorý má špecifické číslo n, napríklad druhý potomok

: nth-last-child (n): predstavuje podradený prvok, ktorý má špecifické číslo n, začínajúc od konca

: n-tého typu (n): vyberie potomka špecifického typu, ktorý má špecifické číslo

: nth-last-of-type (n): vyberie potomka špecifického typu, ktorý má špecifické číslo začínajúce od konca

Prvotriedna pseudotrieda

Na výber prvých odkazov v blokoch používame pseudotriedu prvého potomka:
Selektory v CSS3
Tablety

Microsoft Surface Pro 4
Apple iPad Pro
ASUS ZenPad Z380KL

Smartfóny

Najlepšie smartfóny roku 2016
Samsung Galaxy S7
Apple iPhone SE
Huawei P9

A: First-child je štylizovaný na odkaze, ak je prvým potomkom akéhokoľvek prvku.

A v druhom bloku je prvým prvkom odsek, takže žiadny z odkazov nie je štylizovaný.

Pseudotrieda posledného dieťaťa

Používame pseudotriedu posledného dieťaťa:
Selektory v CSS3
Smartfóny

Samsung Galaxy S7
Apple iPhone SE
Huawei P9

Tablety

Microsoft Surface Pro 4
Apple iPad Pro
ASUS ZenPad Z380KL
Údaje za rok 2016

Selektor a: posledného potomka definuje štýl pre odkazy, ktoré sú poslednými potomkami.

V prvom bloku je odkaz posledným podriadeným prvkom. Ale v druhom, posledným potomkom je odsek, takže v druhom bloku sa štýl nepoužije na žiadny z odkazov.

Selektor jediného dieťaťa

Selektor: only-child vyberá prvky, ktoré sú jedinými podriadenými položkami v kontajneroch:
Selektory v CSS3
Smerovanie

Text1

Text2

Text3

Text4

Odseky s textami "Text1" a "Text4" sú jedinými podriadenými vo svojich vonkajších kontajneroch, preto sú štylizované červenou farbou písma.

Jedinečná pseudotrieda

Pseudotrieda typu only-of-type vyberá prvok, ktorý je jediným prvkom konkrétneho typu v kontajneri. Napríklad jeden prvok div, pričom v rovnakom kontajneri môže byť toľko prvkov iných typov.
Selektory v CSS3
Hlavička

Jeden odsek a prvok span

Päta

Hoci je pre prvky div definovaný štýl, nepoužije sa, pretože v kontajneri tela sú dva prvky div, nie jeden. Ale v karosérii je len jeden prvok p, takže dostane štýl. A tiež je v kontajneri p len jeden prvok rozpätia, takže bude tiež štylizovaný.

Pseudotrieda n-tého dieťaťa

Pseudotrieda n-tého dieťaťa vám umožňuje štylizovať každý druhý, tretí prvok, iba párne alebo len nepárne prvky atď.

Napríklad upravme štýl párnych a nepárnych riadkov tabuľky:
Selektory v CSS3
Smartfóny

Samsung	Galaxy S7 Edge	60000
Apple	iPhone SE	39000
Microsoft	Lumia 650	13500
Alcatel	Idol s4	30000
Huawei	P9	60000
HTC	HTC 10	50000
Meizu	Pro 6	40000
Xiaomi	Mi5	35000

Na definovanie štýlu pre nepárne prvky sa do selektora odovzdá hodnota „odd“:

Tr: n-té dieťa (nepárne) ()

Ak chcete upraviť párne prvky, do selektora sa odovzdá hodnota „párne“:

Tr: n-té dieťa (párne) ()

Tomuto selektoru môžeme tiež odovzdať číslo prvku, ktorý má byť štylizovaný:

Tr: n-té dieťa (3) (farba pozadia: #bbb;)

V tomto prípade sa štylizuje tretí riadok.

Ďalšou možnosťou je použiť zástupný znak pre číslo, ktorý je vyjadrený písmenom n:

Tr: n-té dieťa (2n + 1) (farba pozadia: #bbb;)

Tu sa štýl použije na každý druhý nepárny riadok.

Číslo pred n (v tomto prípade 2) predstavuje ďalšie dieťa, ktoré má byť zvýraznené. Číslo, ktoré nasleduje za znamienkom plus, označuje, od ktorého prvku sa má výber začať, čiže +1 znamená začať od prvého podriadeného prvku.

V tomto prípade teda výber začína od 1. prvku a ďalší je 2 * 1 + 1 = 3. prvok, potom 2 * 2 + 1 = 5. prvok atď.

Napríklad, ak chceme vybrať každý tretí prvok počnúc druhým, môžeme napísať:

Tr: n-té dieťa (3n + 2) (farba pozadia: #bbb;)

Pseudotrieda: nth-last-child poskytuje v podstate rovnakú funkcionalitu s tým rozdielom, že prvky sa nepočítajú od začiatku, ale od konca:

Tr: n-té-posledné dieťa (2) (farba pozadia: #bbb; / * 2 riadok od konca, čiže predposledný * /) tr: n-té-posledné dieťa (2n + 1) (farba pozadia : #eee ; / * nepárne riadky začínajúce od konca * /)

Pseudotrieda N-tého typu

Pseudotrieda: n-tého typu vám umožňuje vybrať potomka konkrétneho typu podľa konkrétneho čísla:

Tr: n-tého typu (2) (farba pozadia: #bbb;)

Pseudotrieda n-tého posledného typu funguje podobne, len teraz sa prvky počítajú od konca:

Tr: n-tý posledný typ (2n) (farba pozadia: #bbb;)

Úlohou, ktorá sa vykonáva, je výber detí.
Označenie - reťazenie: jednoduchý rodičovský volič, ">" kombinátor, jednoduchý podradený volič.
Príklad použitia:

Nastavme ľavé odsadenie pre zoznam priamo vnorený do prvku s triedou obsahu (tieto pravidlá neovplyvnia zoznamy druhej úrovne vnorenia):

Obsah> ul (ľavý okraj: 20px;)

Viac o detskom voliči

Hlavným rozdielom medzi detským selektorom a tým, o ktorom sme hovorili vyššie, je skutočnosť, že ak detský selektor vyberie všetkých potomkov bez ohľadu na úroveň vnorenia, potom detský selektor vyberie iba potomkov prvej úrovne – teda priamo vnorené prvky. Napíšme napríklad toto:

Div> span (farba: # 555; / * šedá * /)

...a tento kód:

Tento text bude čierny. Tento je sivý, pretože toto rozpätie je potomkom div.

Opäť je tu čierny text. A tento text je tiež čierny, pretože toto rozpätie nie je potomkom prvku div. Jeho priamym rodičom je značka p.

Podriadené selektory CSS sú selektory, ktoré sa používajú na aplikovanie štýlov na prvky, iba ak sú potomkami iných (nadradených) prvkov. Podobne ako podradené selektory sú podradené selektory zložené a tvoria ich jednoduché selektory (triedy, identifikátory atď.).

Opäť, ak ste zabudli, čo sú podradené prvky, potom si zapamätajte analyzovaním príkladu, ktorý je vám už známy.

<тег1> <тег2>... <тег3><тег4>...

Prvok sa nazýva potomkom iného prvku, ak sa v ňom nachádza na prvej úrovni vnorenia. V našom príklade<тег2>a<тег3>sú dcéry<тег1>, a<тег4>- toto je dcéra<тег3> .

Podriadené selektory pozostávajú z dvoch alebo viacerých jednoduchých selektorov oddelených ">", kde je najprv uvedený rodič, potom jeho potomok, potom potomok tohto potomka atď. To znamená, že rovnako ako v selektoroch potomkov je nastavená cesta na prechádzanie stromom dokumentu. Štýly sa použijú len na tie prvky, ktorých selektory sú posledné v zozname. Všeobecná syntax:

selektor1> selektor2 (

Medzery na oboch stranách znaku ">" môžu alebo nemusia byť použité, ak je to potrebné.

Príklad použitia podradených selektorov CSS

Detské selektory

odsek 1

odsek 2

Výsledok v prehliadači

odsek 1

odsek 2

V tomto príklade musíte venovať pozornosť dvom bodom. Sú tu tri prvky, ale iba dva z nich majú okraje, výplň a okraje. prečo? A druhý bod. Iba prvý odsek má modrú farbu textu.

Internet Explorer 6.0 nerozumie detským selektorom, takže ak vytvárate svoju lokalitu s týmto starým prehliadačom, majte to na pamäti.

Podriadené selektory v HTML tabuľkách

Mnoho nováčikov (a niekedy už nie) pri vytváraní webových stránok čelí určitým problémom pri používaní podradených selektorov v tabuľkách HTML. Aby ste pochopili čo v otázke, poďme sa pozrieť na taký bežný stôl.

Bunka 1.1	Bunka 1.2
Bunka 2.1	Bunka 2.2

A teraz otázka. Čo robiť, ak potrebujete prejsť zo značky do buniek pomocou podradených selektorov? Ak sa rozhodnete písať takto, je to nesprávne:

tabuľka> tr> td ( vlastnosť: hodnota; vlastnosť: hodnota; ...)

Môžete hádať, prečo je to nesprávne? nie? Faktom je, že ste zabudli ešte na jeden prvok – ktorý, aj keď nie je výslovne špecifikovaný, je stále neviditeľne prítomný v každej HTML tabuľke. Len nemá požadované otváracie a zatváracie štítky, takže je často prehliadaný. Mimochodom, áno, v HTML tutoriál neprešli sme to s vami, pretože v skutočnosti je jeho výslovná indikácia zriedka potrebná. No, myslím, že ste už uhádli, čo to bude správne zadanie, ale ukážem vám to isté.

tabuľka> tbody> tr> td ( vlastnosť: hodnota; vlastnosť: hodnota; ...)

Mimochodom, nielen tabuľky majú prvky s voliteľnými otváracími štítkami, existujú aj také prvky. Len pri tabuľkách najčastejšie vznikajú v praxi „zábudlivosti“, preto som vás na to upozornil.

Domáca úloha.

Nainštalujte na stránku písmo Arial 0,9em a nejaké pozadie.
Napíšte na stránku nejaké nadpisy a odseky, zmeňte veľkosť a farbu textu nadpisu, ako uznáte za vhodné.
Odkazy priamo v odsekoch stránky urobte modrými bez podčiarknutia. Ale zároveň, ak sú odkazy dodatočne orámované akoukoľvek značkou, napríklad pre kurzívu, mali by byť zobrazené už s podčiarknutím a červenou farbou. Ešte raz dávam do pozornosti, že štýly odkazov netreba písať ku každému framing tagu zvlášť, urobte to univerzálne. ako? Zamyslite sa nad tým.
Vytvorte malé menu na pravej strane stránky a opravte ho, na to potrebujete vlastnosť a pár súvisiacich vlastností, tam to zistíte. Zároveň nechajte menu nielen zostať na svojom mieste v okne prehliadača, ale pri posúvaní ani nelezú po obsahu stránky.

Myslím, že posledný bod lekcie bude pre vás najťažší, no nesnažte sa hneď úplne ponoriť do zvládnutia polohovania. Len si urob domácu úlohu. Mimochodom, táto položka nebude fungovať v Internet Exploreri 6.0, pretože starý pán nerozumie fixnému umiestneniu.