Bună ziua, dragi cititori! Continuând subiectul selectoarelor CSS, vreau să vă aduc în atenție descrierea selectoarelor de copil și de context, precum și analiza lor comparativă, întrucât după logica de aplicare sunt foarte asemănătoare, deși au unele diferențe.

În publicațiile mele m-am oprit în detaliu diverse tipuri Selectoare CSS: ; precum și . Apropo, în ultimul articol, unde am discutat diferite tipuri selector de atribute, am descris în detaliu modul în care calculele mele teoretice pot fi verificate imediat prin modificarea codului HTML și CSS online folosind instrumentul încorporat Google Chrome(). Astfel de instrumente de editare au cele mai recente modificări ale tuturor browserelor populare, inclusiv pluginul Firebug pentru Firefox ().

De asemenea, puteți studia materialul teoretic din această postare editând orice pagină a oricărui site! Pentru a face acest lucru, trebuie doar să apăsați F12 dacă utilizați Google Chrome sau Mozilla Firefox(). Acum voi prezenta conținutul etichetei p, pe care o vom studia ca exemplu selectoare CSS copil și contextuale:

Acest paragraf include em și etichete puternice de formatare care evidențiază textul îndrăzneţŞi cursive.

Folosind instrumentul de editare descris mai sus, am inserat acest paragraf direct în acest articol, introducând textul corespunzător în partea stângă a ferestrei de editare, drept urmare textul acestui paragraf a apărut chiar în partea de sus a paginii:

Acest construct HTML, . Acest paragraf va fi un subiect de testare în publicația de astăzi, folosind exemplul său, voi arăta cum se modifică designul textului său, în funcție de ce selectoare - copil sau contextuale - sunt utilizate în regula CSS;

Un element copil este un element care se află direct în interiorul său părinte.. Înainte de a trece direct la subiect, voi oferi o imagine care reflectă ierarhia etichetelor în document HTML folosind exemplul paragrafului al cărui text este dat mai sus și pe care îl vom analiza astăzi:

Acest design se mai numește și arbore de elemente. Această figură arată clar imbricarea containerelor, ceea ce sugerează relații ierarhice între etichete. Eticheta de paragraf p este un copil al . În același timp, eticheta puternică nu este un copil al div-ului, deoarece se află în containerul p.

Selector CSS copil

Un selector copil dintr-un arbore de elemente este întotdeauna situat direct în interiorul elementului părinte, în acest caz sintaxa pentru scrierea unui selector CSS ar fi următoarea:

Stilul va fi aplicat Selectorului 2, dar numai dacă este un copil al Selectorului 1. Să-l privim mai detaliat folosind captura de ecran de mai sus a arborelui de elemente. De exemplu, urmând sintaxa, puteți seta o regulă ca aceasta:

P> em (culoare: verde;)

Această regulă va afecta ultimul cuvânt al paragrafului care urmează să fie „cursiv”, deoarece acesta este ceea ce este inclus între etichetele em de deschidere și de închidere. Eticheta em este un copil al lui p deoarece este plasată direct în interiorul acesteia, astfel încât textul conținutului, și anume cuvântul „italic”, va fi colorat în verde.

Cu toate acestea, cealaltă etichetă em nu este un descendent direct al etichetei p, deoarece face parte din eticheta puternică, drept urmare partea „em și etichete de formatare puternice” a paragrafului nu va fi colorată.

Selector CSS contextual

E timpul să-ți dai seama ce este un selector contextual CSS. Când așezați o anumită pagină pe un site web, etichetele sunt adesea imbricate una în alta. Pentru ca stilurile pentru astfel de elemente să funcționeze corect, se folosesc selectoare care acționează într-un anumit context, de unde și numele.

Dacă pentru a putea fi aplicată o regulă CSS, selectorul copil trebuie să fie situat direct în interiorul elementului părinte (primul nivel de imbricare), atunci pentru selectorul de context acest lucru este complet neimportant și se poate aplica orice nivel de imbricare, proprietățile elementul va fi transferat în continuare de la părinte. Sintaxa este aceasta:

După cum puteți vedea, un selector de context constă din selectoare simple separate printr-un spațiu. Pentru selectoarele contextuale, este permisă utilizarea a două sau mai multe etichete imbricate. Să creăm acum o regulă CSS pentru paragraful testat, pe care l-am citat mai sus:

P em (culoare: verde;)

După cum puteți vedea, nu numai textul unei părți din conținutul paragrafului, care este inclus direct în eticheta de formatare em, adică cuvântul „italicized”, este colorat în verde, ci și o secțiune a textului unei alte etichete em. , care face parte și din eticheta puternică. Acest lucru s-a întâmplat pentru că există o regulă cu un selector de context, pentru care nivelul de imbricare nu este important, spre deosebire de selectorul de copii. Aceasta este diferența fundamentală dintre un copil și un selector de context.

Să ne uităm la un alt exemplu al modului în care selectoarele contextuale și secundare interacționează cu paragraful nostru. Să scriem următoarele reguli CSS pentru copil și selector de context:

Div em (culoare: roșu;) p> em (culoare: verde;)

După aceasta, paragraful nostru are următorul design:

După cum puteți vedea, o bucată de text inclusă în etichete em și etichete puternice este colorată în roșu, deoarece regula selectorului de context este valabilă pentru aceasta, adică eticheta em este închisă în containere puternice și div, iar nivelul de imbricare, ca deja notat, nu contează.

Se pune întrebarea: de ce cuvântul „italicizat”, care este și conținutul lui em, este colorat în verde? La urma urmei, regula selectorului de context este relevantă și pentru el. Dar pentru această secțiune a textului paragrafului este valabilă și regula selectorului de copii, deoarece nu contrazice condiția ca pentru un selector de copii, elementul să fie inclus direct în eticheta p.

Cert este că în CSS există o lege de prioritate pentru proprietățile CSS situate mai jos. Adică, în acest caz, regula selectorului de copii este situată mai jos în document decât Stiluri CSS, scris pentru selectorul de context al containerului div. Prin urmare, cuvântul „italic” a devenit verde. Dacă le schimbați, atunci regula „p> em (culoare: verde;)” nu se mai aplică, iar secțiunea „italic” a textului va fi roșie.

Vlad Merjevici

Un element copil este un element care se află direct în interiorul unui element părinte. Pentru a înțelege mai bine relațiile dintre elementele documentului, să ne uităm la un mic cod (exemplul 12.1).

Exemplul 12.1. Imbricarea elementelor într-un document

HTML5 CSS 2.1 IE Cr Op Sa Fx

ÎN în acest exemplu Sunt folosite mai multe containere, care sunt amplasate unul în celălalt în cod. Acest lucru poate fi văzut mai clar în arborele elementelor, care este denumirea dată structurii relațiilor dintre etichetele documentelor (Fig. 12.1).

Orez. 12.1. Exemplu de arbore de elemente

În fig. Figura 12.1 prezintă imbricarea elementelor și ierarhia acestora într-o formă convenabilă.