Tehnike manipulacije DOM-om: roditelj, dijete i susjedni elementi. CSS - Selektori odnosa

24.06.2019 Windows 8

Kompleksne i teške web aplikacije postale su uobičajene ovih dana. Biblioteke za više pretraživača i jednostavne za korištenje poput jQueryja sa svojom širokom funkcionalnošću mogu uvelike pomoći u DOM manipulaciji u hodu. Stoga nije iznenađujuće da mnogi programeri češće koriste takve biblioteke nego što rade sa izvornim DOM API-jem, što je imalo dosta problema. I dok su razlike u pretraživačima i dalje problem, DOM je sada u boljem stanju nego što je bio prije 5-6 godina kada je jQuery postajao sve popularniji.

U ovom članku ću pokazati sposobnost DOM-a da manipulira HTML-om, fokusirajući se na roditeljske, dječje i susjedne odnose. Završiću sa pregledom podrške pretraživača za ove karakteristike, ali imajte na umu da je biblioteka tipa jQuery i dalje dobra opcija zbog grešaka i nedoslednosti u implementaciji izvorne funkcionalnosti.

Brojanje podređenih čvorova

Koristit ću sljedeće HTML oznake za demonstraciju, a mi ćemo ga mijenjati nekoliko puta u članku:

Primjer jedan
primjer dva
primjer tri
primjer četiri
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 se koriste različite tehnike. U prvom slučaju koristim svojstvo djece. Ovo je svojstvo samo za čitanje i vraća kolekciju HTML elemenata sadržanih u traženom elementu; da prebrojim njihov broj, koristim svojstvo dužine ove kolekcije.

U drugom primjeru, koristim metodu childElementCount, za koju smatram da je uredniji i potencijalno lakši način za održavanje (više o tome kasnije, mislim da nećete imati problema da shvatite šta 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 kolekcija svih čvorova uključujući razmake - imajte to na umu ako vam je stalo do razlike između čvorova djece i čvorova podređenih elemenata.

Provjera postojanja podređenih čvorova

Da provjerim da li element ima podređene čvorove, mogu koristiti metodu hasChildNodes(). Metoda vraća boolean koji označava njihovo prisustvo ili odsustvo:

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

Znam da moja lista ima podređene čvorove, ali mogu promijeniti HTML tako da ih nema; sada oznaka izgleda ovako:

A evo i rezultata ponovnog pokretanja hasChildNodes():

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

Metoda i dalje vraća true. Iako lista ne sadrži elemente, ona sadrži razmak, koji je važeći tip čvora. Ova metoda razmatra sve čvorove, a ne samo čvorove elemenata. Da bi hasChildNodes() vratio false, moramo ponovo promijeniti oznaku:

I sada se očekivani rezultat prikazuje u konzoli:

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

Naravno, ako znam da bih mogao naići na razmak, prvo provjerim postojanje podređenih čvorova, a zatim koristim svojstvo nodeType da utvrdim da li među njima ima čvorova elemenata.

Dodavanje i uklanjanje podređenih elemenata

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

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

U ovom slučaju ja stvaram

koristeći metodu createElement() i zatim ga dodajući u tijelo. Vrlo jednostavno i vjerovatno ste već koristili ovu tehniku.

Ali umjesto umetanja posebno izrađenog elementa, mogu koristiti i appendChild() i jednostavno premjestiti postojeći element. Pretpostavimo da imamo sljedeće oznake:

Primjer jedan
primjer dva
primjer tri
primjer četiri
primjer peti
Primjer šesti

primjer teksta

Mogu promijeniti lokaciju liste sa sljedećim kodom:

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

Konačni DOM će izgledati ovako:

primjer teksta

Primjer jedan
primjer dva
primjer tri
primjer četiri
primjer peti
Primjer šesti

Imajte na umu da je cijela lista uklonjena sa svog mjesta (iznad pasusa), a zatim umetnuta nakon nje, prije završnog tijela. Dok se metoda appendChild() obično koristi za dodavanje elemenata kreiranih pomoću createElement() , može se koristiti i za premještanje postojećih elemenata.

Također mogu potpuno ukloniti podređeni element iz DOM-a pomoću removeChild() . Evo kako je naša lista uklonjena iz prethodnog primjera:

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

Element je sada uklonjen. Metoda removeChild() vraća uklonjeni element i mogu ga pohraniti u slučaju da mi zatreba kasnije.

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

Postoji i ChildNode.remove() metoda, 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 podređenih elemenata

Mogu zamijeniti postojeći podređeni element novim, bez obzira da li taj novi element postoji ili sam ga napravio od nule. 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ćeg elementa. Pogledajte sljedeći HTML:

primjer teksta 1

primjer teksta 2

primjer teksta 3

Mogu zamijeniti treći paragraf 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

Odabir specifičnih podređenih elemenata

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

Svojstva firstElementChild i lastElementChild rade upravo ono što biste očekivali od njihovog imena: odaberite prvi i posljednji podređeni element. Vratimo se na naše oznake:

Primjer jedan
primjer dva
primjer tri
primjer četiri
primjer peti
Primjer šesti

Mogu odabrati prvi i posljednji element sa ovim svojstvima:

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. Ovo se radi kombinovanjem svojstava firstElementChild i lastElementChild:

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

Postoje i slična svojstva firstChild, lastChild, previousSibling i nextSibling, ali uzimaju u obzir sve tipove čvorova, a ne samo elemente. Općenito, svojstva koja razmatraju samo čvorove elemenata korisnija su od onih koja odabiru sve čvorove.

Umetanje sadržaja u DOM

Već sam pogledao načine za umetanje elemenata u DOM. Prijeđimo na sličnu temu i pogledajmo nove funkcije za umetanje sadržaja.

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

Primjer jedan
primjer dva
primjer tri
primjer četiri
primjer peti
Primjer šesti

Primjer paragrafa

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

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

U rezultirajućem HTML-u, pasus će doći ispred liste, a ovo je još jedan način za premotavanje elementa.

Primjer paragrafa

Primjer jedan
primjer dva
primjer tri
primjer četiri
primjer peti
Primjer šesti

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

Ova metoda je jednostavna. Pokušajmo sada sa moćnijim načinom umetanja: metodom insertAdjacentHTML().

U ovoj lekciji ćemo naučiti o selektorima odnosa koji se koriste za odabir elemenata na osnovu toga kako su povezani s drugim elementima na web stranici.

Vrste odnosa između elemenata

Svaki element na web stranici može biti povezan s drugim elementom koristeći jedan od sljedećih odnosa:

roditeljski element, direktni 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, direktni potomak, dijete, dijete - element koji je ugniježđen u roditeljski element i u odnosu na njega je podređeni element, tj. 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 (komšije).

Razmotrite sljedeći primjer:

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

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

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

Element1 Element2

U ovom selektoru, element1 i element2 su povezani odnosom predak-dijete. One. koristi se za odabir elemenata2 koji se nalaze unutar elementa1 u HTML dokumentu. Drugim riječima, odabire sve elemente2 koji su potomci elementa1.

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

Element1 > Element2

U ovom selektoru, element1 i element2 su povezani odnosom roditelj > dijete. One. koristi se za odabir elemenata2 koji su potomci elementa1. Drugim riječima, odabire sve elemente2 koji imaju element1 kao njihov neposredni roditelj.

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

Div > p (boja:crvena; )

Tekst 1

Tekst 2

tekst 5

Element1 + Element2

Selektor Element1 + Element2 je dizajniran da izabere elemente2 koji se nalaze odmah iza elementa1 i koji su jedan uz drugi. Drugim riječima, ovaj selektor se koristi za odabir elementa2 koji je odmah iza elementa1 i mora imati istog roditelja u HTML dokumentu.

Na primjer, odaberite i stilizirajte svaki p element odmah nakon elementa div. Štaviše, trebate odabrati samo one p elemente koji su na istom nivou ugniježđenja kao i div elementi, tj. oni moraju biti susjedi jedni drugima:

Div + p ( boja:crvena; )

Tekst 1

Tekst 2

Tekst 3

Stavka1 ~ Stavka2

Selektor Element1 ~ Element2 je dizajniran da izabere elemente2 koji se nalaze iza elementa1 i koji su susjedi jedan prema drugom. 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 dolazi nakon elementa div. Štaviše, trebate odabrati samo one p elemente koji su na istom nivou ugniježđenja kao i div elementi, tj. oni moraju biti susjedi jedni drugima:

Div ~ p ( boja:crvena; )

Tekst 1

Tekst 2

Tekst 3-1

Pozdrav dragi čitaoci. U prethodnim člancima proučavali smo uglavnom atribute CSS stila. Ima ih puno. Neki postavljaju opcije fonta, druge opcije pozadine, a treće uvlake i opcije okvira.

U ovom članku ćemo govoriti o selektorima stilova. U jednom od članaka smo se već dotakli. A danas, pogledajmo još nekoliko tipova selektora koji implicitno vezuju pravilo stila za element web stranice. To su takozvani specijalni selektori. Ima ih nekoliko vrsta.

CSS kombinatori (selektori susjeda, djece i konteksta)

kombinatori je tip css selektora koji veže pravilo stila za element web stranice na osnovu njegove lokacije u odnosu na druge elemente.

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

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

Stil u ovom slučaju se primjenjuje na selektor 2, ali samo ako je u blizini 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.

rezultat:

Stil opisan u primjeru bit će primijenjen samo na prvi tekst u okviru oznake. , jer dolazi odmah nakon oznake .

kombinator tilda(~) se također odnosi na susjedne selektore, ali ovaj put mogu biti i drugi elementi između. U ovom slučaju, oba selektora moraju biti ugniježđena u istu roditeljsku oznaku:

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

Stil će se primijeniti na selektor 2, koji bi trebao uslijediti 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, ovo je crveni tekst.

rezultat:

Kao što vidite, ovaj put je pravilo stila radilo za oba teksta u okviru oznake , uprkos činjenici da je u drugom slučaju između oznake i vrijedan oznake .

kombinator > odnosi se na selektori djece. Omogućava vam da priložite CSS stil elementu web stranice direktno ugniježđen unutar drugog elementa:

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

Stilće biti vezan za selektor 2, koji je direktno ugniježđen u selektor 1.

div > jak(

}
...

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

Ovo je običan tekst. Ovo je normalan podebljan tekst..

I rezultat:

Kao što možete vidjeti na slici, pravilo stila je utjecalo samo na prvu oznaku. , koji je direktno ugniježđen u tag
. I neposredni roditelj druge oznake je oznaka
, tako da se pravilo ne primjenjuje na njega.

Sledeće razmatranje selektor konteksta<пробел> . Omogućava vam da vežete CSS stil za element ugniježđen u drugi element, a može postojati bilo koji nivo ugniježđenja:

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

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

Razmotrite prethodni primjer, samo kada opisujete CSS pravilo, selektor konteksta je primjenjiv:

div jak(
font-style: italic /* Kurziv */
}
...

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

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

običan tekst i samo podebljani tekst

rezultat:

Kao što vidite, ovaj put je pravilo utjecalo na obje oznake. , čak i na onom koji je ugniježđen u kontejneru
i u paragrafu
. Po oznaci , koji je upravo ugniježđen unutar pasusa
css pravilo ne radi.

Selektori atributa oznake

Selektori atributa su posebni selektori koji vezuju stil za element na osnovu toga da li ima određeni atribut ili ima određenu vrijednost. Postoji nekoliko načina za korištenje ovih selektora.

1. Jednostavan selektor atributa

Izgleda kao:

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

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

jaka (
boja:crvena;
}
...

Automobile to je mehanički motor bez traga drumsko vozilo sa najmanje 4 točka.

rezultat:

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

2. Selektor atributa sa vrijednošću

Sintaksa za ovaj selektor je:

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

vezuje stil na elemente čije oznake imaju atribut sa navedenim ime i vrijednost. primjer:

a(
boja:crvena;
font-size:150%;
}
...
.ru" target="_blank">Link u novom prozoru

rezultat:

Kao što vidite, oba elementa tipa hiperveze imaju atribut cilj, ali css pravilo koje povećava tekst veze za 1,5 puta i mijenja njegovu boju u crvenu se primjenjuje na oznaku čiji atribut cilj ima značenje "_blank".

3. Jedna od nekoliko vrijednosti atributa

Neke vrijednosti atributa mogu biti navedene s razmacima, kao što su imena klasa. Sljedeći selektor se koristi za određivanje pravila stila kada lista vrijednosti atributa sadrži željenu vrijednost:

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

Stil se primjenjuje ako atribut ima traženu vrijednost ili ako se nalazi na listi vrijednosti razdvojenih razmacima. Na primjer:

{
boja:crvena;
font-size:150%;
}
...

Naš telefon: 777-77-77

Naša adresa: Moskva st. Sovjetski 5

Dobijte sljedeći rezultat:

Pravilo se primjenjuje na element, gdje je među vrijednostima atributa klasa postoji značenje tel.

4. Crtica u vrijednosti atributa

Dozvoljeno je korištenje crtice u vrijednostima identifikatora i klasa. Da biste stil povezali sa elementima čije vrijednosti atributa mogu sadržavati crticu, možete koristiti sljedeću konstrukciju:

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

Stil se primjenjuje na one elemente čija vrijednost atributa počinje navedenom vrijednošću praćenom crticom. Na primjer:

{
boja:crvena;
font-size:150%;
}
...

Stav 1

Tačka 2

Tačka 3

Stavka 4

rezultat:

U primjeru, pravilo stila se primjenjuje samo na one elemente liste čije ime klase počinje vrijednošću "meni".

5. Vrijednost atributa počinje određenim tekstom

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

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

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

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

rezultat:

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 primjenjuje samo na veze koje imaju atribut href počinje sa vrednošću http://.

6. Vrijednost atributa završava se određenim tekstom

Veže stil za 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 ime i ima vrijednost koja se završava sa navedenim podniz. U drugom slučaju, ista stvar, samo do navedenog selektori. Na ovaj način, na primjer, moguće je različito prikazati različite formate grafičkih slika. Na primjer:

img(
granica: 5px puna crvena;
}
...

gif slika

slika u png formatu

rezultat:

U primjeru, sve slike s ekstenzijom gif će biti prikazane s crvenim okvirom debljine pet piksela.

7. Vrijednost atributa sadrži navedeni niz

Ovaj selektor vezuje stil za oznake čija vrijednost atributa sadrži navedeni tekst. sintaksa:

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

Stil vezuje se za elemente koji imaju atribut sa navedenim imenom i njegova vrijednost sadrži navedeno podniz. Na primjer:

img(
granica: 5px puna crvena;
}
...

Slika iz foldera galerije

Slika iz drugog foldera

rezultat:

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"] (style)

Uz to, da vas podsjetim na posebne CSS selektore:

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

simbol ">" povezuje css stilove za dijete oznake;

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

U sljedećim člancima ćemo također pogledati pseudoelemente i pseudoklase, koje pružaju moćan alat za upravljanje stilovima.

To je sve, dok se ponovo ne sretnemo.

Pozdrav dragi čitaoci! Nastavljamo temu CSS selektora i danas ću pokušati na pristupačan način objasniti šta je susjedni CSS selektori, i kakvu ulogu ima univerzalni selektor. Poznavanje mehanizma za korištenje svih vrsta CSS alata omogućit će vam da postignete optimalan i kompaktan sadržaj dokumenta, koji opisuje stilove elemenata, što je jedna od komponenti uspješne promocije vašeg resursa, tako da ni u kom slučaju ne zanemarite mogućnost da dobijete korisne informacije o konceptu selektora i njegovim različitim vrstama.

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

Univerzalni selektor

A sada da pređemo direktno na poentu današnjeg posta. Što se tiče univerzalnog selektora, on je prilično jednostavan, tako da se na njemu neću dugo zadržavati. 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 postaviti jedan stil za sve elemente na web stranici. Ponekad je univerzalni selektor opcioni. Na primjer, notacija .*class i .class su potpuno iste u ovim slučajevima. Sada za primjer. Obično je najčešće definiranje jednog fonta, veličine i boje te pozicije običnog teksta na blogu ili web stranici.
* ( porodica fontova: Tahoma, Arial, Helvetica, sans-serif; /* Font teksta */ boja: #646464; /* Boja teksta */ veličina fonta: 75%; /* Veličina teksta */ poravnanje teksta : lijevo; /* Pozicija teksta */ )
Tako možete definirati dizajn teksta za sve elemente koji se nalaze na stranici. Napominjem da će u ovom slučaju rezultat biti sličan ako umjesto univerzalnog selektora koristimo naziv oznake tijela, koja uključuje oznake svih elemenata.

Susedni CSS selektori

E, sad da se posvetimo još malo komšijskim selektorima. Susjedi su elementi web stranice kada su direktno jedan pored drugog u kodu dokumenta. Sintaksa CSS stila izgleda ovako:

Sada uzmimo pasus teksta, definiran oznakom p, koji će uključivati b, i i velike oznake kao podređene, definirajući oblikovanje teksta, odnosno podebljavanje, kurziv i isticanje povećanjem fonta:

Ovaj paragraf koristi b tag, i tag, big tag.

A uz pomoć alata za uređivanje CSS-a i HTML-a, koji je ugrađen u najnovije verzije svih popularnih pretraživača ( , ) i koji je analog poznatog dodatka za Firefox pretraživač (), umetnut ćemo ovaj pasus bilo gdje na apsolutno bilo koju web stranicu (učinio sam to tačno na stranici prethodnog članka u prvom pasusu). Ovaj alat, na primjer, u Chromeu se poziva jednostavnim pritiskom na tipku F12. Može se koristiti za uvježbavanje materijala u HTML osnovama i CSS tutorijalima. Dakle, ubacujem dio teksta u obliku prvog pasusa:

Ovaj paragraf će 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 jer su svi direktno unutar p kontejnera. Ovdje su oznake b i i susjedne, kao i i i big. Sada primijenite CSS pravilo za susjedne selektore:
B+i (boja: crvena;) i+big (boja: zelena;)
Nakon što se ovi stilovi primjene, pasus će izgledati ovako:

Ovo vrijedi za sve oznake web stranice koje sadrže b, i i velike elemente. Štaviše, b i i, i i big moraju biti u blizini, za druge kombinacije ovo CSS pravilo neće raditi. Mislim da je sada jasno kako se susjedni selektori primjenjuju prilikom pisanja ili uređivanja CSS dokumenta. Još jedna vrlo važna napomena: ako ste primijetili, onda se u slučaju susjednih elemenata navedeni stil primjenjuje samo na drugi element.

Primjer sa paragrafom o kojem se raspravljalo je vrlo deskriptivan i omogućava vam da brzo shvatite suštinu susjednih selektora u CSS-u. Međutim, u praksi se obično koriste druga područja primjene susjednih selektora. Recimo, vrlo često je u tijelo članka potrebno uključiti neki dio teksta, posebno dizajniran, kao što su: fusnote, bilješke itd.

U ove svrhe, uobičajeno je kreirati zasebnu klasu i primijeniti je na željeni paragraf. Ali mnogo bolji način je korištenje susjednih selektora. Na primjer, na mom blogu postoje stilovi kreirani za stiliziranje običnog h3 naslova.
H3 (veličina fonta: 1,7em; /* Veličina fonta */ poravnanje teksta: centar; /* Postavljanje teksta */ težina fonta: normalna; /* Normalna težina teksta */ porodica fontova: Tahoma, Arial, Helvetica, sans-serif; /* Stil fonta */ boja: #646464; /* Boja teksta */ )
Da bismo istakli naslov bilješke ili fusnote, definiramo posebnu klasu, recimo, stavimo:
H3.put ( boja: crvena; /* Boja teksta */ margin-left: 5px; /* Lijevi padding */ margin-top: 0,5em; /* gornji padding */ padding: 10px; /* padding oko teksta */ text-align: lijevo; /* Položaj teksta */ )
Sada koristimo susjedne selektore da kreiramo poseban stil pasusa fusnote, ovaj pasus će biti postavljen direktno ispod naslova sa stilom "h3.put":
H3.put+p (pozadina: #ffefd5; /* Boja pozadine */ margin-left: 15px; /* Lijevi padding */ margin-right: 120px; /* Desni padding */ margin-top: 0,5em; /* Gornji padding */ padding: 5px; /* Margina oko teksta */ )
Ponovo koristeći Google Chrome alat za uređivanje, kojim sam vam zujao u ušima (ali isplati se), unosimo naslov za fusnotu, ne zaboravljajući da za to upišemo klasu put:

Pažnja!

Zatim pišemo tekst same fusnote:

Materijali predstavljeni u ovoj publikaciji su veoma važni u smislu učenja osnova CSS-a (Cascading Style Sheets)
.
Nakon svih ovih pokreta, na web stranici dobijamo sljedeći paragraf fusnote (zapamtite da sam ovaj paragraf ubacio na kraj svog prethodnog članka o selektorima djece i konteksta):

Sada na blogu ili web stranici, kada se klasa “put” poveže sa bilo kojom oznakom h3, takva fusnota će se pojaviti na web stranici. Štaviše, samo prvi pasus iza oznake h3 sa “class=“put”” biće dizajniran na poseban način. Ali to je upravo ono što smo željeli, zar ne?

Na ovome da završim današnji priručnik, u kojem je dat algoritam za primjenu susjednih, kao i univerzalnih selektora. Nadam se da će vas ovaj članak potaknuti, dragi čitatelji, da se pretplatite na

U prethodnim potpoglavljima istražili smo odnos između oznaka u HTML dokumentu, uključujući podređene selektore. Sada je vrijeme da se upoznate sa selektorima braće i sestara i selektorima susjeda.

Susedni selektori

Selektori susjeda (također poznati kao susjedni selektori) odabiru elemente web stranice koji imaju zajedničkog roditelja i nalaze se jedan pored drugog. Stil se primjenjuje na posljednji element naveden u selektoru.

primjer: Recimo da želite svaki pasus
Što je prvo nakon naslova
, ima kurziv font. Ovo se može uraditi sa ovim CSS kodom:
H1+p (stil fonta: kurziv; )
Kada pišemo ovo pravilo, prvo trebamo navesti ime prvog susjeda, zatim dodati simbol + i ime drugog susjeda (onog na koji želimo primijeniti stil). Možete kreirati i duže kombinacije. Šema za pisanje selektora je: selektor1+selektor2+…+selektorN () (stil se primjenjuje na selektorN).

Primjeri pisanja:
/* Uvlačenje od pasusa do slike 30px */ p+img ( padding-top: 30px; ) /* Zelena boja za pasus koji slijedi nakon h3 u vezi sa h2 */ h2+h3+p ( boja: zelena; )
Povezani selektori

Selektori siblinga (drugi nazivi: sestra, sibling) vam omogućavaju da odaberete elemente HTML stranice koji su međusobno povezani (odnosno, imaju zajedničkog roditelja i nalaze se na istom nivou). Selektori siblinga slični su selektorima siblinga, ali se razlikuju po tome što se stil primjenjuje na sve elemente odabranog tipa, a ne samo na prvi. Tilda ~ se koristi umjesto znaka +.

primjer: hajde da malo promijenimo prethodni zadatak i zamislimo da trebate napraviti kurziv za sve pasuse
koje dolaze iza naslova
. CSS kod će izgledati ovako:
H1 ~ p ( stil fonta: kurziv; )
…i neki HTML na primjer:

Naslov 1

Naslov 2

Pogledajte HTML kod: stil će se primijeniti na sve oznake
Koji slijede poslije tag
i su prije roditeljska završna oznaka
. U našoj verziji postoje 3 elementa
Na koje će se stil primijeniti. Imajte na umu da oznaka
neće se mešati uopšte. Imajte na umu da u ovom slučaju stil neću primijenjen na tu oznaku
Koji se nalazi iznad
, kao i na oznaku
Imati drugog roditelja
.

nalazi

Korištenjem susjednih (susjednih) selektora, možete stilizirati element kada odmah slijedi drugi element (ili grupu elemenata). Ovo radi sa elementima koji su na istom nivou i imaju zajedničkog roditelja.

Sa bratskim selektorima, možete primijeniti stil na sve elemente odabranog tipa kada odmah slijede drugi element (ili grupu elemenata). Ovo radi sa elementima koji su na istom nivou i imaju zajedničkog roditelja.

Top Related Articles

Kako vratiti izgubljeni ili ukradeni pametni telefon Kako pronaći ukradeni izgubljeni telefon

Koliko košta paket sa Aliexpressom?

Ko je prvi izumeo sijalicu sa žarnom niti