DOM tehnike: roditelj, dijete i braća i sestre. CSS - Selektori odnosa

24.06.2019 Windows 8

Kompleksne i teške web aplikacije danas su uobičajene. Knjižnice koje su jednostavne za korištenje u različitim preglednicima kao što je jQuery, sa svojom bogatom funkcionalnošću, mogu uvelike pomoći u manipuliranju DOM-om u hodu. Stoga ne čudi da mnogi programeri češće koriste takve biblioteke nego što rade s izvornim DOM API-jem, s kojim je bilo mnogo problema. I dok su razlike u pregledniku još uvijek problem, DOM je sada u boljem stanju nego što je bio prije 5-6 godina kada je jQuery postajao sve popularniji.

U ovom članku demonstrirat ću DOM-ove mogućnosti manipulacije HTML-om, s naglaskom na roditeljski, dječji i bratski odnos. Zaključno, dat ću podatke o podršci za ove značajke u preglednicima, ali imajte na umu da je knjižnica poput jQueryja još uvijek dobra opcija zbog bugova i nedosljednosti u implementaciji izvorne funkcionalnosti.

Brojanje podređenih čvorova

Za demonstraciju, upotrijebit ću sljedeću HTML oznaku, a mi ćemo je mijenjati nekoliko puta tijekom ovog članka:

Primjer jedan
Primjer dva
Primjer treći
Primjer četvrti
Primjer peti
Primjer šesti

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

Kao što vidite, rezultati su isti, iako su tehnike različite. U prvom slučaju koristim vlasništvo djece. Ovo svojstvo je samo za čitanje i vraća zbirku HTML elemenata koji se nalaze unutar traženog elementa; da prebrojim njihov broj, koristim svojstvo duljine ove kolekcije.

U drugom primjeru koristim metodu childElementCount, koja mi se čini urednijim i potencijalno lakšim za održavanje (o tome ćemo detaljnije raspravljati kasnije, mislim da nećete imati problema s razumijevanjem što to radi).

Mogao bih pokušati koristiti childNodes.length (umjesto children.length), ali pogledajte rezultat:

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

Vraća 13 jer je childNodes zbirka svih čvorova, uključujući i razmake - razmislite o tome ako vam je stalo do razlike između čvorova djece i čvorova podređenih elemenata.

Provjera postojanja podređenih čvorova

Da provjerim ima li element podređene čvorove, mogu koristiti metodu hasChildNodes (). Metoda vraća booleovu vrijednost koja označava njihovu prisutnost ili odsutnost:

Var myList = document.getElementById ("myList"); console.log (myList.hasChildNodes ()); // istina

Znam da na mom popisu postoje podređeni čvorovi, ali mogu promijeniti HTML tako da ih nema; sada oznaka izgleda ovako:

A ovdje je rezultat novog pokretanja hasChildNodes ():

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

Metoda i dalje vraća true. Iako popis ne sadrži elemente, sadrži razmak, koji je valjana vrsta čvora. Ova metoda uzima u obzir sve čvorove, a ne samo čvorove elemenata. Da hasChildNodes () vrati false, moramo ponovno promijeniti oznaku:

I sada se očekivani izlaz ispisuje na konzolu:

Console.log (myList.hasChildNodes ()); // lažno

Naravno, ako znam da bih mogao naići na razmak, tada prvo provjeravam postojanje podređenih čvorova, a zatim pomoću svojstva nodeType utvrđujem postoje li među njima čvorovi elementa.

Dodavanje i uklanjanje djece

Postoje tehnike koje se mogu koristiti za dodavanje i uklanjanje elemenata iz DOM-a. Najpoznatija od njih temelji se na kombinaciji metoda createElement () i appendChild ().

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

U ovom slučaju stvaram

koristeći metodu createElement () i zatim ga dodajući tijelu. Vrlo jednostavno i vjerojatno ste već koristili ovu tehniku.

Ali umjesto umetanja posebno izrađenog elementa, također mogu koristiti appendChild () i samo premjestiti postojeći element. Pretpostavimo da imamo sljedeću oznaku:

Primjer jedan
Primjer dva
Primjer treći
Primjer četvrti
Primjer peti
Primjer šesti

Primjer teksta

Mogu promijeniti lokaciju popisa sa sljedećim kodom:

Var myList = document.getElementById ("myList"), kontejner = document.getElementById ("c"); kontejner.appendChild (moja lista);

Rezultirajući DOM će izgledati ovako:

Primjer teksta

Primjer jedan
Primjer dva
Primjer treći
Primjer četvrti
Primjer peti
Primjer šesti

Imajte na umu da je cijeli popis uklonjen sa svog mjesta (iznad odlomka), a zatim umetnut nakon njega, prije završnog tijela. Iako se metoda appendChild () obično koristi za dodavanje elemenata kreiranih pomoću createElement (), također se može koristiti za premještanje postojećih elemenata.

Također mogu potpuno ukloniti dijete iz DOM-a pomoću removeChild (). Evo kako je naš popis uklonjen iz prethodnog primjera:

Var myList = document.getElementById ("myList"), kontejner = document.getElementById ("c"); kontejner.removeChild (moja lista);

Stavka je sada uklonjena. Metoda removeChild () vraća uklonjeni element i mogu ga spremiti u slučaju da mi zatreba kasnije.

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

Dakle, postoji metoda ChildNode.remove (), koja je relativno nedavno dodana u specifikaciju:

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

Ova metoda ne vraća udaljeni objekt i ne radi u IE (samo Edge). I obje metode uklanjaju tekstualne čvorove na isti način kao i čvorove elemenata.

Zamjena djece

Mogu zamijeniti postojeće dijete novim, bez obzira postoji li taj novi element ili sam ga stvorio ispočetka. Evo oznake:

Primjer teksta

Var myPar = document.getElementById ("par"), myDiv = document.createElement ("div"); myDiv.className = "primjer"; myDiv.appendChild (document.createTextNode ("Tekst novog elementa")); document.body.replaceChild (myDiv, myPar);

Tekst novog elementa

Kao što možete vidjeti, metoda replaceChild () uzima dva argumenta: novi element i stari element koji zamjenjuje.

Također mogu koristiti ovu metodu za premještanje postojeće stavke. Pogledajte sljedeći HTML:

Primjer teksta 1

Primjer teksta 2

Primjer teksta 3

Mogu zamijeniti treći odlomak prvim paragrafom sa sljedećim kodom:

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

Sada generirani DOM izgleda ovako:

Primjer teksta 2

Primjer teksta 1

Dohvaćanje određene djece

Postoji nekoliko različitih načina odabira određene stavke. Kao što je ranije prikazano, mogu započeti korištenjem djece kolekcije ili svojstva childNodes. Ali pogledajmo druge opcije:

Svojstva firstElementChild i lastElementChild rade točno ono što im ime sugerira: odabiru prvi i posljednji podređeni element. Vratimo se na naše oznake:

Primjer jedan
Primjer dva
Primjer treći
Primjer četvrti
Primjer peti
Primjer šesti

Mogu odabrati prvu i posljednju stavku pomoću ovih svojstava:

Var myList = document.getElementById ("myList"); console.log (myList.firstElementChild.innerHTML); // "Primjer jedan" console.log (myList.lastElementChild.innerHTML); // "Primjer šest"

Također mogu koristiti svojstva previousElementSibling i nextElementSibling ako želim odabrati podređene elemente osim prvog ili posljednjeg. To se postiže kombiniranjem svojstava firstElementChild i lastElementChild:

Var myList = document.getElementById ("myList"); console.log (myList.firstElementChild.nextElementSibling.innerHTML); // "Primjer dva" console.log (myList.lastElementChild.previousElementSibling.innerHTML); // "Primjer peti"

Postoje i slična svojstva firstChild, lastChild, previousSibling i nextSibling, ali uzimaju u obzir sve vrste čvorova, a ne samo elemente. U pravilu su svojstva koja uzimaju u obzir samo čvorove elemenata korisnija od onih koja odabiru sve čvorove.

Umetanje sadržaja u DOM

Već sam pogledao načine za umetanje elemenata u DOM. Prijeđimo na srodnu temu i pogledajmo nove mogućnosti umetanja sadržaja.

Prvo, postoji jednostavna metoda insertBefore (), koja je vrlo slična replaceChild (), prihvaća dva argumenta i istovremeno radi i s novim elementima i s postojećim. Evo oznake:

Primjer jedan
Primjer dva
Primjer treći
Primjer četvrti
Primjer peti
Primjer šesti

Primjer paragrafa

Obratite pažnju na odlomak, prvo ću ga ukloniti, a zatim ga umetnuti ispred popisa, sve u jednom potezu:

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

U rezultirajućem HTML-u, odlomak će biti ispred popisa i ovo je još jedan način za premotavanje elementa.

Primjer paragrafa

Primjer jedan
Primjer dva
Primjer treći
Primjer četvrti
Primjer peti
Primjer šesti

Kao i replaceChild (), insertBefore () uzima dva argumenta: element za dodavanje i element ispred kojeg ga želimo umetnuti.

Ova metoda je jednostavna. Sada isprobajmo moćniji način umetanja: metodu insertAdjacentHTML ().

U ovoj lekciji naučit ćemo o selektorima odnosa koji se koriste za odabir elemenata na temelju njihovog odnosa s drugim elementima na web stranici.

Vrste odnosa između elemenata

Svaki element na web stranici može se povezati s drugim elementom pomoću jednog od sljedećih odnosa:

roditeljski element, izravni predak - element koji sadrži jedan ili više ugniježđenih elemenata. U odnosu na ove ugniježđene elemente, to je njihov roditelj;
podređeni element, izravni potomak, dijete, dijete - element koji je ugniježđen u roditeljski element i u odnosu na njega je podređeni element, t.j. njegovo dijete;
susjedni element, brat ili sestra (brat ili sestra) - elementi koji imaju jednog zajedničkog roditelja. Takvi elementi u međusobnom odnosu su braća i sestre (susjedi).

Razmotrimo sljedeći primjer:

Ovaj kod se može predstaviti kao sljedeći dijagram:

U gornjem primjeru, odaberimo element p i vidimo kako se on odnosi na druge elemente u kodu:

Roditeljski element je div;
Susjedni element je h1;
Izravni potomci, djeca - jaki, em elementi.

Element1 Element2

U ovom selektoru, stavka 1 i stavka 2 povezani su odnosom predak-dijete. Oni. koristi se za odabir elemenata2 koji se nalaze unutar elementa1 u HTML dokumentu. Drugim riječima, odabire sve stavke2 koje su potomke stavke1.

Na primjer, odaberite i stilizirajte svaki p element koji je potomak elementa div:

Div p (boja: crvena;)

Tekst 1

Tekst 2

Tekst 4

tekst 5

Stavka1> Stavka2

U ovom selektoru, element1 i element2 povezani su odnosom roditelj> dijete. Oni. koristi se za odabir stavki2 koje su podređene stavku1. Drugim riječima, odabire sve stavke2 koje imaju stavku1 kao neposredni roditelj.

Na primjer, odaberite i stilizirajte svaki p element čiji je roditelj div:

Div> p (boja: crvena;)

Tekst 1

Tekst 2

tekst 5

Stavka1 + Stavka2

Selektor Element1 + Element2 dizajniran je za odabir elemenata2 koji se nalaze odmah nakon elementa1, a međusobno su susjedi. Drugim riječima, ovaj selektor se koristi za odabir elementa2 koji je odmah iza elementa1 i mora imati isti roditelj u HTML dokumentu.

Na primjer, odaberite i stilizirajte svaki p element koji se nalazi odmah iza elementa div. Štoviše, trebate odabrati samo one p elemente koji su na istoj razini ugniježđenja kao i elementi div, t.j. oni moraju biti susjedi jedni drugima:

Div + p (boja: crvena;)

Tekst 1

Tekst 2

Tekst 3

Element1 ~ Element2

Selektor Element1 ~ Element2 dizajniran je za odabir elemenata2 koji se nalaze nakon elementa1, a međusobno su susjedi. Drugim riječima, ovaj selektor se koristi za odabir elemenata2 koji su nakon elementa1 i moraju imati isti roditelj u HTML dokumentu.

Na primjer, odaberite i stilizirajte svaki p element koji se nalazi iza elementa div. Štoviše, trebate odabrati samo one p elemente koji su na istoj razini ugniježđenja kao i elementi div, t.j. oni moraju biti susjedi jedni drugima:

Div ~ p (boja: crvena;)

Tekst 1

Tekst 2

Tekst 3-1

Pozdrav dragi čitatelji. U prethodnim člancima proučavali smo uglavnom atribute CSS stilova. Ima ih puno. Jedan postavlja parametre fontova, drugi parametre pozadine, treći parametre uvlaka i okvira.

U ovom članku ćemo govoriti o biračima stilova. Već smo se dotakli u jednom od članaka. Danas pogledajmo još nekoliko vrsta selektora koji implicitno vežu pravilo stila za element na web stranici. To su takozvani specijalni selektori. Ima ih nekoliko vrsta.

Kombinatori u CSS-u (selektori susjeda, djeteta i konteksta)

Kombinatori Je vrsta css selektora koji vežu pravilo stila na element web stranice na temelju njegove lokacije u odnosu na druge elemente.

Prvi kombinatorski lik plus(+) ili susjedni selektor... Plus se postavlja između dva birača:

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

Stil se u ovom slučaju primjenjuje na selektor 2, ali samo ako je u susjedstvu selektor 1 i ide odmah za njim. Razmotrimo primjer:

jak + i (

}
...

Ovo je običan tekst. Ovo je podebljan tekst, običan tekst, crveni tekst

Ovo je običan tekst. Ovo je podebljan tekst, običan tekst, a ovo je običan tekst.

Proizlaziti:

Stil opisan u primjeru bit će primijenjen samo na prvi tekst u oznaci od slijedi odmah nakon oznake .

Kombinator tilda(~) također se odnosi na susjedne birače, ali ovaj put između njih mogu biti i drugi elementi. U ovom slučaju, oba selektora moraju biti ugniježđena u istoj roditeljskoj oznaci:

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

Stil će se primijeniti na selektor 2 koji bi trebao slijediti selektor 1... Razmotrimo primjer:

jak ~ i (
boja: crvena; / * Crvena boja teksta * /
}
...

Ovo je običan tekst. Ovo je podebljan tekst, običan tekst, crveni tekst na njega je primijenjeno pravilo susjednih selektora.

Ovo je običan tekst. Ovo je podebljan tekst, običan tekst, a ovo je crveni tekst.

Proizlaziti:

Kao što možete vidjeti, ovaj put je pravilo stila funkcioniralo za oba teksta zatvorena u oznaci , unatoč činjenici da je u drugom slučaju između oznake i postoji oznaka .

Kombinator > odnosi se na selektori djece... Omogućuje vam povezivanje CSS stila s elementom web stranice koji je izravno ugniježđen unutar drugog elementa:

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

Stil bit će vezan za selektor 2 koji je izravno ugniježđen selektor 1.

div> jak (

}
...

Ovo je običan tekst. Ovo je podebljani kurziv tekst.

Ovo je običan tekst. A ovo je običan podebljani tekst.

A rezultat je:

Kao što možete vidjeti na slici, pravilo stila utjecalo je samo na prvu oznaku. koji je izravno ugniježđen unutar oznake
... I neposredni roditelj druge oznake je oznaka
, pa za njega pravilo ne vrijedi.

Razmotrite sljedeće selektor konteksta<пробел> ... Omogućuje vam da povežete CSS stil s elementom ugniježđenim unutar drugog elementa, a može biti na bilo kojoj razini ugniježđenja:

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

Stil će se primijeniti na selektor 2 ako je nekako ugniježđen selektor 1.

Razmotrimo prethodni primjer, samo kada opisujemo CSS pravilo, koristit ćemo selektor konteksta:

div jak (
stil fonta: kurziv / * Kurziv * /
}
...

Ovo je običan tekst. Ovo je podebljani kurziv tekst.

Ovo je običan tekst. I ovo je također podebljan kurziv tekst.

Običan tekst i samo podebljani tekst

Proizlaziti:

Kao što vidite, ovaj put je pravilo utjecalo na obje oznake. , čak i onaj koji je ugniježđen u spremnik
i u paragrafu
... Po oznaci koji je upravo ugniježđen unutar paragrafa
css pravilo nema nikakvog učinka.

Selektori atributa oznake

Selektori atributa su posebni selektori koji vežu stil na element na temelju toga da li je određeni atribut prisutan ili ima određeno značenje. Postoji nekoliko namjena za takve selektore.

1. Jednostavan selektor atributa

Izgleda kao:

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

I veže stil za one elemente unutar kojih je dodan navedeni atribut. Na primjer:

jaka (
boja: crvena;
}
...

Automobil to je mehanički motor bez traga cestovno vozilo s najmanje 4 kotača.

Proizlaziti:

Na slici možete vidjeti da je css pravilo (crvena boja teksta) primijenjeno na element jaka kojem se dodaje atribut titula.

2. Selektor atributa s vrijednošću

Sintaksa za ovaj selektor je sljedeća:

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

Veže stil na elemente čije oznake imaju atribut s navedenim u ime i vrijednost... Primjer:

a (
boja: crvena;
veličina fonta: 150%;
}
...
.ru "target =" _ blank "> Veza u novom prozoru

Proizlaziti:

Kao što možete vidjeti, oba elementa tipa hiperveze imaju atribut cilj ali css pravilo koje čini tekst veze jedan i pol puta većim i mijenja njegovu boju u crvenu primjenjuje se na oznaku čiji atribut cilj ima značenje "_Prazan".

3. Jedna od nekoliko vrijednosti atributa

Neke vrijednosti atributa mogu se odvojiti razmacima, kao što su nazivi klasa. Sljedeći selektor koristi se za određivanje pravila stila kada popis vrijednosti atributa sadrži potrebnu vrijednost:

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

Stil se primjenjuje kada atribut ima potrebnu vrijednost ili je uključen u popis vrijednosti odvojenih razmacima. Na primjer:

{
boja: crvena;
veličina fonta: 150%;
}
...

Naš telefon: 777-77-77

Naša adresa: Moskva ul. Sovjetski 5

Dobivate sljedeći rezultat:

Pravilo se primjenjuje na element koji ima među vrijednostima atributa razreda postoji vrijednost tel.

4. Crtica u vrijednosti atributa

Dopušteno je koristiti crticu u vrijednostima identifikatora i klasa. Da biste stil povezali s elementima čije vrijednosti atributa mogu sadržavati crticu, možete koristiti sljedeću konstrukciju:

[atribut | = "vrijednost"] (stil)
Selektor [atribut | = "vrijednost"] (stil)

Stil se primjenjuje na one elemente čija vrijednost atributa počinje navedenom vrijednošću, nakon čega slijedi crtica. Na primjer:

{
boja: crvena;
veličina fonta: 150%;
}
...

Stavak 1

Točka 2

Točka 3

Točka 4

Proizlaziti:

U primjeru, pravilo stila se primjenjuje samo na one stavke popisa čije ime klase počinje vrijednošću "Izbornik-".

5. Vrijednost atributa počinje određenim tekstom

Ovaj selektor postavlja stil za element ako vrijednost atributa oznake počinje određenom vrijednošću. Postoje dvije opcije:

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

U prvom slučaju stil primjenjuje se na sve elemente čije oznake imaju atribut s navedenim u ime i vrijednost koja počinje s navedenim podnizovi... U drugom slučaju, ista stvar, samo za određene elemente navedene u glavni selektor... Primjer:

a (
boja: zelena;
font-weight: bold;
}
...

Proizlaziti:

Primjer pokazuje kako drugačije prikazati vanjske i interne veze. Vanjske veze uvijek počinju nizom "http: //". Stoga u selektoru označavamo da se stil treba primijeniti samo na veze čiji atribut href počinje od vrijednosti http: //.

6. Vrijednost atributa završava određenim tekstom

Veže stil na elemente čija vrijednost atributa završava navedenim tekstom. Ima sljedeću sintaksu:

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

U prvom slučaju stil odnosi se na sve elemente koji imaju atribut sa navedenim u ime i ima vrijednost koja završava na navedeno podniz... U drugom slučaju, ista stvar, samo na naznačeno selektori... Na taj način, na primjer, različiti formati grafičkog prikaza mogu se prikazati na različite načine. Na primjer:

IMG (
obrub: 5px puna crvena;
}
...

GIF slika

Slika u PNG formatu

Proizlaziti:

U primjeru, sve slike s ekstenzijom gif bit će prikazane s crvenim obrubom od pet piksela.

7. Vrijednost atributa sadrži navedeni niz

Ovaj selektor veže stil na oznake čija vrijednost atributa sadrži određeni tekst. Sintaksa:

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

Stil veže se za elemente koji imaju atribut s navedenim imenom i njegova vrijednost sadrži specificirano podniz... Na primjer:

IMG (
obrub: 5px puna crvena;
}
...

Slika iz mape galerije

Slika iz druge mape

Proizlaziti:

U primjeru, stil se primjenjuje na slike koje se učitavaju iz mape "Galerija".

To je sve o selektorima atributa. Sve gore navedene metode mogu se međusobno kombinirati:

Selektor [attribute1 = "value1"] [attribute2 = "value2"] (stil)

Također, dopustite mi da vas podsjetim na posebne CSS selektore:

pomoću simbola "+" i "~" se formiraju;

simbol ">" veže css stilove na podružnica oznake;

simbol<пробел>generira kontekstualne selektore.

U budućim člancima također ćemo se osvrnuti na pseudoelemente i pseudoklase, koji pružaju moćan alat za upravljanje stilovima.

To je sve, dok se opet ne sretnemo.

Pozdrav dragi čitatelji! Nastavljamo temu CSS selektora i danas ću pokušati na pristupačan način objasniti što je susjedni CSS selektori a također i kakvu ulogu čini univerzalni selektor... Poznavanje mehanizma korištenja svih vrsta CSS alata omogućit će vam postizanje optimalnog i kompaktnog sadržaja dokumenta, koji opisuje stilove elemenata, što je jedna od komponenti uspješne promocije vašeg resursa, pa ni u kojem slučaju ne bi trebalo zanemarujete priliku da dobijete korisne informacije o konceptu selektora i njegovim raznim vrstama.

Ako se sjećate i pomno pratite publikacije, mnoge vrste selektora su već razmatrane,; ; ... Još jednom vas pozivam da ne zanemarite učenje osnova CSS-a, jer će vam to dati mnogo preferencija u budućnosti.

Univerzalni selektor

Idemo sada izravno na bit današnje publikacije. Što se tiče univerzalnog selektora, on je prilično jednostavan, pa se neću dugo zadržavati na njemu. Sintaksa za pisanje CSS pravila koje koristi univerzalni selektor je sljedeća:

Ovdje operator "*" znači da imamo univerzalni selektor. Koristi se kada je potrebno uspostaviti jedinstven stil za sve elemente na web stranici. Ponekad ne trebate specificirati univerzalni selektor. Na primjer, oznaka * Class i .class su u ovim slučajevima potpuno isti. Sada je primjer obavezan. Obično je najčešće definiranje ujednačenog fonta, veličine i boje te lokacije običnog teksta na blogu ili web stranici.
* (familija fontova: Tahoma, Arial, Helvetica, sans-serif; / * Font teksta * / boja: # 646464; / * Boja teksta * / veličina fonta: 75%; / * Veličina teksta * / poravnanje teksta: lijevo; / * Izgled teksta * /)
Na taj način možete odrediti izgled teksta za sve elemente koji se nalaze na stranici. Imajte na umu da će u ovom slučaju rezultat biti isti ako umjesto univerzalnog selektora koristite naziv oznake tijela, koja uključuje oznake svih elemenata.

Susjedni CSS selektori

E, sad se posvetimo malo više susjedskim selektorima. Elementi web-stranice su susjedni kada su u kodu dokumenta izravno jedni uz druge. U ovom slučaju, sintaksa CSS stilova izgleda ovako:

Sada uzmimo odlomak teksta definiranog oznakom p, koji će uključivati b, i i velike oznake kao podređene, koji određuju oblikovanje teksta, podebljano, kurziv i naglašavanje povećanjem fonta:

Ovaj paragraf koristi oznaka b, oznaka i, velika oznaka.

A pomoću alata za uređivanje CSS-a i HTML-a, koji je ugrađen u najnovije verzije svih popularnih preglednika (,) i koji je analogan poznatom dodatku za Firefox (), umetnut ćemo ovaj odlomak bilo gdje na apsolutno bilo kojoj web stranici (ja učinio je to točno na stranici prethodnog članka do prvog stavka). Ovaj alat, na primjer, u Chromeu se poziva jednostavnim pritiskom tipke F12. Može se koristiti za vježbanje tutoriala o osnovama HTML-a i CSS Tutorialu. Dakle, ubacujem dio teksta kao prvi pasus:

Ovaj će odlomak biti eksperimentalni i, koristeći njegov primjer, razmotrit ćemo aplikaciju susjedni selektori... Kao što sam rekao, oznake b, i i big su potomci oznake p paragrafa budući da su svi izravno unutar p spremnika. Ovdje su susjedne oznake b i i, kao i i i big. Sada primijenimo CSS pravilo za susjedne selektore:
B + i (boja: crvena;) i + velika (boja: zelena;)
Nakon primjene ovih stilova, odlomak će izgledati ovako:

To vrijedi za sve oznake na web stranici koje uključuju b, i i big elemente. Štoviše, b i i, i i big moraju biti smješteni pored njega, za druge kombinacije ovo CSS pravilo neće raditi. Mislim da vam je sada jasno kako se susjedni selektori primjenjuju prilikom pisanja ili uređivanja CSS dokumenta. Još jedna vrlo važna napomena: ako ste već primijetili, u slučaju susjednih elemenata, navedeni stil se primjenjuje samo na drugi element.

Primjer odlomka, koji se smatrao vrlo opisnim i omogućuje vam brzo razumijevanje suštine susjednih selektora u CSS-u. Međutim, u praksi se obično koriste druga područja primjene susjednih selektora. Na primjer, vrlo često je potrebno uključiti dio teksta u tijelo članka, posebno dio teksta kao što su fusnote, bilješke itd.

U te svrhe uobičajeno je stvoriti zasebnu klasu i primijeniti je na željeni odlomak. Ali puno optimalniji način je korištenje susjednih selektora. Na primjer, na mom blogu postoje stilovi stvoreni za stiliziranje običnog h3 naslova.
H3 (veličina fonta: 1,7em; / * Veličina fonta * / poravnanje teksta: središte; / * Položaj teksta * / težina fonta: normalan; / * Normalan stil teksta * / obitelj fontova: Tahoma, Arial, Helvetica, sans-serif; / * Stil fonta * / boja: # 646464; / * Boja teksta * /)
Da bismo istaknuli naslov bilješke ili fusnote, definirajmo posebnu klasu, recimo, stavimo:
H3.put (boja: crvena; / * Boja teksta * / margina-lijevo: 5px; / * Lijeva margina * / margin-top: 0,5em; / * Gornja margina * / padding: 10px; / * margina teksta * / tekst -poravnati: lijevo; / * Položaj teksta * /)
Sada, upotrijebimo susjedne birače za kreiranje prilagođenog stila odlomka fusnote, ovaj će odlomak biti smješten neposredno ispod naslova sa stilom "h3.put":
H3.put + p (pozadina: # ffefd5; / * Boja pozadine * / margin-left: 15px; / * Lijevi pad * / margin-right: 120px; / * Desni padding * / margin-top: 0,5em; / * Gornji padding * / padding: 5px; / * Margine oko teksta * /)
Opet, pomoću alata za uređivanje Google Chrome, koji sam vam zujao na sve uši (ali isplati se), unesite naslov za fusnotu, ne zaboravljajući staviti klasu put za to:

Pažnja!

Zatim pišemo tekst same fusnote:

Materijal predstavljen u ovoj publikaciji vrlo je važan u smislu učenja osnova CSS-a (Cascading Style Sheets)
.
Nakon svih ovih gesti, na web stranici dobivamo sljedeći odlomak fusnote (podsjećam vas da sam ovaj odlomak umetnuo na kraj svog prethodnog članka o selektorima djece i konteksta):

Sada, na blogu ili web stranici, kada je klasa "put" vezana na bilo koju h3 oznaku, takva će se fusnota pojaviti na web stranici. Štoviše, samo će prvi paragraf nakon oznake h3 s "class =" put "" biti ukrašen na poseban način. Ali upravo smo to htjeli, zar ne?

Time da završim današnji priručnik u kojem je dat algoritam za korištenje susjednih, ali i univerzalnih selektora. Nadam se da će vas ovaj članak potaknuti, dragi čitatelji, da se pretplatite

U prošlim poglavljima pogledali smo odnose između oznaka u HTML dokumentu, uključujući pregled podređenih selektora. Sada je vrijeme da se upoznate sa selektorima braće i sestara.

Susjedni birači

Susjedni selektori (koji se nazivaju i susjedni) odabiru elemente na web stranici koji imaju zajedničkog roditelja i koji su jedan uz drugoga. Stil se primjenjuje na zadnji element naveden u selektoru.

Primjer: recimo da trebate svaki odlomak
Što je prvo nakon naslova
, imao je kurziv font. To se može postići pomoću CSS koda poput ovoga:
H1 + p (stil fonta: kurziv;)
Prilikom pisanja ovog pravila, prije svega, potrebno je navesti ime prvog susjeda, zatim dodati simbol + i naziv drugog susjeda (onog na koji želimo primijeniti stil). Mogu se stvarati i duže kombinacije. Shema za pisanje selektora je sljedeća: selektor1 + selektor2 +… + selektorN () (stil se primjenjuje na selektorN).

Primjeri pisanja:
/ * Uvlaka od odlomka do slike 30px * / p + img (padding-top: 30px;) / * Zelena za odlomak koji slijedi nakon h3 u kombinaciji s h2 * / h2 + h3 + p (boja: zelena;)
Povezani selektori

Selektori siblinga (drugi nazivi: sibling, sibling) omogućuju vam da odaberete elemente HTML stranice koji su međusobno povezani (odnosno, imaju zajedničkog roditelja i na istoj su razini). Selektori su slični susjednim selektorima, ali se razlikuju po tome što se stil primjenjuje na sve elemente odabrane vrste, a ne samo na prvi. Umjesto znaka + koristi se simbol tilde ~.

Primjer: izmijenimo malo prethodni zadatak i zamislimo da trebate napraviti kurziv font za sve odlomke
To dolazi nakon naslova
... CSS kod će izgledati ovako:
H1 ~ p (stil fonta: kurziv;)
... i malo HTML-a za primjer:

Naslov 1

Naslov 2

Pogledajte HTML: stil će se primijeniti na sve oznake
Koje slijede nakon označiti
i jesu prije završna oznaka roditelja
... U našoj verziji postoje 3 elementa
Na koje će se primijeniti stil. Imajte na umu da oznaka
neće se ni na koji način miješati. Također primijetite da je u ovom slučaju stil neće primijenjen na tu oznaku
Koji se nalazi iznad
a također i na oznaku
Imati drugog roditelja
.

zaključke

Korištenjem susjednih (susjednih) selektora možete stilizirati element kada odmah slijedi drugi element (ili grupu elemenata). Ovo funkcionira s elementima koji su na istoj razini i imaju zajedničkog roditelja.

Pomoću povezanih selektora možete stilizirati sve elemente odabrane vrste kada odmah slijede drugi element (ili grupu elemenata). Ovo funkcionira s elementima koji su na istoj razini i imaju zajedničkog roditelja.

Vrhunski povezani članci

Različiti pokreti miša okomito i vodoravno

Kako komprimirati teksture u Fallout 4

Ostaje samo razumjeti potrebnu razinu