Exemplul de mai jos nu va funcționa:

Paragraful și în el gras element și iată-l înclinat element.

Aici grasȘi accentuat elemente, mai mult înclinat.

Un exemplu mai real

Să aruncăm o privire mai atentă la modul în care funcționează selectorul vecin. exemplu real. În articole mari care conțin mai multe secțiuni marcate cu etichete

, este recomandabil să măriți marginea superioară (proprietatea margin-top). O indentare de 30 px va face textul lizibil. Dar dacă eticheta

vine imediat după

, iar aceasta ar putea fi la începutul articolului, liniuța de sus deasupra etichetei

va fi redundant. Această problemă poate fi rezolvată folosind un selector de elemente adiacente.

Iată codul html cu un exemplu despre cum funcționează selectorul de elemente adiacente.

Buna ziua!

Titlul h2

Titlul h2

Textul paragrafului este despre aventuri incredibile.

Titlul h2

Textul paragrafului este despre aventuri incredibile.

Titlul h2

Textul paragrafului este despre aventuri incredibile.

De asemenea, folosind instrumentul de selectare adiacent, este convenabil să ajustați indentarea dintre titlu și primul paragraf al secțiunii, în exemplul nostru acestea sunt etichete

Și

De asemenea, merită remarcat faptul că pentru a reduce indentarea este convenabil să folosiți valori negative.

Buna ziua!

Titlul h2

Textul paragrafului este despre aventuri incredibile.

Titlul h2

Textul paragrafului este despre aventuri incredibile.

Titlul h2

Textul paragrafului este despre aventuri incredibile.

Titlul h2

Textul paragrafului este despre aventuri incredibile.

Acum un exemplu despre cum să utilizați un selector adiacent pentru a selecta toate elementele listei, cu excepția primului.

• Elementul din listă #1.
• Lista articolului #2.
• Lista articolului #3.
• Elementul din listă #4.

Iată ce se va întâmpla ca urmare a acestui exemplu:

Figura 1. Lucrarea exemplului nr. 5.

Salutări, dragi cititori. În articolele anterioare, am studiat în principal atributele stilului CSS. Sunt o mulțime. Unii setează parametrii fontului, alții parametrii de fundal, iar alții parametrii pentru indentări și cadre.

În acest articol vom vorbi despre selectoare de stil. Într-unul dintre articolele de care am atins deja. Astăzi ne vom uita la mai multe tipuri de selectoare care nu leagă în mod explicit o regulă de stil la un element de pagină web. Acestea sunt așa-numitele selectoare speciali. Există mai multe tipuri de ele.

Combinatoare în CSS (selectori adiacent, copii și context)

Combinatoare- Acest tip de css selectoare care leagă o regulă de stil la un element de pagină web pe baza locației acestuia față de alte elemente.

Primul simbol combinator la care se adauga(+) sau selector adiacent. Plus este setat între două selectoare:

<селектор 1> + <селектор 2> { <стиль> }

Stilul în acest caz este aplicat la selector 2, dar numai dacă este adiacent selector 1și vine imediat după el. Să ne uităm la un exemplu:

puternic + i (

}
...

Acesta este un text normal. Acest miniatură, text simplu, text roșu

Acesta este un text normal. Acesta este text îngroșat, text simplu, și acesta este un text normal.

Rezultat:

Stilul descris în exemplu va fi aplicat numai primului text inclus în etichetă , deoarece vine imediat după etichetă .

Combinator tilde(~) se aplică și selectoarelor adiacente, dar de data aceasta pot exista și alte elemente între ele. În acest caz, ambii selectori trebuie să fie imbricați în aceeași etichetă părinte:

<селектор 1> ~ <селектор 2> { <стиль> }

Stilul va fi aplicat selector 2 care ar trebui să urmeze selector 1. Luați în considerare un exemplu:

puternic~i(
culoarea rosie; /* Culoarea textului roșu */
}
...

Acesta este un text normal. Acesta este text îngroșat, text simplu, text roșu i se aplica regula selectorului adiacent.

Acesta este un text normal. Acesta este text îngroșat, text simplu, și acesta este text roșu.

Rezultat:

După cum puteți vedea, de data aceasta regula de stil a funcționat pentru ambele texte incluse în etichetă , în ciuda faptului că în al doilea caz între etichetă Și merita eticheta .

Combinator > se refera la selectoare de copii. Vă permite să legați stilul CSS la un element de pagină web care este imbricat direct într-un alt element:

<селектор 1> > <селектор 2> { <стиль> }

Stil va fi legat de selector 2, care este direct imbricat în selector 1.

div > puternic (

}
...

Acesta este un text normal. Acesta este text cursiv aldine.

Acesta este un text normal. Și acesta este un text aldine obișnuit.

Iar rezultatul:

După cum puteți vedea în figură, regula de stil a afectat doar prima etichetă , care este imbricat direct în etichetă

. Și părintele imediat al celei de-a doua etichete este eticheta

, deci regula nu se aplică lui.

În continuare ne vom uita selector de context<пробел> . Vă permite să legați un stil CSS la un element imbricat într-un alt element și poate exista orice nivel de imbricare:

<селектор 1> <селектор 2> { <стиль> }

Stilul va fi aplicat selector 2, dacă este cumva imbricat în selector 1.

Să luăm în considerare exemplul anterior, numai dacă descriere CSS regulile aplică selectorul de context:

div puternic(
stil font: cursiv /* cursiv */
}
...

Acesta este un text normal. Acesta este text cursiv aldine.

Acesta este un text normal. Și acesta este, de asemenea, text îngroșat italic.

Text simplu și doar text aldine

Rezultat:

După cum puteți vedea, de data aceasta regula a afectat ambele etichete , chiar și cea care este imbricată în container

și într-un paragraf

. A eticheta , care este pur și simplu imbricat într-un paragraf

regula css nu merge deloc.

Selectoare după atributele etichetei

Selectorii de atribute sunt selectori speciali care leagă un stil de un element în funcție de faptul că acesta conține un anumit atribut sau are o anumită valoare. Există mai multe opțiuni pentru utilizarea unor astfel de selectoare.

1. Selector de atribute simplu

Se pare ca:

<селектор>[<имя атрибута тега>] { <стиль> }

Și leagă stilul de acele elemente în care este adăugat atributul specificat. De exemplu:

puternic(
culoarea rosie;
}
...

Auto acesta este un motor mecanic fără șenile vehicul">vehicul rutier cu cel putin 4 roti.

Rezultat:

În imagine puteți vedea că regula css (culoarea textului roșu) este aplicată elementului puternic, la care se adaugă atributul titlu.

2. Selector de atribute cu valoare

Sintaxa pentru acest selector este următoarea:

<селектор>[<имя атрибута тега>=<значение>] { <стиль> }

Leagă stil la elemente ale căror etichete au un atribut cu cel specificat NumeȘi sens. Exemplu:

A(
culoarea rosie;
dimensiunea fontului: 150%;
}
...
.ru" target="_blank">Link în fereastră nouă

Rezultat:

După cum puteți vedea, ambele elemente de tip hyperlink au atributul ţintă, dar regula css care mărește textul linkului de o dată și jumătate și își schimbă culoarea în roșu este aplicată etichetei al cărui atribut ţintă are sensul "_gol".

3. Una dintre mai multe valori de atribut

Unele valori ale atributelor pot fi separate prin spații, cum ar fi numele claselor. Pentru a seta o regulă de stil atunci când valoarea necesară este prezentă în lista de valori ale atributelor, utilizați următorul selector:

[<имя атрибута тега>~=<значение>] { <стиль> }
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }

Stilul este aplicat dacă atributul are valoarea necesară sau face parte dintr-o listă de valori separate prin spațiu. De exemplu:

{
culoarea rosie;
dimensiunea fontului: 150%;
}
...

Telefonul nostru: 777-77-77

Adresa noastră: St. Moscova Sovetskaya 5

Veți obține următorul rezultat:

Regula se aplică unui element ale cărui valori de atribut includ: clasă există un sens tel.

4. Cratima în valoarea atributului

Este permisă o cratimă în valorile de identificare și de clasă. Pentru a lega un stil de elemente ale căror valori de atribut pot conține o cratimă, puteți utiliza următoarea construcție:

[atribut|="valoare"] ( stil )
Selector[atribut|="valoare"] ( stil )

Stilul este aplicat acelor elemente a căror valoare de atribut începe cu valoarea specificată urmată de o cratimă. De exemplu:

{
culoarea rosie;
dimensiunea fontului: 150%;
}
...

• Paragraful 1


• Punctul 2


• Punctul 3


• Punctul 4

Rezultat:

În exemplu, regula de stil se aplică numai acelor elemente de listă al căror nume de clasă începe cu valoare "meniul- ".

5. Valoarea atributului începe cu un anumit text

Acest selector setează stilul pentru un element dacă valoarea atributului etichetei începe cu o anumită valoare. Pot exista două opțiuni:

[<имя атрибута тега>^=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }

In primul caz stil se aplică tuturor elementelor ale căror etichete au un atribut cu cel specificat Numeși o valoare care începe cu cea specificată subșiruri. În al doilea caz, același lucru, doar la anumite elemente specificate în selector principal. Exemplu:

A(
culoare:verde;
greutate font: bold;
}
...

Rezultat:

Exemplul arată cum să afișați diferit link-urile externe și link-urile interne. Legăturile externe încep întotdeauna cu șirul „http://”. Prin urmare, în selector indicăm că stilul va fi aplicat doar link-urilor care au atributul hrefîncepe cu sensul http://.

6. Valoarea atributului se termină cu un anumit text

Leagă un stil de elemente a căror valoare de atribut se termină cu textul specificat. Are următoarea sintaxă:

[<имя атрибута тега>$=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }

In primul caz stil se aplică tuturor elementelor care au atribut cu cele specificate Numeși are o semnificație care se termină cu cea specificată subșir. În al doilea caz, același lucru, doar la indicat selectoare. În acest fel, de exemplu, diferite formate de imagine grafică pot fi afișate diferit. De exemplu:

IMG (
chenar: 5px roșu continuu;
}
...

Imagine GIF

Format de imagine png

Rezultat:

În exemplu, toate imaginile cu extensie gif vor fi afișate cu un chenar roșu grosime de cinci pixeli.

7. Valoarea atributului conține șirul specificat

Acest selector leagă un stil de etichete a căror valoare de atribut conține text specific. Sintaxă:

[<имя атрибута тега>*=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }

Stil se leagă de elemente care au atribut cu numele specificat și valoarea acestuia conține cel specificat subșir. De exemplu:

IMG (
chenar: 5px roșu continuu;
}
...

Poza din folderul galeriei

Imagine dintr-un alt folder

Rezultat:

În exemplu, stilul este aplicat imaginilor care sunt încărcate din folder "Galerie".

Asta e totul despre selectorii de atribute. Toate metodele de mai sus pot fi combinate între ele:

Selector[attribute1="valoare1"][attribute2="valoare2"] ( stil )

În plus, permiteți-mi să vă reamintesc despre selectoarele CSS speciale:

• folosind simbolurile „+” și „~” se formează;
• simbolul „>” leagă stilurile CSS la filiale Etichete;
• simbol<пробел>generează selectori de context.

În articolele viitoare, ne vom uita și la pseudo-elemente și pseudo-clase, care oferă instrumente puternice de management al stilului.

Asta e tot, ne vedem din nou.

Aplicațiile web complexe și grele au devenit comune în zilele noastre. Bibliotecile multi-browser și ușor de utilizat, cum ar fi jQuery, cu funcționalitatea lor bogată, pot ajuta foarte mult la manipularea DOM-ului din mers. Prin urmare, nu este surprinzător faptul că mulți dezvoltatori folosesc astfel de biblioteci mai des decât lucrează cu API-ul DOM nativ, cu care au existat multe probleme. În timp ce diferențele dintre browser sunt încă o problemă, DOM-ul este acum într-o formă mai bună decât acum 5-6 ani, când jQuery câștiga popularitate.

În acest articol, voi demonstra capacitatea DOM de a manipula HTML, concentrându-mă pe relațiile părinte-copil. elemente învecinate. În concluzie, voi oferi informații despre suportul browserului pentru aceste funcții, dar rețineți că o bibliotecă precum jQuery este încă o opțiune bună datorită prezenței bug-urilor și inconsecvențelor în implementarea funcționalității native.

Numărarea nodurilor copil

Pentru demonstrație voi folosi următoarele Marcaj HTML, îl vom schimba de mai multe ori pe parcursul articolului:

• Exemplul unu
• Exemplul doi
• Exemplul trei
• Exemplul patru
• Exemplul cinci
• Exemplul șase

Var myList = document.getElementById("myList"); console.log(myList.children.length); // 6 console.log(myList.childElementCount); // 6

După cum puteți vedea, rezultatele sunt aceleași, deși tehnicile folosite sunt diferite. În primul caz folosesc proprietatea children. Aceasta este o proprietate numai pentru citire, returnează o colecție elemente HTML, situat în interiorul elementului solicitat; Pentru a număra numărul lor, folosesc proprietatea lungime a acestei colecții.

În cel de-al doilea exemplu, folosesc metoda childElementCount, care cred că este o modalitate mai ordonată și, potențial, mai ușor de întreținut (discutați acest lucru mai târziu, nu cred că veți avea probleme în a înțelege ce face).

Aș putea încerca să folosesc childNodes.length (în loc de children.length), dar uită-te la rezultat:

Var myList = document.getElementById("myList"); console.log(myList.childNodes.length); // 13

Returnează 13 deoarece childNodes este o colecție de toate nodurile, inclusiv spațiile - țineți cont de acest lucru dacă vă pasă de diferența dintre nodurile copil și nodurile element copil.

Verificarea existenței nodurilor copil

Pentru a verifica dacă un element are noduri copil, pot folosi metoda hasChildNodes(). Metoda returnează o valoare booleană care indică prezența sau absența acestora:

Var myList = document.getElementById("myList"); console.log(myList.hasChildNodes()); // Adevărat

Știu că lista mea are noduri copil, dar pot schimba HTML-ul astfel încât să nu existe; Markup-ul arată acum astfel:

Și iată rezultatul rulării hasChildNodes() din nou:

Console.log(myList.hasChildNodes()); // Adevărat

Metoda revine în continuare adevărată. Deși lista nu conține niciun element, conține un spațiu, care este un tip de nod valid. Aceasta metoda ia în considerare toate nodurile, nu doar nodurile element. Pentru ca hasChildNodes() să returneze false, trebuie să schimbăm din nou marcajul:

Și acum rezultatul așteptat este afișat în consolă:

Console.log(myList.hasChildNodes()); // fals

Desigur, dacă știu că s-ar putea întâlni spații albe, voi verifica mai întâi existența nodurilor copil, apoi voi folosi proprietatea nodeType pentru a determina dacă există noduri de element printre ele.

Adăugarea și eliminarea elementelor copii

Există tehnici pe care le puteți folosi pentru a adăuga și elimina elemente din DOM. Cel mai faimos dintre ele se bazează pe o combinație a metodelor createElement() și appendChild().

Var myEl = document.createElement("div"); document.body.appendChild(myEl);

În acest caz eu creez

folosind metoda createElement() și apoi adăugând-o la body . Este foarte simplu și probabil ați mai folosit această tehnică.

Dar în loc să insereze în mod specific element în curs de creare, pot folosi și appendChild() și doar muta elementul existent. Să presupunem că avem următorul marcaj:

• Exemplul unu
• Exemplul doi
• Exemplul trei
• Exemplul patru
• Exemplul cinci
• Exemplul șase

Exemplu de text

Pot schimba locația listei cu următorul cod:

Var myList = document.getElementById("myList"), container = document.getElementById("c"); container.appendChild(myList);

DOM-ul final va arăta astfel:

Exemplu de text

• Exemplul unu
• Exemplul doi
• Exemplul trei
• Exemplul patru
• Exemplul cinci
• Exemplul șase

Observați că întreaga listă a fost eliminată din locul ei (deasupra paragrafului) și apoi inserată după ea înainte de corpul de închidere. În timp ce metoda appendChild() este folosită de obicei pentru a adăuga elemente create cu createElement() , poate fi folosită și pentru a muta elementele existente.

De asemenea, pot elimina complet un element copil din DOM folosind removeChild() . Iată cum să ștergeți lista noastră din exemplul anterior:

Var myList = document.getElementById("myList"), container = document.getElementById("c"); container.removeChild(myList);

Elementul a fost acum eliminat. Metoda removeChild() returnează elementul eliminat, astfel încât să îl pot salva în cazul în care am nevoie de el mai târziu.

Var myOldChild = document.body.removeChild(myList); document.body.appendChild(myOldChild);

Există, de asemenea, o metodă ChildNode.remove() care a fost adăugată relativ recent la specificație:

Var myList = document.getElementById("myList"); myList.remove();

Această metodă nu returnează obiectul la distanță și nu funcționează în IE (numai Edge). Și ambele metode elimină nodurile de text în același mod ca nodurile de elemente.

Înlocuirea elementelor copil

Pot înlocui un element copil existent cu unul nou, indiferent dacă acesta există element nou sau am creat-o de la zero. Iată marcajul:

Exemplu de text

Var myPar = document.getElementById("par"), myDiv = document.createElement("div"); myDiv.className = "exemplu"; myDiv.appendChild(document.createTextNode(„Text element nou”); document.body.replaceChild(myDiv, myPar);

Text element nou

După cum puteți vedea, metoda replaceChild() are două argumente: elementul nou și elementul pe care îl înlocuiește. element vechi.

De asemenea, pot folosi această metodă pentru a muta un element existent. Aruncăm o privire la următorul HTML:

Exemplu de text 1

Exemplu de text 2

Exemplu de text 3

Pot înlocui al treilea paragraf cu primul paragraf folosind următorul cod:

Var myPar1 = document.getElementById("par1"), myPar3 = document.getElementById("par3"); document.body.replaceChild(myPar1, myPar3);

Acum, DOM-ul generat arată astfel:

Exemplu de text 2

Exemplu de text 1

Selectarea anumitor copii

Sunt câteva căi diferite selectarea unui anumit element. După cum am arătat mai devreme, pot începe prin a folosi colecția children sau proprietatea childNodes. Dar să ne uităm la alte opțiuni:

Proprietățile firstElementChild și lastElementChild fac exact ceea ce sugerează numele lor: selectează primul și ultimul element copil. Să revenim la marcajul nostru:

• Exemplul unu
• Exemplul doi
• Exemplul trei
• Exemplul patru
• Exemplul cinci
• Exemplul șase

Pot selecta primul și ultimul element folosind aceste proprietăți:

Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.innerHTML); // „Exemplu unu” console.log(myList.lastElementChild.innerHTML); // "Exemplu șase"

De asemenea, pot folosi proprietățile previousElementSibling și nextElementSibling dacă vreau să selectez alte elemente copil decât primul sau ultimul. Acest lucru se realizează prin combinarea proprietăților firstElementChild și lastElementChild:

Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.nextElementSibling.innerHTML); // „Exemplu doi” console.log(myList.lastElementChild.previousElementSibling.innerHTML); // "Exemplu cinci"

Există, de asemenea, proprietăți similare firstChild , lastChild , previousSibling și nextSibling , dar iau în considerare toate tipurile de noduri, nu doar elemente. În general, proprietățile care iau în considerare numai nodurile elementului sunt mai utile decât cele care selectează toate nodurile.

Inserarea conținutului în DOM

M-am uitat deja la modalități de a insera elemente în DOM. Să trecem la un subiect similar și să aruncăm o privire asupra noilor funcții pentru inserarea conținutului.

În primul rând, există o metodă simplă insertBefore(), la fel ca replaceChild(), care necesită două argumente și funcționează atât cu elemente noi, cât și cu cele existente. Iată marcajul:

• Exemplul unu
• Exemplul doi
• Exemplul trei
• Exemplul patru
• Exemplul cinci
• Exemplul șase

Exemplu de paragraf

Observați mai întâi paragraful pe care îl voi elimina și apoi inserați-l înaintea listei, totul dintr-o lovitură:

Var myList = document.getElementById("myList"), container = document.getElementBy("c"), myPar = document.getElementById("par"); container.insertBefore(myPar, myList);

În primit Paragraf HTML va fi înaintea listei și aceasta este o altă modalitate de a muta elementul.

Exemplu de paragraf

• Exemplul unu
• Exemplul doi
• Exemplul trei
• Exemplul patru
• Exemplul cinci
• Exemplul șase

La fel ca replaceChild(), insertBefore() ia două argumente: elementul care trebuie adăugat și elementul înaintea căruia dorim să-l inserăm.

Această metodă este simplă. Să încercăm mai multe acum mod puternic inserează: metoda insertAdjacentHTML().

În subcapitolele anterioare, am studiat relațiile dintre etichete dintr-un document HTML, inclusiv privind selectoarele de elemente copil. Acum este timpul să faceți cunoștință cu selectoarele de frați și selectoarele adiacente.

Selectoare adiacente

Selectoarele adiacente (numite și selectoare adiacente) selectează elementele paginii web care au un părinte comun și sunt adiacente unul altuia. Stilul este aplicat ultimului element specificat în selector.

Exemplu: Să presupunem că aveți nevoie de fiecare paragraf

Care vine primul după titlu

, avea un font italic. Acest lucru poate fi realizat folosind codul CSS astfel:

H1+p (stil font: cursiv; )

Când scrieți această regulă, trebuie mai întâi să specificați numele primului vecin, apoi să adăugați simbolul + și numele celui de-al doilea vecin (cel căruia vrem să aplicăm stilul). Puteți crea mai multe combinatii lungi. Schema de scriere a selectorului este următoarea: selector1+selector2+…+selectorN () (stilul este aplicat selectoruluiN).

Exemple de scriere:

/* Indentare de la paragraf la imagine 30px */ p+img ( padding-top: 30px; ) /* Culoarea verde pentru paragraful care urmează h3 împreună cu h2 */ h2+h3+p (culoare: verde; )

Selectori înrudite

Selectoarele înrudite (alte nume: soră, frate) vă permit să selectați elemente ale unei pagini HTML care sunt legate între ele (adică având un părinte comun și fiind la același nivel). Selectorele surori sunt similare cu selectoarele lor, dar diferă prin faptul că stilul este aplicat tuturor elementelor tipului selectat, nu doar primului. Caracterul tilde ~ este folosit în locul semnului +.

Exemplu: haideți să schimbăm puțin problema anterioară și să ne imaginăm că trebuie să faceți font italic pentru toate paragrafele

Care vin după titlu

. Codul CSS va arăta astfel:

H1 ~ p (stil font: cursiv; )

... și ceva HTML de exemplu:

Titlul 1

Titlul 2

Aruncă o privire la codul HTML: stilul va fi aplicat tuturor etichetelor

Care urmează după etichetă

si sunt inainte de eticheta de închidere a părintelui

. În versiunea noastră există 3 elemente

Căruia i se va aplica stilul. Vă rugăm să rețineți că eticheta

Acest lucru nu va strica în niciun fel. Rețineți, de asemenea, că în acest caz stilul nu voi aplicat etichetei respective

Care se află de mai sus

, precum și la etichetă

A avea alt părinte

.

concluzii

Folosind selectoare adiacente, puteți stila un element atunci când urmează imediat alt element (sau grup de elemente). Acest lucru funcționează cu elemente care sunt la același nivel și au un părinte comun.

Cu selectoare de frați, puteți aplica un stil tuturor elementelor de tipul selectat atunci când urmează imediat un alt element (sau grup de elemente). Acest lucru funcționează cu elemente care sunt la același nivel și au un părinte comun.

12 iulie 2011 la 13:14

Semantică pentru selectoare și combinatoare CSS

• CSS

• Traducere

Sintaxa CSS este simplă și nu aveți nevoie de un doctorat în IT pentru a o înțelege. Cu toate acestea, acesta este unul dintre puținele limbi populare, ceea ce nu este logic în adevăratul sens al cuvântului. Spre deosebire de alte limbaje de programare web, cum ar fi JavaScript și PHP, CSS nu rezolvă problemele folosind logica convențională. Algoritmi precum „dacă X, atunci fă Y, altfel fă Z” sau „selectează toate Y, atunci fă X cu ei” nu pot fi implementați într-un limbaj precum CSS. Mai simplu spus, este un limbaj creat pentru design, un limbaj pentru designeri, nu pentru dezvoltatori. Unii dintre programatorii experimentați cu care am lucrat au petrecut mult efort pentru a învăța să stăpânească CSS tocmai din acest motiv.

Învățarea CSS începe cu clase și ID-uri, precum și cu utilizarea. și # pentru a desemna direct elemente. Acest lucru este suficient pentru a construi un site web complet funcțional, dar nu este o soluție suficient de flexibilă în cazul unei modificări complete de design. Să aruncăm o privire la abordare alternativă pentru a gestiona astfel de elemente greu accesibile.

Combinator învecinat

Să începem cu selectorul, care este convenabil în situatii dificile, - de la un combinator înrudit vecin. Un combinator înrudit adiacent este indicat prin conectarea a două elemente folosind semnul +:

H1+p
Îl face să iasă în evidență următorul element p, situat imediat după elementul h1 din DOM. Teoria tipografică sugerează că ar trebui să folosim indentări în paragrafele de text, dar numai dacă acestea urmează altui paragraf. În practică, aceasta poate fi folosită pentru a indenta toate paragrafele, cu excepția primului:
p + p (text-indentare: 1em; )
Acest lucru este mult mai convenabil decât evidențierea primului paragraf folosind class="first". Trei linii, fără clase și suport complet pentru browser. Dacă plasați etichete img legate de conținutul site-ului în interiorul etichetelor p (așa cum, de fapt, ar trebui să faceți), puteți pur și simplu să mutați marginile lor din stânga înapoi folosind o valoare negativă de -1em:
p + p img ( margine-stânga: -1em; )
Destul de simplu, nu? Ce se întâmplă dacă dorim să selectăm primul rând din toate paragrafele care vin imediat după titluri, fără a schimba toate celelalte paragrafe? Din nou putem folosi clasa de vizualizare. Un selector simplu realizat din combinatorul compus adiacent și un pseudo element vor face treaba:
h1 + p::prima linie (varianta fontului: majuscule mici; )
Notă: Pseudo-element:prima linie a fost adoptat în CSS 2.1, dar CSS 3 folosește notația:: pentru a distinge între pseudo-clase și pseudo-elemente.

Combinator ereditar

Un protocol comun de marcare este plasarea secțiunilor într-un element numit în #page sau #wrap: