DOM tehnike: roditelj, dijete i susjedni elementi. Podređeni selektori Koji element je roditelj oznake title

Zdravo, dragi čitaoci! Nastavljajući temu CSS selektora, želim da vam skrenem pažnju opis selektora djece i konteksta, kao i njihovu komparativnu analizu, budući da su po logici primjene veoma slični, iako imaju neke razlike.

U svojim publikacijama sam se pobliže zadržavao razne vrste CSS selektori: ; kao i . Usput, u prošlom članku, gdje smo raspravljali različite vrste selektor atributa, detaljno sam opisao kako se moji teoretski proračuni mogu odmah provjeriti unošenjem izmjena u HTML i CSS kod na mreži koristeći ugrađeni alat Google Chrome(). Takvi alati za uređivanje imaju najnovije modifikacije svih popularnih pretraživača, uključujući dodatak Firebug za Firefox ().

Također možete proučavati teoretski materijal u ovom postu uređujući bilo koju stranicu bilo koje web stranice! Da biste to učinili, samo pritisnite F12 ako koristite Google Chrome ili Mozilla Firefox(). Sada ću vam predstaviti sadržaj oznake p, koristeći koju ćemo proučavati kao primjer podređeni i kontekstualni CSS selektori:

Ovaj stav uključuje em i jake oznake za formatiranje taj istaknuti tekst bold I kurziv.

Koristeći gore opisani alat za uređivanje, ubacio sam ovaj pasus direktno u ovaj članak, unoseći odgovarajući tekst na lijevoj strani prozora za uređivanje, zbog čega se tekst ovog pasusa pojavio na samom vrhu stranice:


Ova HTML konstrukcija, . Ovaj paragraf će biti predmet testiranja u današnjoj publikaciji, koristeći njegov primjer, pokazaću kako se dizajn njegovog teksta mijenja, ovisno o tome koji selektori - podređeni ili kontekstualni - se koriste u CSS pravilu;

Podređeni element je element koji se nalazi direktno unutar svog roditelja.. Prije nego što pređem direktno na temu, dat ću sliku koja odražava hijerarhiju oznaka HTML dokument koristeći primjer pasusa čiji je tekst dat gore i koji ćemo danas analizirati:

Ovaj dizajn se naziva i stablom elemenata. Ova slika jasno pokazuje ugniježđenje kontejnera, što sugerira hijerarhijske odnose između oznaka. Oznaka pasusa p je podređena oznaci . U isto vrijeme, jaka oznaka nije dijete div, budući da se nalazi u p kontejneru.

Child CSS selektor

Podređeni selektor u stablu elemenata se uvijek nalazi direktno unutar roditeljskog elementa, u ovom slučaju sintaksa za pisanje CSS selektora bi bila sljedeća:

Stil će biti primijenjen na selektor 2, ali samo ako je podređen selektoru 1. Pogledajmo ga detaljnije koristeći gornji snimak ekrana stabla elemenata. Na primjer, slijedeći sintaksu, možete postaviti pravilo ovako:

P> em (boja: zelena;)

Ovo pravilo će uticati na to da posljednja riječ pasusa bude "kurzivna", jer je to ono što je zatvoreno između otvaranja i zatvaranja em oznake. Oznaka em je dijete p jer se nalazi direktno unutar nje, tako da će tekst sadržaja, odnosno riječ “kurziv” biti obojen zelenom bojom.


Međutim, druga oznaka em nije direktan potomak p oznake, budući da je dio jake oznake, zbog čega dio pasusa “em i strong formatting tags” neće biti obojen.

Kontekstualni CSS selektor

Vrijeme je da to shvatimo šta je CSS kontekstualni selektor. Prilikom postavljanja određene stranice na web stranicu, oznake se često ugniježuju jedna u drugu. Da bi stilovi za takve elemente ispravno radili, koriste se selektori koji djeluju u nekom kontekstu, pa otuda i naziv.

Ako da bi se CSS pravilo primijenilo, selektor djece mora biti smješten direktno unutar roditeljskog elementa (prvi nivo ugniježđenja), onda je za selektor konteksta to potpuno nevažno i može se primijeniti bilo koji nivo ugniježđenja, svojstva elementa element će se i dalje prenositi s nadređenog. Sintaksa je ova:

Kao što vidite, selektor konteksta se sastoji od jednostavnih selektora odvojenih razmakom. Za kontekstualne selektore, dozvoljeno je koristiti dvije ili više ugniježđenih oznaka. Kreirajmo sada CSS pravilo za paragraf koji se testira, koje sam citirao gore:

P em (boja: zelena;)


Kao što vidite, zeleno je obojen ne samo tekst dijela sadržaja pasusa, koji je direktno zatvoren u oznaci za formatiranje em, odnosno riječ “kurzivno”, već i dio teksta druge oznake em , koji je također dio jake oznake. Ovo se dogodilo jer postoji pravilo sa selektorom konteksta, za koji nivo ugniježđenja nije važan, za razliku od selektora djece. Ovo je fundamentalna razlika između djeteta i selektora konteksta.

Pogledajmo još jedan primjer kako kontekstualni i podređeni selektori komuniciraju s našim paragrafom. Napišimo sljedeća CSS pravila za dijete i selektor konteksta:

Div em (boja: crvena;) p> em (boja: zelena;)

Nakon ovoga, naš paragraf poprima sljedeći dizajn:


Kao što vidite, dio teksta zatvoren u em i strong tagove je obojen crveno jer za njega vrijedi pravilo kontekstnog selektora, odnosno em oznaka je zatvorena u jake i div kontejnere, a nivo ugniježđenja, kao što je već napomenuto, nije bitno.

Postavlja se pitanje: zašto je riječ “kurziv”, koja je i sadržaj em, obojena zelenom bojom? Na kraju krajeva, i za njega je relevantno pravilo selektora konteksta. Ali za ovaj odeljak teksta pasusa važi i pravilo selektora dece, jer nije u suprotnosti sa uslovom da za selektor dece element mora biti direktno uključen u oznaku p.

Činjenica je da u CSS-u postoji zakon prvenstva za CSS svojstva koja se nalaze ispod. To jest, u ovom slučaju, pravilo selektora djece nalazi se niže u dokumentu od CSS stilovi, napisano za selektor konteksta div kontejnera. Stoga je riječ "kurziv" postala zelena. Ako ih zamijenite, tada pravilo “p> em (boja: zelena;)” više ne vrijedi i dio teksta “kurziv” će biti crven.

Vlad Merzhevich

Podređeni element je element koji se nalazi direktno unutar nadređenog elementa. Da bismo bolje razumjeli odnose između elemenata dokumenta, pogledajmo mali kod (primjer 12.1).

Primjer 12.1. Ugniježđenje elemenata u dokumentu

HTML5 CSS 2.1 IE Cr Op Sa Fx

Lorem ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

IN u ovom primjeru Koristi se nekoliko kontejnera koji se nalaze jedan u drugom u kodu. To se jasnije može vidjeti u stablu elemenata, što je naziv dat strukturi odnosa između oznaka dokumenta (slika 12.1).

Rice. 12.1. Primjer stabla elemenata

Na sl. Slika 12.1 predstavlja ugniježđenje elemenata i njihovu hijerarhiju u prikladnom obliku.

Ovdje je podređeni element oznake

protrudes tag Međutim, oznaka

nije dijete oznake

, budući da se nalazi u kontejneru

Vratimo se sada selektorima. Podređeni selektor je onaj koji se nalazi direktno unutar roditeljskog elementa u stablu elemenata. Sintaksa za korištenje takvih selektora je sljedeća.

Selektor 1 > Selektor 2 (Opis stilskih pravila)

Stil se primjenjuje na selektor 2, ali samo ako je podređen selektoru 1. Pozivajući se na primjer 12.1, stil prikaza P > EM (boja: crvena) bi bio postavljen na prvi pasus dokumenta jer bi oznaka

nalazi se unutar kontejnera I to neće dati nikakav rezultat za drugi pasus. I sve zbog oznake u drugom paragrafu nalazi se u kontejneru

, stoga je uvjet ugniježđenja narušen.

Po svojoj logici, podređeni selektori su slični selektorima konteksta. Razlika između njih je sljedeća. Selektor djece je samo stiliziran ako je direktno dijete, odnosno direktno smješten unutar roditeljskog elementa. Za selektor konteksta, dozvoljen je bilo koji nivo ugniježđenja. Da bi bilo jasno o čemu govorimo, pogledajmo sljedeći kod (primjer 12.2).

HTML5 CSS 2.1 IE Cr Op Sa Fx

Primjer 12.2. Kontekstualni i podređeni selektori

Lorem ipsum dolor sit amet Dječji selektori , consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna

Aliguam erat volutpat.

Rezultat ovog primjera prikazan je na sl. 12.2.

Rice. 12.2. Boja teksta postavljena pomoću dečjeg selektora To tag u primjeru, dva pravila rade istovremeno: selektor konteksta (tag

nalazi se unutra ) i selektor djece (oznaka

je podružnica

Imajte na umu da u većini slučajeva možete izbjeći dodavanje podređenih selektora tako što ćete ih zamijeniti selektorima konteksta. Međutim, upotreba podređenih selektora proširuje mogućnost kontrole stilova elemenata, što vam u konačnici omogućava da dobijete željeni rezultat, kao i jednostavan i jasan kod.

Najpogodnije je koristiti ove selektore za elemente koji imaju hijerarhijsku strukturu - to uključuje, na primjer, tabele i razne liste.

Primjer 12.3 pokazuje promjenu izgleda liste korištenjem stilova. Ugnježđivanjem jedne liste u drugu dobijamo tip menija. U ovom slučaju, naslovi se nalaze horizontalno, a skup veza je lociran okomito ispod naslova (slika 12.3).

Rice. 12.3. Lista kao meni

Za horizontalno pozicioniranje teksta, svojstvo float stila se dodaje selektoru LI. Da bi se odvojio stil horizontalne i vertikalne liste, koriste se podređeni selektori (primer 12.3).

HTML5 CSS 2.1 IE Cr Op Sa Fx

Primjer 12.2. Kontekstualni i podređeni selektori

Veliki

U ovom primjeru, od podređenih selektora se traži da odvoje stil stavki liste najviše razine i ugniježđenih lista, koje služe različitim svrhama, tako da se stil za njih ne bi trebao preklapati.

Pitanja za provjeru

1. Koje boje će biti podebljani kurziv tekst u kodu? Standardi osvjetljenja su zasnovani na na osnovu klasifikacije vizuelnog rada

prema određenim kvantitativnim karakteristikama.

Kada koristite sljedeći stil?
P ( boja: zelena; )
B (boja: plava; )
I (boja: narandžasta; )
B > I ( boja: maslina; )

  1. P > I ( boja: žuta; )
  2. Zeleno.
  3. Plava.
  4. Narandžasta.
  5. Maslina.

Žuta. ? </b></p> <ol><li><HEAD></li> <li><BODY></li> <li><HTML></li> <li><META></li> <li><!DOCTYPE></li> </ol><p><b>2. Koji element je roditeljski element za oznaku<!DOCTYPE>3. Za koji je tag element</b></p> <ol><li><HTML></li> <li><TITLE></li> <li><BODY></li> <li><HEAD></li> <li>ponaša se kao roditelj?</li> </ol><h2>Ni za jednu oznaku.</h2> <p>Odgovori</p> <p>1. Maslina.</p> <p>3. Ni za jednu oznaku.</p> <p>CSS podređeni selektori su selektori koji se koriste za primjenu stilova na elemente samo kada su djeca drugih (roditeljskih) elemenata. Kao i selektori potomaka, selektori djece su složeni i sastoje se od jednostavnih selektora (klase, identifikatori, itd.).</p><p> <тег1> <тег2>...</тег2> <тег3><тег4>...</тег4></тег3> </тег1> </p><p>I opet, ako ste zaboravili šta su podređeni elementi, onda se prisjetimo gledajući primjer koji vam je već poznat.<тег2>Za element se kaže da je dijete drugog elementa ako se nalazi na prvom nivou ugniježđenja unutar njega. U našem primjeru<тег3>I<тег1>su ćerke<тег4>, A<тег3> .</p> <p>Selektori djece se sastoje od dva ili više jednostavnih selektora razdvojenih znakom ">", gdje je prvo naveden roditelj, zatim njegovo dijete, zatim dijete tog djeteta, itd. Odnosno, kao iu selektorima potomaka, specificira se putanja kroz stablo dokumenta. Stilovi će se primijeniti samo na elemente čiji su selektori posljednji na listi. Opća sintaksa:</p> <p>selektor1 > selektor2 (</p> <p>Razmaci sa obe strane znaka ">" mogu biti postavljeni ili ne, po želji.</p> <p>Primjer korištenja CSS selektora djece</p><p> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Primjer 12.2. Kontekstualni i podređeni selektori

Stav 1.

Stav 2.

Rezultat u pretraživaču

Stav 1.

Stav 2.

Postoje dvije stvari na koje morate obratiti pažnju u ovom primjeru. Ovdje postoje tri elementa, ali samo dva od njih imaju ivice, padding i margine. Zašto? I druga tačka. Samo prvi pasus ima plavi tekst.

Internet Explorer 6.0 ne razumije podređene selektore, tako da ako gradite svoju web stranicu imajući na umu ovaj stariji pretraživač - imajte to na umu.

Selektori djece u HTML tabelama

Mnogi početnici (a ponekad i ne početnici) u kreiranju web stranica nailaze na određene probleme kada koriste podređene selektore u HTML tabelama. Da biste razumjeli o čemu govorimo, pogledajmo tako običan sto.

Ćelija 1.1Ćelija 1.2
Ćelija 2.1Ćelija 2.2

A sada pitanje. Šta biste učinili da trebate koristiti selektore djece za prelazak od oznake do ćelija? Ako odlučite da pišete ovako, onda je netačno:

tablica > tr > td ( svojstvo: vrijednost; svojstvo: vrijednost; ...)

Možete li pogoditi zašto je to pogrešno? Ne? Činjenica je da ste zaboravili na još jedan element - koji je, čak i ako nije eksplicitno naveden, ipak nevidljivo prisutan u svakoj HTML tabeli. Jednostavno nema potrebne oznake za otvaranje i zatvaranje, tako da se često zaboravlja. Usput, da, u HTML tutorial Nismo prošli kroz to, jer je u stvarnosti njegova eksplicitna indikacija rijetko potrebna. Pa, mislim da ste već pogodili koji će biti tačan unos, ali ipak ću vam pokazati.

tablica > tbody > tr > td ( svojstvo: vrijednost; svojstvo: vrijednost; ...)

Inače, ne samo da tabele imaju elemente sa opcionim oznakama za otvaranje, postoje i takvi elementi. Samo što se u praksi “problemi zaborava” najčešće javljaju kod tabela, zbog čega sam vam i skrenuo pažnju na ovo.

Domaći.

  1. Postavite stranicu na veličinu fonta Arial 0,9em i neku pozadinu.
  2. Napišite nekoliko naslova i pasusa na stranici, promijenite veličinu i boju teksta naslova kako vam odgovara.
  3. Vodite računa da veze direktno u pasusima stranice budu plave bez podvlačenja. Ali u isto vrijeme, ako su veze dodatno uokvirene bilo kojom oznakom, na primjer za kurziv, onda ih treba prikazati podcrtanom i crvenom bojom. Još jednom, skrećem vam pažnju na činjenicu da ne morate specificirati stilove veze sa svakom oznakom okvira posebno, učinite je univerzalnom. Kako? Razmisli o tome.
  4. Napravite mali meni na desnoj strani stranice i popravite ga, za ovo će vam trebati svojstvo i još par svojstava koji ga prate, tamo ćete shvatiti. Istovremeno, dozvolite da meni ne samo da ostane na mestu u prozoru pretraživača, već i da se ne uvuče u sadržaj stranice prilikom pomeranja.

Mislim da će vam posljednja tačka lekcije biti najteža, ali nemojte se odmah pokušavati potpuno uroniti u savladavanje pozicioniranja. Samo uradi svoj domaći. Inače, ova stavka neće raditi u Internet Exploreru 6.0, pošto stari ne razumije fiksno pozicioniranje.

Glavni zadatak ovog selektora proizlazi iz njegovog imena i jeste pristup podređenom elementu. Prikazuje se pomoću primitivnog znaka ">", koji povezuje podređeni element sa roditeljskim elementom. Također je vrijedno napomenuti da se u prometu koriste jednostavni selektori. Kao primjer, razmotrite sljedeće kodiranje:

Element > ul ( padding-top: 20px; )

Ovo kodiranje znači da će lista ugniježđena unutar elementa imati razmak od 20 piksela od gornje ivice. Prisustvo ikone “>” u ovom unosu označava da će se pravilo primjenjivati ​​samo na liste prvog nivoa ugniježđenja.

Detaljna analiza kako radi selektor podređenih elemenata

Selektor podređenog elementa ima slična svojstva kao koncept selektora potomaka. Međutim, postoji karakteristična karakteristika koja pokazuje fundamentalnu razliku između ovih operacija. Ona leži u činjenici da se uticaj selektora potomaka proteže na apsolutno sve elemente, dok selektor deteta podređuje stilove pozicija prvog nivoa klasifikacije.

Sljedeći primjer će vam pomoći da jasnije ocijenite rad operatora selektora djece:

Div > p ( boja: #ff0000; /* crvena */ )

< div> Ova linijaće po defaultu imati crni tekst.< span>Ova linija postaje crvena zbog činjenice da je p podređena oznaka za div. < p>Opet vidimo crna slova.< span>Ovdje također vidimo crne simbole, jer je za ovaj raspon roditelj p tag.

Ovaj primjer potvrđuje rad operatora selektora djece prema stupnju ugniježđenja.

Ograničenje za korištenje operatora selektora djece

Vrijedi napomenuti da ovu operaciju podržavaju svi pretraživači osim legendarnog Internet Explorera 6. Mislim da malo ljudi koristi ovaj pretraživač, međutim, ako postoje takvi jedinstveni, onda za njih postoji izlaz iz situacije, koji će biti opisan u posebnom članku.

Zašto se koristi?

Programeri se okreću selektorima podređenih elemenata kada trebaju dodijeliti svoj jedinstveni stil ugniježđenim elementima. Takođe, korišćenje ovog selektora može smanjiti količinu CSS-a, što će poboljšati čitljivost dokumenta. Kao što pokazuje praksa, ova se operacija najčešće koristi pri kreiranju padajućih izbornika.

Selektor podređenih elemenata se također koristi za dodjelu jedinstvenih stilova elementima čiji su roditelji već poznati. Drugim riječima:

Glavni > zaglavlje ( /* dekoracija se odnosi samo na glavno zaglavlje */ }

Ovaj primjer vrijedi u slučajevima kada se oznaka zaglavlja koristi za isticanje naslova članaka. U našem slučaju dizajn postavljamo samo za glavno zaglavlje, a ne utičemo na sekundarna. Ova tehnika vam također omogućava da izbjegnete korištenje nepotrebnih identifikatora, što zauzvrat olakšava težinu CSS datoteke i čini je čitljivijom.

Sumiranje

Dakle, operator elementa djeteta može se koristiti ne samo za dizajniranje padajućih izbornika, već i za malo optimizaciju vašeg internetskog resursa za rad robota za pretraživanje.

Podređeni elementi su elementi koji se nalaze direktno unutar nadređenog elementa. Obratite pažnju na reči: direktno unutra.

Pogledajmo primjer jednostavan html kod:

Child elementi.

Paragraf i u njemu masno element, i evo ga skloni element.

Evo masno I podvučeno i koso elementi.

Ovaj kod ima dva paragrafa. Unutar pasusa postoje inline elementi , Za element se kaže da je dijete drugog elementa ako se nalazi na prvom nivou ugniježđenja unutar njega. U našem primjeru . U drugom paragrafu oznaka ugniježđen u oznaku .

Sada dodajmo CSS stilove ovom html kodu koristeći podređene selektore.

Sintaksa za selektore djece:

Selektor 1 > Selektor 2 ( Svojstvo: vrijednost; )

Evo ažuriranog koda:

Child elementi.

Paragraf i u njemu masno element, i evo ga skloni element.

Evo masno I podvučeno i koso elementi.

Dakle, zapamtimo: podređeni element je element ugniježđen direktno u roditelj. To jest, podređeni element je potomak prvog nivoa. Obratimo pažnju na oznaku , u prvom pasusu je ugniježđen u oznaku

A u drugom je ugniježđen u tag , iako je također dijete oznake

Stoga, u drugom pasusu, CSS pravilo za selektor djece p>i ( boja : plava ; ) neće raditi - kurzivni tekst drugog pasusa neće biti prikazan plavom bojom.

Slika 1. Primjer #1 na poslu.

Dođite do html elementa drugi pasus se može koristiti pomoću CSS pravila: p>u>i ( boja : plava ; ).

Koristimo ovo pravilo da kurzivni tekst drugog pasusa postavimo na žuto.

Child elementi.

Paragraf i u njemu masno element, i evo ga skloni element.

Evo masno I podvučeno i koso elementi.

Ovaj stil će raditi i kurzivni tekst u drugom pasusu će biti prikazan žutom bojom.

Slika 2. Primjer br. 2 u akciji.

Složeniji primjer

Imamo html kod:

Child elementi.

  • Primjer 12.3. Korištenje selektora djece
    • Uredi
    • Otkaži
    • Cut
    • Kopiraj
  • Insert
    • Vrsta slova
    • Bold
    • Kurziv
  • Podvučeno
    • Veličina
    • Mala
    • Normalno
    • Prosjek

Podrazumevano se tumači ovako:

Zadatak: kada CSS pomoć pretvorite ovu listu u horizontalni meni.


Slika 3. Cilj promjene.

Evo rješenja za ovaj problem korištenjem selektora djece:

Child elementi.

  • Primjer 12.3. Korištenje selektora djece
    • Uredi
    • Otkaži
    • Cut
    • Kopiraj
  • Insert
    • Vrsta slova
    • Bold
    • Kurziv
  • Podvučeno
    • Veličina
    • Mala
    • Normalno
    • Prosjek

Za bolje razumijevanje ovog primjera, čitajte dalje.

POVEZANI ČLANCI