Selectoare pentru copii. Selectoare CSS contextuale pentru copii și CSS selectează elemente copil

Cred că mulți oameni știu despre asta selectori contextuali în CSS... Acestea sunt folosite cel mai des, totuși, proiectanții de layout experimentați știu bine că uneori selectorii contextuali introduc anumite probleme. Această problemă este legată de faptul că în structura unui element pot exista multe elemente identice imbricate unul în celălalt. Și este necesar să se aplice stilul nu tuturor elementelor imbricate, ci doar elementului direct copil. Aceasta este ceea ce folosesc pentru asta. selector de copii în CSS.

Pentru a clarifica problema, să dăm un mic exemplu. Să avem așa ceva Cod HTML:

Primul paragraf

Al doilea paragraf

Și sarcina noastră este de a face doar roșu " Al doilea paragraf". Dacă scriem folosind un selector de context:

Recipient p (
culoarea rosie;
}

Apoi ambele paragrafe vor deveni roșii, de care nu avem nevoie deloc. Această sarcină este foarte ușor de rezolvat folosind selector de copii în CSS:

Recipient> p (
culoarea rosie;
}

Gata, acum doar noi am devenit roșii " Al doilea paragraf Deoarece acest paragraf special este în mod direct copil al .container... A " Primul paragraf„este un copil al internului div astfel, nu intră sub influența selectorului de copii.

Acesta este modul în care sunt ușor de rezolvat astfel de sarcini, cu toate acestea, există un dezavantaj imens. selector de copii în CSS- nu funcționează în browsere Internet Explorer ... Din acest motiv, utilizarea lor este extrem de nedorită. Dar dacă te întâlnești brusc undeva, acum vei ști ce înseamnă tip dat selectoare și ce face.

Ați ajuns la a treia parte a acestui capitol. Aici veți învăța cum să utilizați selectoarele pentru copii în CSS, precum și câteva pseudo-clase suplimentare pentru eșantionare mai precisă.

Selectoare CSS pentru copii

În articolul precedent, am vorbit despre relațiile dintre elementele unui document HTML, inclusiv copiii. Să aruncăm o privire la un exemplu despre modul în care aceste relații pot fi utilizate în CSS.

Imaginați-vă că trebuie doar să stilizați aceste etichete

Care sunt copii ai fără a afecta restul

(de exemplu,

Filiale ale

).
Cum să o facă? Foarte simplu: să creăm un selector pentru copii:

Corp> p (culoare: # 333;)

Observați simbolul> după corp. Cu aceasta, indicați că stilul este aplicat exclusiv etichetelor copil

Mamă ... Dacă simbolul este eliminat, stilul va fi aplicat absolut tuturor etichetelor.

Care sunt în interiorul etichetei , deși este posibil să nu fie copii ai acesteia.

Pseudo-clase suplimentare

Există un număr de pseudo-clase în CSS3 pentru lucrul cu copiii. Mai jos este o descriere a fiecăruia dintre ele, exemple de utilizare, precum și diferențele dintre pseudo-clasele formei „copil” și „de tip”.

: first-child - Această pseudo-clasă poate fi utilizată pentru a stiliza elementul specificat al paginii web, cu condiția să fie primul
: ultimul copil - stilul este aplicat elementului de pagină web specificat, cu condiția să fie ultimul un copil al părintelui său;
: nth-child - vă permite să selectați copii par (par) și impari (impari); puteți utiliza, de asemenea, această pseudo-clasă pentru a stiliza copii alternanți utilizând expresii precum an + b și numere;
: only-child - Se aplică elementului copil, cu condiția să fie singurul un copil cu un părinte;
: primul de tip - stilul este aplicat la primul element al tipului specificat(chiar dacă acest element nu este primul copil al părintelui său și există și alți copii de alte tipuri deasupra acestuia);
: last-of-type - funcționează exact la fel ca pseudo-clasa anterioară, cu singura diferență căreia i se aplică stilul până la ultimul element al tipului specificat;
: nth-of-type - funcționează ca: nth-child, dar se concentrează asupra tip de element;
: numai de tip - se aplică unui copil de tipul specificat, cu condiția ca părintele să îl aibă singurul copil de genul său.

Exemplu de utilizare: primul-copil ,: ultimul-copil și: n-al-copil

Primul copil

Al doilea copil

Al treilea copil

Numar impar

Număr par

Numar impar

Număr par

Ultimul copil

/ * CSS * / p: first-child (font-weight: bold; text-transform: uppercase;) p: last-child (font-style: italic; font-size: 0.8em;) p: nth-child ( 3) (color: red;) tr: nth-child (impar) (background-color: # A2DED0;) tr: nth-child (pare) (background-color: # C8F7C5;) Captură de ecran: aplicarea: first-child, : ultimul copil și: al n-lea copil

Am scris un stil CSS pentru copiii unui document HTML simplu, unde eticheta

este părintele pentru etichete

... Să aruncăm o privire la CSS în ordine.

Prima regulă - p: primul copil - se referă la elementul p: dacă este primul copil al părintelui său, apoi i se aplică stilul (în cazul nostru este îndrăzneț și convertește textul cu majuscule). Dacă se află în codul HTML dat imediat după eticheta de deschidere

adăugați o altă etichetă (de exemplu,

), atunci stilul p: first-child nu va mai fi redat deoarece
Va înceta să fie primul etichetă copil. În acest caz, primul copil va fi h2.

Același lucru se întâmplă cu regula p: ultimul copil - stilul CSS va fi aplicat etichetei
Numai când apare ultimul copil al părintelui său... Adăugați după
Orice altă etichetă de alt tip și veți vedea că regula p: ultimul copil nu se va mai aplica.

Regula p: nth-child (3) funcționează pentru al treilea etichetă copil
(Acest lucru este demonstrat de numărul 3 dintre paranteze). Culoarea fontului pentru acest paragraf devine roșie. Puteți schimba numărul 3 (de exemplu, la 2) și puteți vedea rezultatul.

Regulile tr: nth-child (impare) și tr: nth-child (pare) funcționează pentru elementele tr impar și, respectiv, pare. Puteți vedea rezultatul în captura de ecran, precum și să copiați întregul cod și să experimentați singur stilurile.

Exemplu de utilizare: primul-de-tip ,: ultimul-de-tip ,: n-de-tip și: numai-de-tip

Primul copil

Al doilea copil

Al treilea copil

Al patrulea copil

Al cincilea copil

Ultimul copil

/ * CSS * / p: primul de tip (culoare: violet; transformare text: majuscule;) p: ultimul tip (font-style: italic; font-size: 0.8em;) p: nth- of-type (3) (color: red;) p: nth-of-type (impar) (background-color: # A2DED0;) p: nth-of-type (pare) (background-color: # C8F7C5;) h3: numai de tip (text-decor: subliniat;)
Captură de ecran: Aplicare: primul-de-tip ,: ultimul-de-tip ,: al-n-de-tip și: numai-de-tip

Prima regulă CSS pe care o vedeți este p: first-of-type. Ce face? Selectează un copil de tip p, care primul apare la părinte. Și nu contează unde se află această etichetă printre elementele altor tipuri - în prima, a doua sau a zecea. Aceasta este diferența dintre pseudo-clasele: first-child și: first-of-type.

A doua regulă, p: ultimul tip, aplică stilul ultimul un copil de tip p. După cum puteți vedea din codul HTML, după ultima etichetă

Există, de asemenea, o etichetă

, a cărei prezență nu afectează în niciun fel execuția regulii CSS (spre deosebire de opțiunea cu: ultimul copil).

Următoarea regulă - p: nth-of-type (3) - schimbă culoarea fontului în roșu. Aplică acest stil etichetei
Care este al treilea de un element de tip propriu la părinte. În captura de ecran, puteți vedea că roșul este aplicat etichetei
Care este de fapt al cincilea copil al etichetei
... Dar dacă nu luați în considerare elemente de alte tipuri, se dovedește că eticheta
Cu font roșu este pe locul al treilea (printre etichetele de acest tip). Așa funcționează această regulă.

Regulile p: n-de-tip (par) și p: n-de-tip (impar) funcționează într-un mod similar: deoarece numele p este dat înainte de colon, copiii par și impar de tip p sunt selectați și colorați în culori prestabilite... Restul elementelor sunt omise.

Ultima regulă - h3: numai de tip - se aplică conținutului etichetei
prin sublinierea textului. Acest stil funcționează doar deoarece eticheta
este un singurul un copil de acest gen. Dacă adăugați o altă etichetă la codul HTML
, stilul nu va fi aplicat.

concluzii

Un selector CSS copil vă permite să stilizați copilul unui document HTML în funcție de cine este părintele.

Cu ajutorul unor pseudo-clase suplimentare: first-child ,: last-child ,: nth-child ,: only-child, puteți stiliza elementele copil ale unui document HTML, concentrându-vă pe locația lor, numerotând în arborele elementelor.

Pseudo-clasele: first-of-type ,: last-of-type ,: nth-of-type ,: only-of-type vă permit să stilizați elementele copil ale unui document HTML pe baza tipului și numerotării acestora în arborele elementului ...

Ultima actualizare: 21.04.2016

Un grup special de pseudo-clase este format din pseudo-clase care vă permit să selectați copii specifici:

: primul-copil: reprezintă elementul care este primul copil

: ultimul copil: reprezintă elementul care este ultimul copil

: only-child: reprezintă un element care este singurul copil dintr-un container

: only-of-type: selectează un element care este singurul element al unui anumit tip (etichetă) dintr-un container

: nth-child (n): reprezintă un element copil care are un număr specific n, de exemplu al doilea copil

: nth-last-child (n): reprezintă elementul copil care are un număr specific n, începând de la sfârșit

: nth-of-type (n): selectează un copil de un anumit tip care are un număr specific

: nth-last-of-type (n): selectează un copil de un anumit tip care are un număr specific începând de la sfârșit

Pseudo-clasa primului copil

Folosim pseudo-clasa prim-copil pentru a selecta primele legături din blocuri:
Selectoare în CSS3
Tablete

Microsoft Surface Pro 4
Apple iPad Pro
ASUS ZenPad Z380KL

Smartphone-uri

Cele mai bune smartphone-uri 2016
Samsung Galaxy S7
Apple iPhone SE
Huawei P9

R: primul copil este stilat pe o legătură dacă este primul copil al oricărui element.

Și în cel de-al doilea bloc, primul element este paragraful, deci niciunul dintre linkuri nu este stilat.

Pseudo-clasa ultimului copil

Folosim pseudo-clasa ultimului copil:
Selectoare în CSS3
Smartphone-uri

Samsung Galaxy S7
Apple iPhone SE
Huawei P9

Tablete

Microsoft Surface Pro 4
Apple iPad Pro
ASUS ZenPad Z380KL
Date pentru 2016

Selectorul a: last-child definește stilul pentru legăturile care sunt ultimii copii.

În primul bloc, legătura este ultimul element copil. Dar în al doilea, ultimul copil este paragraful, deci în al doilea bloc, stilul nu se aplică niciunui link.

Selector unic-copil

Selectorul: only-child selectează elementele care sunt singurii copii din containere:
Selectoare în CSS3
Titlu

Text1

Text2

Text3

Text4

Paragrafele cu textele „Text1” și „Text4” sunt singurii copii din containerele lor exterioare, deci au un stil roșu.

Singura pseudo-clasă de tip

Singura pseudo-clasă de tip selectează un element care este singurul element al unui anumit tip din container. De exemplu, un singur element div, în timp ce pot exista cât mai multe elemente de alte tipuri în același container.
Selectoare în CSS3
Antet

Element unic de paragraf și span

Subsol

Deși există un stil definit pentru elementele div, acesta nu va fi aplicat deoarece există două divs în containerul corpului, nu unul. Dar există doar un singur element p în corp, deci va avea un stil. Și, de asemenea, există un singur element de întindere în containerul p, deci va fi și stilat.

Pseudo-clasa copilului al n-lea

Pseudo-clasa a n-a copilului vă permite să stilizați fiecare al doilea, al treilea element, numai elemente pare sau numai impare etc.

De exemplu, să stilăm rândurile pare și impare ale tabelului:
Selectoare în CSS3
Smartphone-uri

Samsung	Galaxy S7 Edge	60000
măr	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

Pentru a defini stilul pentru elementele impare, valoarea „impare” este transmisă selectorului:

Tr: al n-lea copil (impar) ()

Pentru a stiliza elementele pare, valoarea „par” este transmisă selectorului:

Tr: al n-lea copil (par) ()

De asemenea, putem transmite numărul elementului care urmează a fi stilizat acestui selector:

Tr: nth-child (3) (fundal-culoare: #bbb;)

În acest caz, a treia linie este în stil.

O altă posibilitate este utilizarea unui substituent pentru număr, care este exprimat prin litera n:

Tr: nth-child (2n + 1) (fundal-culoare: #bbb;)

Aici, stilul se aplică fiecărei a doua linie impar.

Numărul din fața lui n (în acest caz 2) reprezintă copilul care va fi evidențiat în continuare. Numărul care urmează semnului plus indică din ce element începeți selecția, adică +1 înseamnă să începeți de la primul element copil.

Astfel, în acest caz, selecția începe de la primul element, iar următorul este 2 * 1 + 1 = 3 element, apoi 2 * 2 + 1 = 5 element și așa mai departe.

De exemplu, dacă dorim să selectăm fiecare al treilea element, începând cu al doilea, atunci am putea scrie:

Tr: nth-child (3n + 2) (fundal-culoare: #bbb;)

Pseudo-clasa: nth-last-child oferă în esență aceeași funcționalitate, cu excepția faptului că elementele nu sunt numărate de la început, ci de la sfârșit:

Tr: nth-last-child (2) (background-color: #bbb; / * 2 linie de la sfârșit, adică penultima * /) tr: nth-last-child (2n + 1) (background-color : #eee; / * linii impare începând de la sfârșit * /)

Pseudo-clasa de tip N

Pseudo-clasa: nth-of-type vă permite să selectați un copil de un anumit tip cu un număr specific:

Tr: nth-of-type (2) (fundal-culoare: #bbb;)

Pseudo-clasa a-n-a de tip funcționează într-un mod similar, doar acum elementele sunt numărate de la sfârșit:

Tr: nth-last-of-type (2n) (fundal-culoare: #bbb;)

Sarcina care se efectuează este selectarea copiilor.
Denumire - înlănțuire: selector simplu părinte, ">" combinator, selector simplu copil.
Exemplu de utilizare:

Să setăm indentarea stângă pentru lista cuibărită direct în elementul cu clasa de conținut (aceste reguli nu vor afecta listele celui de-al doilea nivel de cuibărire):

Conținut> ul (margine-stânga: 20 px;)

Mai multe despre selectorul de copii

Principala diferență între selectorul de copii și cel discutat mai devreme este faptul că, dacă selectorul de copii selectează toți descendenții, indiferent de nivelul de cuibărire, atunci selectorul de copii selectează doar descendenții de primul nivel - adică elemente cuibărite direct. De exemplu, să scriem acest lucru:

Div> span (culoare: # 555; / * gri * /)

... și acest cod:

Acest text va fi negru. Și acesta este gri, deoarece acest interval este un copil al unui div.

Există din nou text negru. Și textul respectiv este negru, deoarece acest interval nu este un copil al div. Părintele său imediat este eticheta p.

Selectorele CSS pentru copii sunt selectoare care sunt utilizate pentru a aplica stiluri elementelor numai atunci când sunt copii ai altor elemente (părinte). La fel ca selectoarele descendente, selectoarele copil sunt compozite și sunt alcătuite din selectoare simple (clase, identificatori etc.).

Din nou, dacă ați uitat ce sunt elementele copilului, atunci să ne amintim analizând un exemplu care vă este deja familiar.

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

Un element este numit copil al unui alt element dacă se află în interiorul său la primul nivel de cuibărire. În exemplul nostru<тег2>și<тег3>sunt fiice<тег1>, A<тег4>- aceasta este o fiică<тег3> .

Selectorele pentru copii constau din două sau mai multe selectoare simple separate prin „>”, unde părintele este indicat mai întâi, apoi copilul acestuia, apoi copilul acestui copil și așa mai departe. Adică, la fel ca în selectorii descendenți, este setată calea arborelui documentului. Stilurile vor fi aplicate numai acelor elemente ale căror selectoare sunt ultimele din listă. Sintaxa generală:

selector1> selector2 (

Spațiile de pe ambele părți ale semnului ">" pot fi sau nu utilizate, dacă se dorește.

Exemplu folosind selectoare copil CSS

Selectoare pentru copii

Paragraful 1.

Paragraful 2.

Rezultat în browser

Paragraful 1.

Paragraful 2.

În acest exemplu, trebuie să fiți atenți la două puncte. Există trei elemente aici, dar doar două dintre ele au margini, căptușeală și margini. De ce? Și al doilea punct. Doar primul paragraf are o culoare albastră a textului.

Internet Explorer 6.0 nu înțelege selectoarele pentru copii, așa că, dacă vă construiți site-ul cu acest vechi browser în minte, țineți cont de acest lucru.

Selectoare pentru copii în tabele HTML

Mulți începători (și uneori nu mai sunt începători) în crearea site-urilor se confruntă cu anumite probleme atunci când utilizează selectoare pentru copii în tabele HTML. Ca să înțelegi ce în cauză, să aruncăm o privire la un tabel atât de comun.

Celula 1.1	Celula 1.2
Celula 2.1	Celula 2.2

Și acum o întrebare. Ce faceți dacă trebuie să navigați de la o etichetă la celule folosind selectoare copil? Dacă decideți să scrieți așa, atunci este greșit:

tabel> tr> td ( Valoarea proprietății; Valoarea proprietății; ...)

Poți ghici de ce este greșit? Nu? Faptul este că ați uitat încă un element - care, chiar dacă nu este specificat în mod explicit, este încă prezent invizibil în fiecare tabel HTML. Pur și simplu nu are etichetele de deschidere și închidere necesare, așa că este adesea trecut cu vederea. Apropo, da, în Tutorial HTML nu l-am parcurs cu dvs., deoarece în realitate indicația sa explicită este rareori necesară. Ei bine, cred că ai ghicit deja ce va fi intrare corectă, dar vă voi arăta la fel.

tabel> tbody> tr> td ( Valoarea proprietății; Valoarea proprietății; ...)

Apropo, nu numai tabelele au elemente cu etichete de deschidere opționale, există și astfel de elemente. Doar că în practică „problemele uitării” apar cel mai adesea cu mesele, de aceea v-am atras atenția asupra acestui lucru.

Teme pentru acasă.

Instalați fontul Arial 0.9em și câteva fundaluri pe pagină.
Scrieți câteva titluri și paragrafe pe pagină, modificați dimensiunea și culoarea textului antetelor după cum considerați potrivit.
Faceți linkurile direct în paragrafele paginii albastre, fără a sublinia. Dar, în același timp, dacă legăturile sunt încadrate suplimentar cu orice etichetă, de exemplu pentru cursiv, atunci acestea ar trebui să fie afișate cu subliniere și roșu. Încă o dată, vă atrag atenția asupra faptului că nu este nevoie să scrieți stiluri de legături cu fiecare etichetă de încadrare separat, faceți-o universal. Cum? Gandeste-te la asta.
Creați un mic meniu în partea dreaptă a paginii și remediați-o, pentru aceasta aveți nevoie de o proprietate și de câteva alte proprietăți conexe, veți da seama acolo. În același timp, lăsați meniul să rămână nu numai în loc în fereastra browserului, dar, de asemenea, să nu acceseze cu crawlere peste conținutul paginii atunci când derulați.

Cred că ultimul punct al lecției va fi cel mai dificil pentru dvs., dar nu încercați să vă scufundați complet în stăpânirea poziționării imediat. Doar fă-ți temele. Apropo, acest articol nu va funcționa în Internet Explorer 6.0, deoarece bătrânul nu înțelege poziționarea fixă.