Ne sve, ali više nego dovoljno

Ljudi koji uče XHTML, kao i CSS iz knjiga, često otkriju da CSS događaji nisu u potpunosti opisani. Konkretno, samo događaji kao što su lebdjeti, aktivan, posjećen. Postoji mnogo više CSS događaja i mogućnosti koje oni pružaju su vrlo velike.

Nije prikazano ovdje puni popis događaje, ali samo one koji su stvarno potrebni modernom web dizajneru.

Ako bloku dodijelite događaj nakon, generirani kod definiran u listu stilova bit će ispisan nakon bloka. Za definiranje koda koristi se CSS naredba - sadržaj, čija je sintaksa sadržaj: "XHTML kod".

Oni. cijela naredba bi mogla izgledati ovako:
#someId:poslije
(sadržaj:"XHTML kod") :before Radi isto kao i after, ali ispisuje kod prije elementa: first-child Postavlja stil za prvo dijete nekog drugog elementa.

Recimo da će primjenom ovog događaja na oznaku h1 prvi i jedini prvi naslov razine 1 biti prikazan s odgovarajućim stilom. Posebno je učinkovito koristiti ovaj događaj za stilove ugniježđenih oznaka (više razina), na primjer, ovako:

body ol li:first-child(...)(tj. na svim ol popisima, prvi element li, ali ne i ul, bit će prikazan s zadane postavke stilovi)

:last-child Stilizira zadnje dijete nekog drugog elementa. :focus Postavlja stil za elemente obrasca koji primaju fokus, tj. one na koje kliknete. Na primjer, možete napraviti različito aktivno polje za unos teksta od neaktivnog polja za unos teksta. :hover Stil za element nad kojim lebdite. Može se koristiti sa svim blokovima i tekstom (prije smo razmatrali samo veze). :lang( x) Dodjeljuje element određenom jeziku bez promjene sadržaja elementa na bilo koji način. Ova oznaka se može koristiti, na primjer, za isticanje poveznica na različite izvore. Umjesto x postavlja se međunarodna oznaka jezika od dva znaka ili u suprotnom naziv domenske zone. Na primjer, za Rusiju jest ru, za Ameriku nas, i tako dalje. Ako element treba definirati više jezika odjednom, oni moraju biti odvojeni crticom bez razmaka (prema silaznoj važnosti stilova koje svaki jezik definira). :visited Postavlja stil posjećene veze:nth-child(x) Postavlja stil za određene elemente ili jedan određeni element. x se može izraziti:

• broj. U ovom slučaju bit će odabran samo 1 element
• izrazi odd(svi neparni elementi) ili even(svi parni elementi).
• izraz an+b, gdje se n ne mijenja, a i b su proizvoljni brojevi. Na primjer, 7n+4. Svi elementi koji daju ostatak 4 kada se podijele sa 7 bit će odabrani (4, 11, 18 itd.) U ovom slučaju, ako su a ili b jednaki 0, tada se mogu izostaviti. N elemenata se broji od 0 do n-1

Pažnja! Ovo ponašanje (selektor) postoji samo u novom standardu CSS 3 i podržavaju ga samo moderni preglednici. :nth-last-child(x) Isto kao nth-child(x), ali broji od zadnjeg n-1 elementa do 0. :emply Dodaje stil elementu koji nema djecu, tj. na praznu oznaku. :enabled Stil za odabrani, označeni element obrasca. Samo za elemente gumb, unos, optgroup, option, select, textarea. Ovaj i dva sljedeća birača dostupni su samo u CSS-u 3:onemogućeno Isto kao omogućeno, ali za neaktivirane elemente obrasca:označeno Samo za radio i potvrdni okvir. Postavlja stil za odabrane elemente. :first-letter Postavlja stil za prvo slovo u tekstu (tzv. drop cap). Podržane su samo CSS stilske naredbe, ne i označavanje. :first-line Isto, ali za prvi red teksta.

Duboko zaronite u CSS selektore

Gore opisani materijali bit će dovoljni za mnoge, ali ne za sve. Na web stranicama velikih tvrtki, javnih projekata, društvene mreže koriste se vrlo složeni CSS selektori i ponekad gore opisana funkcionalnost nije dovoljna. Dodatno, CSS mora komunicirati s programskim jezicima na strani poslužitelja, tj. često CSS to određene stranice kreira se automatski. Istodobno, mora funkcionirati ispravno i ispravno.

Spomenuli smo nasljednost elemenata. Sada ćemo to dublje analizirati.

CSS može definirati pravila za različite vrste nasljeđivanja ili pripadnost elemenata nadređenom elementu. Svi oni služe samo za odabir elemenata na koje će se pravilo primijeniti.

Kombinatori (stvaranje veze između stilova na temelju nasljeđa)
Susjedni brat ili sestra (+)	Ovaj kombinator definira 2 elementa koji odmah slijede jedan iza drugog (nema drugih elemenata između njih s istim roditeljem kao ta 2 elementa, ali mogu postojati elementi koji ih nasljeđuju) i imaju istog roditelja. Stil se primjenjuje na oba elementa odjednom. Sintaksa snimanja (razmaci nisu uključeni) E+F(...) gdje je E prvi element, F je drugi element. Na primjer, h1+h2(familija-fontova:serif) Ovaj unos će definirati stil samo za uzastopne elemente h1 i h2 koji imaju istog roditelja. Ako postoji druga oznaka h2 nakon h2, tada se stil ne primjenjuje na nju.
Dijete (>) kombinator	Kombinator identificira sve elemente koji su izravni potomci jednog elementa. Podržava više razina ugniježđivanja, na primjer: tijelo > div > p(...) To jest, stil će se primijeniti samo na odlomke koji su djeca svih divova koji izravno pripadaju oznaci tijela.
Potomak	Definira proizvoljnu vezu između elemenata. To jest, elementi ne bi trebali biti izravni potomci, već jednostavno potomci jednog elementa. Sintaksa (potreban prostor): E F(...) Na primjer: table.table1 td(...) To jest, stil će biti definiran u svim stupcima potomcima tablice s klasom table1, čak i ako postoje druge tablice unutar ove tablice. Stil će se također primijeniti na stupce podređenih tablica.
Opći brat i sestra (~)	Sintaksa E~F. Kombinator obavlja istu funkciju kao susjedni srodni element, osim što između E i F može postojati bilo koji broj elemenata iste razine ugniježđenja i može biti više od jednog F.
Atributi. Selektori atributa. Stvaranje vlastitih atributa
Jednakost [=]	Svaka oznaka može imati atribut (na primjer, atribut id, koji može imati gotovo svaka oznaka, ili atribut širine (samo za blokove)). Možete stvoriti vlastiti atribut, koji je tekstualni niz. Na primjer, attr. Stvaranje vlastitih atributa korisno je za birače atributa u CSS-u. Atributi se mogu koristiti u kombinaciji s kombinatorima. Jednakost specificira stil za sve elemente čiji je navedeni atribut točno jednak navedenoj vrijednosti. Sintaksa: {...} Kao što vidite, ovdje nisu definirane oznake. Stilovi su definirani za sve elemente koji imaju atribut att jednaka vrijednosti val. Att i val mogu uzeti vrijednosti identifikatora (na primjer, za att mogu postojati bilo koji naučeni atributi, za val - ništa, blok itd.) i vrijednosti niza, tj. samo riječ (na primjer, definirat će sve elemente s unosom<... attr="test" ...="">).
Postojanje	Identificira sve elemente koji imaju atribut, bez obzira na njegovu vrijednost. Sintaksa: {...} att - atribut (ili string vrijednost, tj. vlastiti atribut)
Prefiks [^=]	Definira elemente koji imaju atribut att koji uzima vrijednost koja počinje s val. Sintaksa: {...} att - atribut (ili string vrijednost, tj. vlastiti atribut), val - vrijednost atributa Vrlo dobar primjer: Wikipedia. Na ovoj stranici sve poveznice koje vode na stranice koje nisu Wikipedia imaju ikonu (strelicu) iza sebe. Evo primjera snimke koja vam omogućuje pisanje ovog stila: :nakon(sadržaj" "}
Sufiks [$=]	Definira elemente koji imaju atribut att koji uzima vrijednost koja završava na val. Sintaksa {...} Ovaj atribut se odnedavno počeo koristiti za stavljanje slika ispred raznih poveznica koje će korisniku vizualno pokazati na koju će ga datoteku ili stranicu poslati poveznica. Na primjer, prije poveznica na PDF datoteke možete staviti PDF ikonu. Primjer: :prije (sadržaj:" "}
Podniz [*=]	Sintaksa snimanja: {...} Odabire sve elemente s atributom att čija vrijednost uključuje podniz val. Na primjer, "54" je podniz "132 54 6", "val" - podniz "vrijednost" itd.
Razmak [~=]	Razmak je isto što i podniz, ali podniz mora biti riječ, tj. okružen razmacima u nizu.
Crtica [|=]	Isto kao podniz, osim što podniz mora biti dio atributa i odvojen od ostalih dijelova crticom. Primjer: {...} će odabrati sve oznake s atributom lang čija vrijednost sadrži en, na primjer en-ru, ru-de-en itd.

Ovo zaključuje proučavanje XHTML+CSS-a. Sljedeće lekcije bit će o JavaScriptu.

Selektori su jedan, ako ne i najvažniji dio CSS-a. Oni tvore kaskadu i definiraju kako se stilovi trebaju primijeniti na elemente stranice.

Sve donedavno fokus CSS-a nikada nije bio na selektorima. S vremena na vrijeme pojavila su se mala ažuriranja unutar specifikacije selektora, ali nikada nije bilo pravih revolucionarnih poboljšanja. Srećom, selektori u posljednje vrijeme dobivaju više pozornosti, pa pogledajmo kako odabrati različiti tipovi elementi i elementi u različitim stanjima.

CSS3 je donio nove selektore, otvarajući cjelinu Novi svijet mogućnosti i poboljšanja postojeće prakse. Ovdje ćemo razgovarati o selektorima, starim i novim, i kako ih najbolje koristiti.

Tipični selektori

Prije nego što duboko zaronimo u neke od složenijih selektora i onih ponuđenih u CSS3, pogledajmo neke od najčešćih selektora dostupnih danas. Ti selektori uključuju selektore tipa, klase i identifikatora.

Selektor tip identificira element na temelju njegovog tipa, posebno kako je element deklariran u HTML-u. Selektor razreda identificira element na temelju vrijednosti atributa klase, koji se prema potrebi može ponovno primijeniti na više elemenata i pomaže u dijeljenju popularnih stilova. I konačno identifikator definira element temeljen na vrijednosti atributa id koji je jedinstven i smije se koristiti samo jednom na stranici.

H1 (...).tagline (...) #intro (...)

Izbornici djece

Podređeni selektori pružaju način odabira elemenata koji su ugniježđeni jedni u druge, čineći ih djecom nadređenog elementa. Ovaj izbor mogu napraviti dvoje različiti putevi, koristeći selektor potomka ili izravni selektor djeteta.

Selektor potomaka

Najčešći selektor djeteta je selektor potomka, koji odgovara svakom elementu koji slijedi određenog pretka. Dijete ne mora doći odmah nakon pretka u stablu dokumenta, poput odnosa roditelj-dijete, već može biti bilo gdje unutar pretka. Selektori potomaka stvaraju se razmakom između pojedinačnih elemenata u selektoru, stvarajući nova razina hijerarhiju za svaki element liste.

Selektor article h2 je selektor potomak i odabire samo elemente

, koji se nalaze unutar elementa

. Imajte na umu, bez obzira gdje element živi

dok je unutar elementa

, uvijek će biti odabrano. Osim toga, bilo koji element

izvan elementa

neće biti odabrani.

Ispod su naslovi iz kojih su odabrani redovi 3 i 5.

Članak h2 (...)

...

Ovaj će naslov biti odabran

Ovaj će naslov biti odabran

Izravni odabir djeteta

Ponekad selektori djece odu predaleko, odabirući više od željenog. Ponekad je potrebno odabrati samo izravnu djecu nadređenog elementa, umjesto svake instance elementa ugniježđene duboko unutar pretka. U ovom slučaju, izravni podređeni selektor može se koristiti postavljanjem znaka veće od (>) između nadređenog i podređenog elementa u selektoru.

Na primjer, article > p izravni je podređeni selektor samo kada elementi

Nalazi se izravno unutar elementa

. Bilo koji element<р>postavljen izvan elementa

ili ugniježđen unutar drugog elementa osim

, neće biti odabran.

Ispod, odlomak u retku 3, jedini je izravni potomak svog roditelja

, zato je i odabrano.

Članak > p (...)

Ovaj paragraf će biti odabran

Povezani selektori

Znati kako odabrati podređene elemente uvelike je korisno i prilično je uobičajeno. Međutim, možda će također biti potrebno odabrati elemente srodne braće, to jest elemente koji dijele zajedničkog pretka. Takav odabir može se napraviti korištenjem zajedničkog bratskog selektora i susjednih selektora.

Generički selektor sestre

Opći selektor srodnih elemenata omogućuje odabir elemenata koji će biti odabrani na temelju njihovih srodnih elemenata, tj. onih koji imaju istog zajedničkog roditelja. Oni se stvaraju korištenjem znaka tilde (~) između dva elementa unutar selektora. Prvi element specificira da drugi element mora biti njegov srodnik i oba moraju imati istog roditelja.

h2~p selektor je općeniti srodni selektor, on traži elemente

Koji dolaze nakon bilo kojih elemenata

u istom roditelju. Za element

Odabrano, mora doći nakon bilo kojeg elementa

.

Odlomci u recima 5 i 9 odabrani su jer dolaze nakon naslova u stablu dokumenta i imaju istog nadređenog kao povezani naslov.

H2 ~ p(...)

...

Ovaj paragraf će biti odabran

Ovaj paragraf će biti odabran

Susjedni selektori

Ponekad bi bilo poželjno imati malo više kontrole, uključujući mogućnost odabira brata ili sestre koji izravno slijedi drugog brata ili sestru. Susjedni selektor odabire samo srodne elemente neposredno nakon drugog srodnog elementa. Umjesto znaka tilde, kao što je slučaj s uobičajenim istorodnim selektorom, srodni selektor koristi simbol plus (+) između dva elementa u selektoru. Opet, prvi element specificira da drugi element mora odmah slijediti i biti povezan s njim, a oba elementa moraju imati istog roditelja.

Pogledajmo susjedni selektor h2 + p . Bit će odabrani samo elementi

Dolazi odmah nakon elemenata

. Oba također moraju imati isti nadređeni element.

Odlomak u retku 5 odabran je jer odmah slijedi povezani naslov i dijele istog nadređenog.

H2 + p(...)

...

Ovaj paragraf će biti odabran

Primjer susjednih selektora

☰

Ulaz ( prikaz: ništa; ) oznaka, ul ( obrub: 1px solid #cecfd5; border-radius: 6px; ) oznaka ( boja: #0087cc; kursor: pokazivač; prikaz: inline-block; veličina fonta: 18px; padding: 5px 9px; prijelaz: sve .15s lakoća; ) label:hover (boja: #ff7b29; ) input:checked + label (box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); boja: #9799a7 ; ) nav ( max-height: 0; overflow: hidden; prijelaz: all .15s ease; ) input:checked ~ nav ( max-height: 500px; ) ul (list-style: none; margin: 8px 0 0 0; padding: 0; width: 100px; ) li ( border-bottom: 1px solid #cecfd5; ) li:last-child ( border-bottom: 0; ) a (boja: #0087cc; display: block; padding: 6px 12px; text-decoration: none; ) a:hover ( boja: #ff7b29; )

Selektori atributa

Neki od generičkih selektora o kojima smo ranije raspravljali također se mogu definirati kao selektori atributa, u kojima se element odabire na temelju vrijednosti klase ili id-a. Ovi selektori atributa klase i id-a često se koriste i prilično su moćni, ali oni su samo početak. Drugi selektori atributa pojavili su se posljednjih godina, osobito čineći veliki korak naprijed s CSS3. Elementi se sada mogu odabrati na temelju toga je li atribut prisutan i koju vrijednost sadrži.

Selektor prisutnosti atributa

Prvi selektor atributa identificira element na temelju toga je li atribut omogućen ili ne, bez obzira na njegovu stvarnu vrijednost. Za odabir elementa na temelju toga je li atribut prisutan ili ne, jednostavno uključite naziv atributa unutar uglatih zagrada () u selektor. Uglate zagrade mogu doći nakon bilo kojeg selektora tipa ili klase, ovisno o željenoj razini specifičnosti.

A (...)

...

Selektor atributa =

Za identifikaciju elementa s određenom i preciznom vrijednošću, može se koristiti isti selektor kao i prije, ali ovaj put je željena vrijednost uključena unutar uglatih zagrada nakon naziva atributa. Unutar uglatih zagrada iza znaka jednakosti (=) treba stajati naziv atributa, gdje se željena vrijednost atributa nalazi unutar navodnika.

A (...)

...

Selektor atributa *=

Kada pokušavamo pronaći element na temelju dijela vrijednosti atributa, ali ne i točnog podudaranja, može se koristiti znak zvjezdice (*) unutar uglatih zagrada selektora. Zvjezdica mora doći odmah iza naziva atributa, neposredno prije znaka jednakosti. To znači da se vrijednost koja slijedi treba samo pojaviti ili biti sadržana u vrijednosti atributa.

A (...)

...

Selektor atributa ^=

Osim odabira elementa na temelju vrijednosti atributa koji sadrži navedeni tekst, možete također odabrati element na temelju toga gdje vrijednost atributa počinje. Korištenje znaka cirkumfleksa (^) u selektorskim zagradama između naziva atributa i znaka jednakosti znači da vrijednost atributa mora započeti navedenim tekstom.

A (...)

...

Selektor atributa $=

Suprotnost prethodnom selektoru je selektor atributa, gdje vrijednost završava nekim tekstom. Umjesto upotrebe znaka ^, između naziva atributa i znaka jednakosti koristi se znak dolara ($) u selektorskim zagradama. Korištenje znaka dolara znači da vrijednost atributa mora završiti navedenim tekstom.

A (...)

...

Selektor atributa ~=

Ponekad vrijednosti atributa mogu biti razmaknute jedna od druge, pri čemu samo jedna od riječi mora ispunjavati uvjete za stvaranje odabira. U ovom slučaju, korištenje znaka tilde (~) u selektorskim zagradama između naziva atributa i znaka jednakosti znači da je vrijednost atributa odvojena razmacima, od kojih jedna riječ točno odgovara navedenoj vrijednosti.

A (...)

...

Selektor atributa |=

Kada je vrijednost atributa odvojena crticama umjesto razmacima, znak okomite crte (|) može se koristiti u selektorskim zagradama između naziva atributa i znaka jednakosti. Okomita linija označava da vrijednost atributa može biti odvojena crticom, ali riječi moraju započeti navedenom vrijednošću.

A (...)

...

Primjer selektora atributa

• PDF dokument
• Word dokument
• Slika
• Audio
• Video

Ul (list-style: none; margin: 0; padding: 0; ) a (background-position: 0 50%; background-repeat: no-repeat; color: #0087cc; padding-left: 22px; text-decoration: ništa; ) a: lebdi ( boja: #ff7b29; ) a ( pozadinska slika: url("images/pdf.png"); ) a ( pozadinska slika: url("images/doc.png"); ) a ( pozadinska slika: url("slike/image.png"); ) a ( pozadinska slika: url("slike/audio.png"); ) a ( pozadinska slika: url("slike/video.png" );)

Pregled selektora atributa

Primjer	Ime	Opis
a	Selektor prisutnosti atributa	Odabire element ako je dani atribut prisutan.
a	Selektor atributa =	Odabire element ako vrijednost ovog atributa točno odgovara navedenoj.
a	Selektor atributa *=	Odabire element ako vrijednost ovog atributa sadrži barem jednu instancu navedenog teksta.
a	Selektor atributa ^=	Odabire element ako vrijednost ovog atributa počinje navedenim tekstom.
a	Selektor atributa $=	Odabire element ako vrijednost ovog atributa završava navedenim tekstom.
a	Selektor atributa ~=	Odabire element ako je vrijednost zadanog atributa odvojena razmacima i točno odgovara jednoj navedenoj riječi.
a	Selektor atributa |=	Odabire element ako je vrijednost zadanog atributa odvojena crticom i počinje navedenom riječi.

Pseudo-klase

Pseudoklase su slične uobičajenim klasama u HTML-u, ali nisu izravno navedene u označavanju; umjesto toga, popunjavaju se dinamički kao rezultat radnji korisnika ili strukture dokumenta. Najčešća pseudoklasa, koju ste vjerojatno već vidjeli, je :hover. Imajte na umu da ova pseudoklasa počinje dvotočkom (:), kao i sve druge pseudoklase.

Povežite pseudo-klase

Neke osnovne pseudo-klase uključuju dvije pseudo-klase koje se vrte oko referenci. To su pseudoklase :link i :visited i one određuju je li poveznica posjećena ili nije. Za stiliziranje poveznice koja još nije posjećena, pseudoklasa :link dolazi u igru, a pseudoklasa :visited stilizira veze koje je korisnik već posjetio na temelju svoje povijesti pregledavanja.

A:link (...) a:posjećeno (...)

Pseudo-klase korisničkih radnji

Različite pseudo-klase mogu se dinamički primijeniti na element na temelju radnji korisnika, uključujući :hover, :active i :focus. Pseudoklasa :hover primjenjuje se na element kada korisnik pomakne kursor preko elementa, što se najčešće koristi s poveznicama. Pseudo-class:active primjenjuje se na element kada korisnik aktivira element, primjerice klikom na njega. Konačno, pseudo-class:focus primjenjuje se na element kada je korisnik postavio element u fokus stranice, često korištenjem tipke Tab dok se pomiče s jednog elementa na drugi.

A:lebdjenje (...) a:aktivno (...) a:fokus (...)

Pseudo-klase stanja sučelja

Poput veza, postoje i neke pseudoklase povezane sa stanjem elemenata korisničkog sučelja, posebno unutar obrazaca. Ove pseudo-klase uključuju :enabled, :disabled, :checked i :indeterminate.

Pseudoklasa :enabled odabire polja koja su omogućena i dostupna za korištenje, a pseudoklasa :disabled odabire polja za koja je vezan atribut disabled. Mnogi preglednici zatamnjuju takva onemogućena polja prema zadanim postavkama kako bi obavijestili korisnike da polje nije dostupno za interakciju, ali njihov stil se može prilagoditi po želji putem pseudo-klase :disabled.

Unos: omogućen (...) unos: onemogućen (...)

Posljednja dva elementa stanja sučelja, :checked i :indeterminate pseudo-klase, vrte se oko potvrdnih okvira i radio gumba. Pseudoklasa :checked odabire potvrdne okvire ili radio gumbe za koje možete očekivati ​​da će biti označeni. Kada nijedan potvrdni okvir ili radio gumb nije označen ili odabran, živi u neodređenom stanju, za koje se :indeterminate pseudo-klasa može koristiti za ciljanje sličnih elemenata.

Unos:provjereno (...) unos:neodređeno (...)

Pseudoklase strukture i položaja

Nekoliko pseudo-klasa odnosi se na strukturu i položaj na temelju toga gdje se elementi nalaze u stablu dokumenta. Ove pseudo-klase dolaze u različitim oblicima i veličinama, a svaka ima svoju jedinstvenu funkciju. Neke pseudoklase postoje dulje od drugih, ali CSS3 je donio potpuno novi skup pseudoklasa koje nadopunjuju postojeće.

:prvo-dijete, :zadnje-dijete i :jedino-dijete

Prve strukturne pseudoklase na koje ćete vjerojatno naići su :first-child, :last-child i :only-child. Pseudoklasa :first-child odabrat će element ako je prvo dijete u roditelju, dok će pseudoklasa :last-child odabrati element ako je to posljednje dijete u roditelju. Ove pseudoklase su idealne za odabir prvog ili zadnjeg elementa na popisu, itd. Dodatno, :only-child će odabrati element ako je on jedini element u roditelju. Alternativno, pseudo-klasa :only-child može se napisati kao :first-child:last-child , međutim :only-child ima nižu specifičnost.

Ovdje selektor li:first-child specificira prvu stavku popisa, dok li:last-child specificira zadnja točka tako da su odabrani redi 2 i 10. Selektor div:only-child traži

, koji je jedino dijete nadređenog elementa, bez drugih srodnih elemenata. U ovom slučaju odabran je redak 4 jer je jedini

u ovoj stavci popisa.

Li:prvo-dijete (...) li:zadnje-dijete (...) div:jedino-dijete (...)

• Ova će stavka biti odabrana
• Ovaj div će biti odabran
• ...
  ...
• Ova će stavka biti odabrana

:first-of-type, :last-of-type i :only-of-type

Pronalaženje prvog, posljednjeg i jedinog djeteta roditelja vrlo je korisno i često sve što je potrebno. Međutim, ponekad želite odabrati samo prvo, zadnje ili jedino dijete određene vrste elementa. Na primjer, želite odabrati samo prvi ili zadnji odlomak unutar članka ili možda samo sliku unutar članka. Srećom, pseudoklase :first-of-type , :last-of-type i :only-of-type pomažu u tome.

Pseudoklasa :first-of-type će odabrati prvi element svog tipa unutar roditelja, dok će pseudoklasa :last-of-type odabrati posljednji element tog tipa unutar roditelja. Pseudoklasa :only-of-type će odabrati element ako je on jedini svog tipa u roditelju.

U donjem primjeru, pseudoklase p:first-of-type i p:last-of-type odabrat će prvi i zadnji odlomak u članku, bez obzira na to jesu li oni zapravo prva ili posljednja djeca u članak. Linije 3 i 6 odabiru ovi birači. Selektor img:only-of-type navodi sliku u retku 5 kao jedinu sliku koja se pojavljuje u članku.

P:prvi-od-vrste (...) p:zadnji-od-vrste (...) img:samo-od-vrste (...)

...

Ovaj paragraf će biti odabran

Ovaj paragraf će biti odabran

...

Konačno, postoji nekoliko pseudo-klasa strukture i položaja koje odabiru elemente na temelju broja ili algebarskog izraza. Ove pseudo-klase uključuju :nth-child(n) , :nth-last-child(n) , :nth-of-type(n) i :nth-last-of-type(n) . Sve ove jedinstvene pseudo-klase počinju s nth i uzimaju broj ili izraz unutar zagrada, što je označeno simbolom n.

Broj ili izraz koji se nalazi u zagradama točno određuje koji element ili elemente treba odabrati. Korištenje određenog broja izračunat će pojedinačni element s početka ili kraja stabla dokumenta i zatim ga odabrati. Korištenje izraza će procijeniti skup elemenata s početka ili kraja stabla dokumenta i odabrati njihovu grupu ili ponavljanje.

Korištenje brojeva i izraza u pseudo-klasama

Kao što je spomenuto, korištenje određenog broja u pseudoklasi računa od početka ili kraja stabla dokumenta i odabire jedan odgovarajući element. Na primjer, selektor li:nth-child(4) će odabrati četvrtu stavku na popisu. Brojanje počinje od prve stavke popisa i povećava se za jedan za svaku stavku popisa dok konačno ne pronađe četvrtu stavku i odabere je. Kada se navodi određeni broj, on mora biti pozitivan.

Izrazi za pseudo-klase dolaze u formatu an, an+b, an-b, n+b, -n+b i -an+b. Isti se izraz može prevesti i pročitati kao (a×n)±b. Varijabla a označava faktor po kojem će se izračunati elementi, dok varijabla b označava gdje će brojanje započeti ili se dogoditi.

Na primjer, selektor li:nth-child(3n) navest će svaki treći element stavke popisa. Korištenje ovog izraza odgovara 3x0, 3x1, 3x2 i tako dalje. Kao što vidite, rezultati ovog izraza odabiru treći, šesti i svaki element koji je višekratnik tri.

Osim toga, parne i neparne ključne riječi mogu se koristiti kao vrijednosti. Kao što biste očekivali, birat će neparne, odnosno parne elemente. Ako ključne riječi nisu atraktivne, onda će izraz 2n+1 odabrati sve neparne elemente, a izraz 2n će odabrati sve parne elemente.

Selektor li:nth-child(4n+7) će definirati svaku četvrtu stavku na listi, počevši od sedme stavke. Opet, korištenje ovog izraza je ekvivalentno (4x0)+7, (4x1)+7, (4x2)+7, i tako dalje. Rezultati ovog izraza će odabrati sedmi, jedanaesti, petnaesti i svaki četvrti element.

Kada koristite n bez vodećeg broja, a se procjenjuje na 1. Selektor li:nth-child(n+5) će odabrati svaku stavku popisa počevši od pete, ostavljajući prve četiri stavke popisa neodabrane. U izrazu se to raščlanjuje kao (1×0)+5, (1×1)+5, (1×2)+5 i tako dalje.

Negativni brojevi mogu se koristiti za stvaranje složenijih stvari. Na primjer, selektor li:nth-child(6n-4) će brojati svaku šestu stavku popisa, počevši od -4, birajući drugu, osmu, četrnaestu stavku popisa i tako dalje. Isti selektor li:nth-child(6n-4) također se može napisati kao li:nth-child(6n+2) , bez korištenja negativne b varijable.

Nakon negativne varijable ili negativnog argumenta n mora slijediti pozitivna varijabla b. Kada argumentu n prethodi negativna varijabla a, tada varijabla b određuje koliko će visok broj biti dostignut. Na primjer, selektor li:nth-child(-3n+12) će odabrati svaku treću stavku popisa u prvih dvanaest stavki. Selektor li:nth-child(-n+9) će odabrati prvih devet stavki na popisu, budući da je varijabla a bez deklariranog broja zadana vrijednost -1.

:nth-child(n) i :nth-last-child(n)

S općim razumijevanjem kako brojevi i izrazi rade u pseudo-klasama, pogledajmo korisne pseudo-klase u kojima se ti brojevi i izrazi mogu koristiti, od kojih su prvi :nth-child(n) i :nth-last -dijete(n) . Ove pseudo-klase rade slično kao :first-child i :last-child, utoliko što ispituju i broje sve elemente u roditelju i odabiru samo određeni element. :nth-child(n) radi od početka stabla dokumenta, a :nth-last-child(n) radi od kraja stabla dokumenta.

Koristeći :nth-child(n) pseudo-klasu, pogledajmo selektor li:nth-child(3n). Definira svaku treću stavku popisa, tako da će retci 4 i 7 biti odabrani.

Li:nth-child(3n) (…)

• Ova će stavka biti odabrana
• Ova će stavka biti odabrana

Korištenje drugačijeg izraza u pseudoklasi :nth-child(n) proizvest će drugačiji odabir. Selektor li:nth-child(2n+3) , na primjer, definirat će svaku drugu stavku na popisu, počevši od treće. Kao rezultat toga, bit će odabrane stavke u recima 4 i 6.

Li:nth-child(2n+3) (...)

• Ova će stavka biti odabrana
• Ova će stavka biti odabrana

Ponovno mijenjanje izraza, ovaj put s negativnom vrijednošću, dat će novi izbor. Ovdje selektor li:nth-child(-n+4) specificira prve četiri stavke popisa, ostavljajući preostale stavke neodabrane, tako da će biti odabrani retci od 1 do 4.

Li:nth-child(-n+4) (...)

• Ova će stavka biti odabrana
• Ova će stavka biti odabrana
• Ova će stavka biti odabrana
• Ova će stavka biti odabrana

Dodavanje negativnog broja prije n ponovno mijenja odabir. Ovdje selektor li:nth-child(-2n+5) definira svaku drugu stavku popisa od prvih pet stavki, tako da će stavke u recima 2, 4 i 6 biti odabrane.

Li:nth-child(-2n+5) (...)

• Ova će stavka biti odabrana
• Ova će stavka biti odabrana
• Ova će stavka biti odabrana

Promjena pseudoklase :nth-child(n) u :nth-last-child(n) mijenja smjer brojanja tako da brojanje počinje od kraja stabla dokumenta. Selektor li:nth-last-child(3n+2), na primjer, specificira svaku treću stavku popisa, počevši od druge do zadnje, krećući se prema početku popisa. Ovdje su odabrane stavke popisa u recima 3 i 6.

Li:nth-last-child(3n+2) (...)

• Ova će stavka biti odabrana
• Ova će stavka biti odabrana

:nth-of-type(n) i :nth-last-of-type(n)

Pseudo-klase :nth-of-type(n) i :nth-last-of-type(n) vrlo su slične :nth-child(n) i :nth-last-child(n) , ali umjesto brojanje svakog elementa Unutar roditelja, pseudo-klase :nth-of-type(n) i :nth-last-of-type(n) broje samo elemente vlastitog tipa. Na primjer, kada se broje odlomci u članku, pseudoklase :nth-of-type(n) i :nth-last-of-type(n) preskočit će sve naslove

ili različite elemente koji nisu odlomci, dok će :nth-child(n) i :nth-last-child(n) brojati svaki element, bez obzira na njegovu vrstu, odabirući samo one koji odgovaraju elementu u navedenom selektoru. Osim toga, svi isti mogući izrazi koji se koriste u :nth-child(n) i :nth-last-child(n) također su dostupni u :nth-of-type(n) i :nth-last-of-type pseudo -klase (n) .

Korištenjem pseudo-klase :nth-of-type(n) u selektoru p:nth-of-type(3n), možemo definirati svaki treći odlomak u roditelju, bez obzira na druge povezane elemente unutar roditelja. Ovdje su odabrani odlomci u redovima 5 i 9.

P:nth-of-type(3n) (...)

...

Ovaj paragraf će biti odabran

...

Ovaj paragraf će biti odabran

Kao i kod pseudo-klasa :nth-child(n) i :nth-last-child(n), glavna razlika između :nth-of-type(n) i :nth-last-of-type(n) je da taj :nth-of-type(n) broji elemente od početka stabla dokumenta, a :nth-last-of-type(n) broji elemente od kraja stabla dokumenta.

Korištenjem pseudo-klase :nth-last-of-type(n) možemo napisati selektor p:nth-last-of-type(2n+1) koji specificira svaki drugi odlomak od kraja nadređenog elementa, počevši s posljednji paragraf. Ovdje su odabrani odlomci u redovima 4, 7 i 9.

P:nth-last-of-type(2n+1) (...)

...

Ovaj paragraf će biti odabran

...

Ovaj paragraf će biti odabran

Ovaj paragraf će biti odabran

Pseudo-klasa: cilj

Pseudo-klasa :target koristi se za stiliziranje elemenata kada vrijednost atributa id odgovara pokazivaču fragmenta URI-ja. Ovaj dio URI-ja prepoznaje se korištenjem hash znaka (#) i onoga što odmah slijedi nakon njega. Adresa http://example.com/index.html#hello uključuje pokazivač pozdrava. Kada odgovara vrijednosti id atributa elementa na stranici, na primjer,

Pseudoklasa:prazna

Pseudoklasa :empty omogućuje odabir elemenata koji ne sadrže djecu ili tekst. Komentari, upute za obradu i prazan tekst ne smatraju se djecom i neće se tako tretirati.

Korištenje div:empty pseudoklase će odrediti

nema djece ni teksta. Odabrano u nastavku

u retku 2 i 3 jer su potpuno prazni. Iako drugi

sadrži komentar, ne smatra se djetetom, stoga ostavlja

prazan. Prvi

sadrži tekst, treći sadrži jedan razmak, a posljednji sadrži podređeni element , pa su svi isključeni i nisu odabrani.

Div:prazno (...)

zdravo

Pseudoklasa: ne

Pseudoklasa :not(x) uzima argument i filtrira odabir koji će biti napravljen. Selektor p:not(.intro) koristi pseudoklasu :not za definiranje svakog odlomka bez uvodne klase. Element paragrafa je definiran na početku selektora, nakon čega slijedi :not(x) pseudoklasa. Unutar zagrada je selektor negacije, u ovom slučaju uvodna klasa.

U nastavku, selektori div:not(.awesome) i :not(div) koriste pseudoklasu :not(x). Selektor div:not(.awesome) definira bilo koji

bez klase awesome, dok selektor :not(div) navodi element koji nije

. Kao rezultat toga, odabran je

u retku 1, kao i dva odjeljka u recima 3 i 4. Jedina stavka koja nije odabrana je

s klasom super, jer nadilazi dvije pseudo-klase.

Div:not(.awesome) (...) :not(div) (...)

Ovaj div će biti odabran

...

Ovaj odjeljak će biti odabran Ovaj odjeljak će biti odabran

Primjer s pseudo-klasama

...

Broj	Igrač	Položaj	Visina	Težina
8	Marco Belinelli	G	6-5	195
5	Carlos Boozer	F	6-9	266

Tablica ( border-collapse: odvojeno; border-spacing: 0; width: 100%; ) th, td ( padding: 6px 15px; ) th ( background: #42444e; color: #fff; text-align: left; ) tr :first-child th:first-child ( border-top-left-radius: 6px; ) tr:first-child th:last-child ( border-top-right-radius: 6px; ) td ( border-right: 1px solid #c6c9cc; border-bottom: 1px solid #c6c9cc; ) td:first-child ( border-left: 1px solid #c6c9cc; ) tr:nth-child(even) td ( background: #eaeaed; ) tr:last- dijete td:prvo-dijete ( border-bottom-left-radius: 6px; ) tr: last-child td: last-child ( border-bottom-right-radius: 6px; )

Pregled pseudo-klasa

Primjer	Ime	Opis
poveznica	Veza pseudo-klase	Odabire poveznice koje korisnik nije pogledao.
a:posjetio	Veza pseudo-klase	Odabire poveznice koje je korisnik posjetio.
a: lebdjeti	Akcijska pseudoklasa	Odabire element kada korisnik prijeđe pokazivačem iznad njega.
a: aktivan	Akcijska pseudoklasa	Odabire element kada ga korisnik aktivira.
a: fokus	Akcijska pseudoklasa	Odabire element kada ga je korisnik učinio točkom pažnje.
unos: omogućeno	Državna pseudoklasa	Odabire element u dostupnom stanju.
unos: onemogućeno	Državna pseudoklasa	Odabire element u onemogućenom stanju putem atributa onemogućeno.
unos: provjereno	Državna pseudoklasa	Odabire potvrdni okvir ili radio gumb koji je označen.
unos: neodređeno	Državna pseudoklasa	Odabire potvrdni okvir ili radio gumb koji nije označen ili neoznačen, ostavljajući ga u nedefiniranom stanju.
li: prvo dijete	Strukturna pseudoklasa	Odabire prvi element u roditelju.
li:posljednje-dijete	Strukturna pseudoklasa	Odabire posljednji element u roditelju.
div:jedino-dijete	Strukturna pseudoklasa	Odabire jedan element u roditelju.
p:prvi-od-vrste	Strukturna pseudoklasa	Odabire prvi element svoje vrste u roditelju.
p:posljednji-od-vrste	Strukturna pseudoklasa	Odabire zadnji element svog tipa u roditelju.
img:samo-od-vrste	Strukturna pseudoklasa	Odabire jedini element svoje vrste u roditelju.
li:n-to dijete(2n+3)	Strukturna pseudoklasa	Odabire element koji odgovara zadanom broju ili izrazu, računajući sve elemente od početka stabla dokumenta.
li:n-to-posljednje-dijete(3n+2)	Strukturna pseudoklasa	Odabire element koji odgovara zadanom broju ili izrazu, računajući sve elemente s kraja stabla dokumenta.
p:nth-od-type(3n)	Strukturna pseudoklasa	Odabire element koji odgovara zadanom broju ili izrazu, računajući samo elemente te vrste od početka stabla dokumenta.
p:nth-last-of-type(2n+1)	Strukturna pseudoklasa	Odabire element koji odgovara zadanom broju ili izrazu, računajući samo elemente te vrste s kraja stabla dokumenta.
odjeljak: cilj	Pseudo-klasa: cilj	Odabire element čija vrijednost id atributa odgovara identifikatoru fragmenta URI-ja.
div:prazno	Pseudoklasa:prazna	Odabire element koji ne sadrži djecu ili tekst.
div:ne(.strašno)	Pseudoklasa: ne	Odabire element koji nije predstavljen deklariranim argumentom.

Pseudoelementi

Pseudoelementi su dinamički elementi koji ne postoje u stablu dokumenta, a kada se koriste sa selektorima, ti pseudoelementi stvaraju jedinstvene dijelove stranice koji se mogu stilizirati. Jedan važna točka Treba imati na umu da se samo jedan pseudoelement može koristiti u selektoru odjednom.

Pseudoelementi teksta

Prvi implementirani pseudoelementi bili su tekstualni pseudoelementi :first-letter i :first-line. Pseudoelement :first-letter navodi prvo slovo teksta unutar elementa, dok :first-line navodi prvi red teksta unutar elementa.

U demonstraciji ispod, prvo slovo odlomka s klasom alpha postavljeno je na veliku veličinu i boju fonta, kao i prvi redak odlomka s klasom bravo. Ovaj odabir se vrši pomoću pseudo-klasa :first-letter i :first-line text.

Alpha:prvo-slovo, .bravo:prvi-redak ( boja: #ff7b29; veličina fonta: 18px; )

Lorem ipsum dolor...

Cijeli broj eget enim...

Demonstracija pseudoelemenata teksta

Pseudoelementi generiraju sadržaj

Pseudoelementi :before i :after stvaraju nove ugrađene pseudoelemente samo unutar odabranog elementa. Najčešće se ti pseudoelementi koriste u kombinaciji sa svojstvom sadržaja za dodavanje manjih informacija na stranicu, no to nije uvijek slučaj. Dodatna upotreba ovih pseudo-elemenata može dodati komponente korisničkog sučelja na stranicu bez potrebe za zatrpavanjem dokumenta ne-semantičkim elementima.

Pseudoelement :before stvara pseudoelement prije ili ispred odabranog elementa, dok :after stvara pseudoelement iza ili iza odabranog elementa. Ti se pseudoelementi pojavljuju ugniježđeni unutar odabranog elementa, a ne izvan njega. U nastavku se pseudoelement :after koristi za prikaz vrijednosti atributa href veza u zagradama iza same veze. Ove informacije su korisne, ali u konačnici, ne podržava svaki preglednik ove pseudoelemente.

A:after ( boja: #9799a7; sadržaj: " (" attr(href) ")"; veličina fonta: 11px; )

Potražite na internetu Naučite kako izraditi web stranicu

Demonstracija pseudoelemenata generiranih sadržajem

Pseudoelement::odabir

Pseudoelement ::selection definira dio dokumenta koji je odabrao korisnik. Odabir se zatim može stilizirati, ali samo pomoću svojstava boja, pozadine, boje pozadine i sjene teksta. Vrijedno je napomenuti da se svojstvo pozadinske slike zanemaruje. Međutim, svojstvo stenografske pozadine može se koristiti za dodavanje boje, ali će sve slike biti zanemarene.

Dvotočka (:) i dvotočka (::)

Pseudo-element ::selection dodan je u CSS3 u pokušaju odvajanja pseudo-klasa od pseudo-elemenata korištenjem dvotočke koja je dodana pseudo-elementima. Srećom, većina će preglednika podržavati jednostruke i dvotočke vrijednosti za pseudoelemente, ali pseudoelement ::selection uvijek mora započeti dvostrukom dvotočkom.

Kada odaberete bilo koji tekst u demonstraciji ispod, pozadina postaje narančasta zahvaljujući pseudoelementu ::selection. Također pogledajte ::-moz-selection. Dodan je prefiks Mozilla kako bi se pružila bolja podrška za sve preglednike.

::-moz-selection ( pozadina: #ff7b29; ) ::selection ( pozadina: #ff7b29; )

Demonstracija pseudoelemenata

nastavi čitati

Strelica ( pozadina: #2db34a; boja: #fff; prikaz: inline-block; visina: 30px; visina linije: 30px; ispuna: 0 12px; pozicija: relativna; tekstualni ukras: ništa; ) .arrow:before, . strelica:nakon (sadržaj: ""; visina: 0; pozicija: apsolutna; širina: 0; ) .strelica:prije ( border-bottom: 15px solid #2db34a; border-left: 15px solid transparent; border-top: 15px solid #2db34a; lijevo: -15px; ) .arrow:after ( border-bottom: 15px solid transparent; border-left: 15px solid #2db34a; border-top: 15px solid transparent; right: -15px; ) .arrow:hover ( pozadina: #ff7b29; ) .arrow:hover:before ( border-bottom: 15px solid #ff7b29; border-top: 15px solid #ff7b29; ) .arrow:hover:after ( border-left: 15px solid #ff7b29; )

Podrška za odabir preglednika

Iako ovi selektori nude različite mogućnosti i mogućnost da s njima radite neke doista nevjerojatne stvari koristeći CSS, ponekad pate od slabe podrške preglednika. Prije nego učinite nešto previše kritično, provjerite birače koje želite koristiti u najpopularnijim preglednicima i odlučite odgovaraju li vam ili ne.

CSS3.info nudi alat za testiranje CSS3 selektora koji će vas obavijestiti koje selektore podržava preglednik. Također je dobra ideja izravno provjeriti podršku vašeg preglednika.

U časopisu Smashing

Razumijevanje izraza pseudoklase nth-child na SitePointu

Kroćenje naprednih CSS selektora u časopisu Smashing

CSS selektori definirati elemente na koje se primjenjuje skup CSS pravila.

Osnovni selektori

Univerzalni selektor Odabire sve elemente. Po izboru, može se ograničiti na određeni prostor imena ili na sve prostore imena.
Sintaksa:* ns |* *|*
Primjer:* će odgovarati svim elementima dokumenta. Birač tipa Odabire sve elemente koji imaju dani naziv čvora.
Sintaksa: ime elementa
Primjer: unos će odgovarati bilo kojem elementu koristi se za stvaranje interaktivnih kontrola za web-bazirane obrasce kako bi se prihvatili podaci od korisnika; dostupan je veliki izbor tipova ulaznih podataka i kontrolnih widgeta, ovisno o uređaju i korisničkom agentu. "> element. Birač klase Odabire sve elemente koji imaju zadani atribut klase.
Sintaksa:. ime klase
Primjer:.index će odgovarati bilo kojem elementu koji ima klasu "index". ID birač Odabire element na temelju vrijednosti njegovog ID atributa. U dokumentu bi trebao postojati samo jedan element s danim ID-om.
Sintaksa:# ime
Primjer:#toc će odgovarati elementu koji ima ID "toc". Selektor atributa Odabire sve elemente koji imaju dani atribut.
Sintaksa:[ attr ] [ attr = vrijednost ] [ attr ~= vrijednost ] [ attr |= vrijednost ] [ attr ^= vrijednost ] [ attr $= vrijednost ] [ attr *= vrijednost ]
Primjer: odgovarat će svim elementima koji imaju postavljen atribut autoplay (na bilo koju vrijednost).

Selektori grupiranja

Popis birača , je metoda grupiranja, ona odabire sve podudarne čvorove.
Sintaksa: A, B
Primjer: div, span će odgovarati oba i ) je generički spremnik za sadržaj protoka. Nema utjecaja na sadržaj ili izgled dok se ne stilizira pomoću CSS-a.">

elementi.

Kombinatori

Kombinator potomaka (prostorni) kombinator odabire čvorove koji su potomci prvog elementa.
Sintaksa: A B
Primjer: div span će odgovarati svim elementima koji se nalaze unutar a ) je generički spremnik za sadržaj protoka. Nema utjecaja na sadržaj ili izgled dok se ne stilizira pomoću CSS-a.">

element. Kombinator dijete > kombinator odabire čvorove koji su izravna djeca prvog elementa.
Sintaksa: A>B
Primjer: ul > li će odgovarati svim elementima koji se koriste za predstavljanje stavke na popisu.">

elementi koji su ugniježđeni izravno unutar elementa predstavljaju neuređeni popis stavki, obično prikazan kao popis s grafičkim oznakama.">

element. Opći sibling combinator ~ combinator odabire siblings. To znači da drugi element slijedi prvi (iako ne nužno odmah), a oba dijele istog roditelja.
Sintaksa: A~B
Primjer: p ~ raspon će odgovarati svim elementima koji slijede element predstavlja odlomak.">

, odmah ili ne. Kombinator susjednih sistara Kombinator + odabire susjedne siblings. To znači da drugi element izravno slijedi prvi i da oba dijele istog roditelja.
Sintaksa: A+B
Primjer: h2 + p će odgovarati svim elementima koji predstavljaju odlomak.">

elementi koji izravno slijede

. Kombinator stupaca The || kombinator odabire čvorove koji pripadaju stupcu.
Sintaksa: A || B
Primjer: stupac || td će odgovarati svim elementima koji definiraju ćeliju tablice koja sadrži podatke. Sudjeluje u modelu tablice."> Elementi koji pripadaju opsegu elementa definiraju stupac unutar tablice i koriste se za definiranje zajedničke semantike na svim zajedničkim ćelijama. Obično se nalazi unutar a element."> .

Pseudo

Pseudo klase: pseudo dopuštaju odabir elemenata na temelju informacija o stanju koje nisu sadržane u stablu dokumenta.
Primjer: a:visited će odgovarati svim elementima (ili elementu sidra), sa svojim atributom href, stvara hipervezu na web stranice, datoteke, adrese e-pošte, lokacije na istoj stranici ili bilo što drugo što URL može adresirati."> elemente koji su posjetio korisnik. Pseudo elementi:: pseudo predstavljaju entitete koji nisu uključeni u HTML.
Primjer: p::first-line će odgovarati prvom retku svih elemenata koji predstavljaju odlomak.">

elementi.

Tehnički podaci

Specifikacija	Status	Komentar

Selektor je dio CSS pravila koji pregledniku govori koji će element (ili elementi) na web stranici biti stiliziran.

Pojam selektor može se odnositi na jednostavan selektor, složeni selektor, složeni selektor ili popis selektora.

DO jednostavni selektori odnositi se:

• selektor tipa
• univerzalni selektor
• selektori atributa
• birač identifikatora
• selektor razreda
• pseudo klase

CSS birač	Primjer	Opis	CSS
.razred	.moj razred	Odabire sve elemente s klasom myClass (class="myClass").	1
#iskaznica	#glavni	Odabire element s ID-om main (id="main").	1
	*	Odabir svih elemenata.	2
element	raspon	Odabir svih elemenata .	1
element, element	div,span	Odabir svih elemenata i svi elementi .	1
[atribut]		Odabire sve elemente s atributom naslova.	2
[atribut="vrijednost"]		Odabire sve elemente s atributom title čija vrijednost točno odgovara vrijednosti navedenoj u selektoru (title="cost"). !}	2
[atribut~="vrijednost"]		Odabire sve elemente s atributom title čija vrijednost (bilo gdje) sadrži podniz (kao jednu riječ) "one" (title="one and two)"). !}	2
[atribut|="vrijednost"]		Odabire sve elemente s atributom lang čija vrijednost počinje s "ru".	2
[atribut^="vrijednost"]	a	Odabir svakog elementa s href atributom čija vrijednost počinje s "https".	3
[atribut$="vrijednost"]		Odabire sve elemente s atributom src čija vrijednost završava na ".png" (src="some_img.png").	3
[atribut*="vrijednost"]		Odabire sve elemente s atributom title čija vrijednost (bilo gdje) sadrži podniz (kao jednu riječ ili njezin dio) "one" (title="one and two)"). !}	3

Kompozitni selektor je niz jednostavnih selektora koji nisu odvojeni kombinatorima, tj. iza jednog selektora odmah slijedi sljedeći. Odabire element koji odgovara svim jednostavnim selektorima koje sadrži. Selektor vrste ili univerzalni selektor uključen u složeni selektor mora se pojaviti prvi u ovom nizu. U složenom selektoru dopušten je samo jedan selektor tipa ili univerzalni selektor.

Span.className p.className1.className2#someId:hover

Složen selektor je niz selektora koji su odvojeni kombinatorima.

Popis selektora su selektori odvojeni zarezima.

Kombinatori

Za kombiniranje jednostavnih CSS selektora, kombinatori se koriste za označavanje odnosa između jednostavnih selektora. Postoji nekoliko različitih kombinatora u CSS2, i jedan dodatni u CSS3, kada ih koristite oni mijenjaju prirodu samog selektora.

Pseudo-klase

Pseudoklasa je jednostavan selektor koji se koristi za odabir nečega što se ne može odabrati drugim selektorima ili se može odabrati na prilično težak način.

Pseudoklasa	Primjer	Opis	CSS
:veza	poveznica	Odabire sve neposjećene veze.	1
:posjećeno	a:posjetio	Odaberite sve posjećene poveznice.	1
:aktivan	a: aktivan	Odabir aktivne veze.	1
:lebdjeti	a: lebdjeti	Odabir poveznice kada lebdite kursorom miša.	1
:usredotočenost	unos: fokus	Izbor elementa , koji je u fokusu.	2
:prvo dijete	p: prvo dijete	Odabir svakog elementa Koja je prvo dijete svog roditelja.	2
:lang(jezik)	p:lang(ru)	Odabir svakog elementa S atributom lang čija vrijednost počinje s "ru".	2
:prvi-od-vrste	p:prvi-od-vrste	Odabir svakog elementa Što je prvi od elemenata	3
:posljednji-od-vrste	p:posljednji-od-vrste	Odabir svakog elementa Što je posljednji od elemenata Njegov nadređeni element.	3
:samo-od-vrste	p:samo-od-vrste	Odabir svakog elementa Što je jedini element Njegov nadređeni element.	3
:jedino dijete	p:jedino-dijete	Odabir svakog elementa Koji je jedini podređeni element svog nadređenog elementa.	3
:n-to dijete(n)	p:n-to dijete(2)	Odabir svakog elementa Njegov nadređeni element.	3
:n-to-zadnje-dijete(n)	p:nth-last-child(2)	Odabir svakog elementa Što je drugo dijete svog nadređenog elementa, računajući od posljednjeg djeteta.	3
:nth-of-type(n)	p:nth-od-vrste(2)	Odabir svakog elementa Što je drugo dijete Njegov nadređeni element.	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	Odabir svakog elementa Što je drugo dijete Njegov nadređeni element, računajući od posljednjeg podređenog elementa.	3
	3
:ne(selektor)	:ne(p)	Odabir svih elemenata osim elementa .	3

Pseudoelementi

Pseudoelement je virtualni element koji ne postoji eksplicitno u stablu elemenata dokumenta. Pseudoelementi se koriste za odabir dijelova elementa koji se ne mogu odabrati pomoću drugih selektora, kao i za stiliziranje dijelova elementa umjesto cijelog elementa.

CSS (kaskadni stilski listovi) je stilski jezik koji vam omogućuje da priložite stil (kao što su fontovi i boje) strukturiranim dokumentima (kao što su HTML dokumenti i XML aplikacije). CSS stilovi obično se koriste za stvaranje i stiliziranje elemenata web stranica i korisničkih sučelja napisanih u HTML-u i XHTML-u, ali se također mogu primijeniti na bilo koju vrstu XML dokumenta, uključujući XML, SVG i XUL. Odvajanjem stila prezentacije dokumenta od sadržaja dokumenta, CSS olakšava izradu web stranica i održavanje web stranica.

CSS podržava stilske listove specifične za medije kako bi autori mogli prilagoditi prezentaciju svojih dokumenata vizualni preglednici, slušni uređaji, pisači, brajevi uređaji, ručni uređaji itd.

Kaskadni listovi stilova opisuju pravila za oblikovanje elemenata pomoću svojstava i prihvatljive vrijednosti ova svojstva. Za svaki element možete koristiti ograničeni skup svojstava; druga svojstva neće imati nikakav učinak na njega.

Deklaracija stila sastoji se od dva dijela: selektor I oglasi. U HTML-u nazivi elemenata ne razlikuju velika i mala slova, tako da "h1" funkcionira isto kao i "H1". Deklaracija se sastoji od dva dijela: naziva svojstva (na primjer, boja) i vrijednosti svojstva (siva). Selektor govori pregledniku koji element treba formatirati, a blok deklaracije (kod u vitičastim zagradama) navodi naredbe za oblikovanje - svojstva i njihove vrijednosti.

Riža. 1. Struktura oglasa

Iako navedeni primjer samo pokušava utjecati na nekoliko svojstava potrebnih za iscrtavanje HTML dokumenta, on se sam po sebi kvalificira kao lista stilova. Kada se kombinira s drugim listovima stilova (jedna temeljna značajka CSS-a je da se listovi stilova kombiniraju), pravilo će odrediti konačnu prezentaciju dokumenta.

Vrste kaskadnih stilskih listova i njihove specifičnosti

1. Vrste stilskih listova

1.1. Vanjski stilski list

Vanjski stilski list je tekstualna datoteka s nastavkom .css, koja sadrži skup CSS stilova za elemente. Datoteka se stvara u uređivaču koda, baš kao i HTML stranica. Datoteka može sadržavati samo stilove, bez HTML označavanja. Vanjski stilski list povezan je s web stranicom pomoću oznake , koji se nalazi unutar odjeljka . Ovi stilovi funkcioniraju za sve stranice web-mjesta.

Možete priložiti više listova stilova svakoj web stranici dodavanjem više oznaka uzastopno , označavajući svrhu ovog lista stilova u atributu medijske oznake. rel="stylesheet" specificira vrstu veze (veza na stilsku tablicu).

Atribut type="text/css" nije potreban prema HTML5 standardu, pa se može izostaviti. Ako atribut nedostaje, zadana vrijednost je type="text/css" .

1.2. Unutarnji stilovi

Unutarnji stilovi ugrađen u odjeljak HTML dokument i definirani su unutar oznake. Unutarnji stilovi imaju prednost nad vanjskim, ali su inferiorni u odnosu na ugrađene stilove (određene atributom style).

...



1.3. Ugrađeni stilovi

Kada pišemo umetnuti stilovi, pišemo CSS kod u HTML datoteku, izravno unutar oznake elementa pomoću atributa style:

Obratite pažnju na ovaj tekst.

Takvi stilovi utječu samo na element za koji su postavljeni.

1.4. pravilo @uvoza

pravilo @uvoza Omogućuje učitavanje vanjskih listova stilova. Da bi direktiva @import radila, mora se pojaviti u listu stilova (vanjskoj ili internoj) prije svih ostalih pravila:

Pravilo @import također se koristi za uključivanje web fontova:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Vrste selektora

Selektori predstavljaju strukturu web stranice. Oni pomažu stvoriti pravila za oblikovanje elemenata web stranice. Selektori mogu biti elementi, njihove klase i identifikatori, kao i pseudoklase i pseudoelementi.

2.1. Univerzalni selektor

Odgovara bilo kojem HTML elementu. Na primjer, * (margina: 0;) će poništiti margine za sve elemente stranice. Selektor se također može koristiti u kombinaciji s pseudo-klasom ili pseudo-elementom: *:after (CSS stilovi), *:checked (CSS stilovi) .

2.2. Selektor elementa

Selektori elemenata omogućuju formatiranje svih elemenata ove vrste na svim stranicama stranice. Na primjer, h1 (font-family: Lobster, cursive;) će postaviti opći stil oblikovanja za sve h1 naslove.

2.3. Izbornik razreda

Birači klasa omogućuju vam postavljanje stilova za jedan ili više elemenata s istim nazivom klase, postavljenih na različitim mjestima na stranici ili na različitim stranicama web mjesta. Na primjer, da biste stvorili naslov s klasom naslova, morate dodati atribut klase s vrijednošću naslov u početnu oznaku

i postavite stil za navedenu klasu. Stilovi stvoreni pomoću klase mogu se primijeniti na druge elemente, ne nužno te vrste.

.naslov (transformacija teksta: velika slova; boja: svijetloplava; )

Ako element ima više atributa klase, njihove vrijednosti su spojene razmacima.

Upute za korištenje osobnog računala

2.4. ID birač

Selektor ID-a omogućuje vam formatiranje jedan specifični element. ID vrijednost mora biti jedinstvena, može se pojaviti samo jednom na jednoj stranici i mora sadržavati barem jedan znak. Vrijednost ne smije sadržavati razmake.

Ne postoje nikakva druga ograničenja u obliku koji id može imati; posebno, identifikatori mogu biti svi brojevi, počinjati brojem, počinjati donjom crtom, imati samo interpunkcijske znakove itd.

Jedinstveni ID elementa može se koristiti u razne svrhe, uključujući kao način upućivanja na određene dijelove dokumenta pomoću ID-ova fragmenata, kao način ciljanja elementa prilikom skriptiranja i kao način stiliziranja određenog elementa iz CSS-a .

#sidebar (širina: 300px; float: lijevo;)

2.5. Selektor potomaka

Selektori potomaka primjenjuju stilove na elemente unutar elementa spremnika. Na primjer, ul li (transformacija teksta: velika slova;) - odabrat će sve li elemente koji su djeca svih ul elemenata.

Ako želite oblikovati potomke određenog elementa, morate tom elementu dati klasu stila:

p.prvi a (boja: zelena;) — ovaj stil primijenit će se na sve veze potomke odlomka s prvom klasom ;

p .first a (boja: zelena;) - ako dodate razmak, stilizirat će se veze unutar bilo koje oznake .first klase koja je dijete elementa

First a (boja: zelena;) - ovaj stil će se primijeniti na bilo koju vezu koja se nalazi unutar drugog elementa, označenog class.first .

2.6. Izbornik djeteta

Element dijete izravno je dijete elementa koji ga sadrži. Jedan element može imati nekoliko podređenih elemenata, ali svaki element može imati samo jedan nadređeni element. Selektor djeteta omogućuje vam primjenu stilova samo ako podređeni element dolazi odmah nakon nadređenog elementa i nema drugih elemenata između njih, odnosno podređeni element nije ugniježđen ni u što drugo.
Na primjer, p > strong će odabrati sve jake elemente koji su djeca elementa p.

2.7. Sestra selektor

Sestrinstvo se javlja između elemenata koji dijele zajedničkog roditelja. Srodni selektori omogućuju odabir elemenata iz grupe elemenata iste razine.

h1 + p - odabrat će sve prve paragrafe odmah iza bilo koje oznake

bez utjecaja na preostale paragrafe;

h1 ~ p - odabrat će sve paragrafe koji su sestrinski bilo kojem h1 naslovu i odmah nakon njega.

2.8. Selektor atributa

Selektori atributa biraju elemente na temelju naziva atributa ili vrijednosti atributa:

[atribut] - svi elementi koji sadrže navedeni atribut - svi elementi za koje je naveden atribut alt;

selektor[atribut] - elementi ovog tipa koji sadrže navedeni atribut, img - samo slike za koje je naveden atribut alt;

selector[attribute="value"] - elementi ove vrste koji sadrže navedeni atribut s određenom vrijednošću, img - sve slike čiji naslov sadrži riječ cvijet;

selektor[atribut~="vrijednost"] - elementi koji djelomično sadrže zadanu vrijednost, na primjer, ako je nekoliko klasa navedeno za element odvojen razmakom, p - paragrafi čiji naziv klase sadrži značajku;

selektor[atribut|="vrijednost"] - elementi čiji popis vrijednosti atributa počinje navedenom riječju, p - paragrafi čije je ime klase značajka ili počinje značajkom;

selektor[atribut^="vrijednost"] - elementi čija vrijednost atributa počinje navedenom vrijednošću, a - sve veze koje počinju s http:// ;

selektor[attribute$="value"] - elementi čija vrijednost atributa završava navedenom vrijednošću, img - sve slike u png formatu;

selector[attribute*="value"] - elementi čija vrijednost atributa sadrži navedenu riječ bilo gdje, a - sve veze čije ime sadrži book .

2.9. Selektor pseudo-klasa

Pseudo-klase su klase koje zapravo nisu priložene HTML oznakama. Omogućuju vam da primijenite CSS pravila na elemente kada se događaj dogodi ili poštuje određeno pravilo. Pseudoklase karakteriziraju elemente sa sljedećim svojstvima:

:hover - bilo koji element nad kojim se nalazi kursor miša;

:focus - interaktivni element koji je navigiran pomoću tipkovnice ili aktiviran pomoću miša;

:active - element koji je aktivirao korisnik;

:valid - polja obrasca čiji je sadržaj provjeren u pregledniku radi usklađenosti s navedenim tipom podataka;

:invalid — polja obrasca čiji sadržaj ne odgovara navedenom tipu podataka;

:enabled - sva aktivna polja obrasca;

:onemogućeno — blokirana polja obrasca, tj. u neaktivnom stanju;

:in-range - polja obrasca čije su vrijednosti u navedenom rasponu;

:out-of-range - polja obrasca čije vrijednosti nisu unutar navedenog raspona;

:lang() - elementi s tekstom na navedenom jeziku;

:not(selektor) - elementi koji ne sadrže navedeni selektor - klasa, identifikator, ime ili tip polja obrasca - :not() ;

:target je element sa simbolom # koji se spominje u dokumentu;

:checked — odabrani (korisnički odabrani) elementi obrasca.

2.10. Strukturni selektor pseudo-klasa

Strukturalne pseudoklase odabiru podređene elemente prema parametru navedenom u zagradama:

:nth-child(odd) - neparni podređeni elementi;

:nth-child(even) - parni elementi djeteta;

:nth-child(3n) - svaki treći element među djecom;

:nth-child(3n+2) - odabire svaki treći element, počevši od drugog djeteta (+2) ;

:nth-child(n+2) - odabire sve elemente počevši od drugog;

:nth-child(3) - odabire treći element djeteta;

:nth-last-child() - na popisu podređenih elemenata odabire element s navedenom lokacijom, slično :nth-child() , ali počevši od posljednjeg, u suprotnom smjeru;

:first-child - omogućuje stiliziranje samo prvog podređenog elementa oznake;

:last-child - omogućuje formatiranje posljednjeg podređenog elementa oznake;

:only-child - odabire element koji je jedini podređeni element;

:empty - odabire elemente koji nemaju djecu;

:root - odabire element koji je korijen dokumenta - html element.

2.11. Selektor pseudo-klasa strukturnog tipa

Označava određenu vrstu podređene oznake:

:nth-of-type() - odabire elemente slične :nth-child() , ali uzima u obzir samo tip elementa;

:first-of-type - odabire prvo dijete zadanog tipa;

:last-of-type - odabire zadnji element ove vrste;

:nth-last-of-type() - odabire element zadanog tipa u popisu elemenata prema navedenoj lokaciji, počevši od kraja;

:only-of-type - odabire jedini element navedene vrste među podređenim elementima nadređenog elementa.

2.12. Selektor pseudo elemenata

Pseudoelementi se koriste za dodavanje sadržaja koji se generira pomoću svojstva sadržaja:

:prvo-slovo - odabire prvo slovo svakog odlomka, odnosi se samo na elemente bloka;

:first-line - odabire prvi redak teksta elementa, primjenjuje se samo na elemente bloka;

:before - umeće generirani sadržaj prije elementa;

:after - dodaje generirani sadržaj nakon elementa.

3. Kombinacija selektora

Da biste točnije odabrali elemente za oblikovanje, možete koristiti kombinacije birača:

img:nth-of-type(even) - odabrat će sve slike s parnim brojevima čiji alternativni tekst sadrži riječ css.

4. Selektori grupiranja

Isti stil može se primijeniti na više elemenata u isto vrijeme. Da biste to učinili, trebate navesti potrebne selektore na lijevoj strani deklaracije, odvojene zarezima:

H1, h2, p, raspon ( boja: rajčica; pozadina: bijela; )

5. Nasljeđivanje i kaskada

Nasljeđivanje i kaskada dva su temeljna pojma u CSS-u koji su usko povezani. Nasljeđivanje je mjesto gdje elementi nasljeđuju svojstva od svog roditelja (elementa koji ih sadrži). Kaskada se očituje u tome kako se različite vrste listova stilova primjenjuju na dokument i kako se proturječna pravila međusobno nadjačavaju.

5.1. Nasljedstvo

Nasljedstvo je mehanizam kojim se određena svojstva prenose s pretka na njegove potomke. CSS specifikacija dopušta nasljeđivanje svojstava povezanih s tekstualnim sadržajem stranice, kao što su boja, font, razmak između slova, visina retka, stil popisa, poravnanje teksta, uvlačenje teksta, transformacija teksta, vidljivost, bijela -razmak i razmak između riječi. U mnogim je slučajevima to zgodno jer ne morate postavljati veličinu fonta i obitelj fontova za svaki element na web stranici.

Svojstva koja se odnose na oblikovanje bloka se ne nasljeđuju. To su pozadina, obrub, prikaz, lebdenje i brisanje, visina i širina, margina, minimalna-maksimalna visina i širina, obris, preljev, ispuna, položaj, ukras teksta, okomito poravnanje i z-indeks.

Prisilno nasljeđivanje

Pomoću ključna riječ inherit može prisiliti element da naslijedi bilo koju vrijednost svojstva svog nadređenog elementa. Ovo funkcionira čak i za svojstva koja nisu naslijeđena prema zadanim postavkama.

Kako se postavljaju i funkcioniraju CSS stilovi

1) Stilovi se mogu naslijediti od nadređenog elementa (naslijeđena svojstva ili korištenjem vrijednosti nasljeđivanja);

2) Stilovi koji se nalaze u tablici stilova ispod nadjačavaju stilove koji se nalaze u gornjoj tablici;

3) Stilovi iz različitih izvora mogu se primijeniti na jedan element. Možete provjeriti koji se stilovi primjenjuju u modu razvojnog programera preglednika. Da biste to učinili, kliknite na element desni klik mišem i odaberite “View code” (ili nešto slično). Desni stupac će navesti sva svojstva koja su postavljena na ovaj element ili naslijeđena od nadređenog elementa, zajedno sa stilskim datotekama u kojima su navedena, i rednim brojem retka koda.


Riža. 2. Način rada za razvojne programere u Google preglednik Krom

4) Kada definirate stil, možete koristiti bilo koju kombinaciju selektora - selektor elementa, pseudoklasu elementa, klasu ili identifikator elementa.

div (border: 1px solid #eee;) #wrap (width: 500px;).box (float: left;).clear (clear: both;)

5.2. Kaskada

Kaskadno je mehanizam koji kontrolira konačni rezultat u situaciji kada se različita CSS pravila primjenjuju na isti element. Postoje tri kriterija koji određuju redoslijed primjene svojstava—!važno pravilo, specifičnost i redoslijed kojim su uključeni listovi stilova.

Pravilo!važno

Težina pravila može se odrediti pomoću ključne riječi!important, koja se dodaje odmah nakon vrijednosti svojstva, na primjer, span (font-weight: bold!important;) . Pravilo se mora staviti na kraj deklaracije ispred zagrade, bez razmaka. Takva će objava imati prednost nad svim ostalim pravilima. Ovo pravilo vam omogućuje da poništite vrijednost svojstva i postavite novu za element iz grupe elemenata u slučaju kada ne postoji izravan pristup datoteci stila.

Specifičnost

Za svako pravilo preglednik izračunava selektorsku specifičnost, a ako element ima proturječne deklaracije svojstava, u obzir se uzima pravilo koje ima najviše specifičnosti. Vrijednost specifičnosti ima četiri dijela: 0, 0, 0, 0. Specifičnost selektora definirana je na sljedeći način:

za id se dodaje 0, 1, 0, 0;
za klasu 0, 0, 1, dodaje se 0;
za svaki element i pseudoelement dodaje se 0, 0, 0, 1;
za inline stil dodan izravno elementu - 1, 0, 0, 0 ;
Univerzalni selektor nema specifičnosti.

H1 (boja: svijetloplava;) /*specifičnost 0, 0, 0, 1*/ em (boja: srebrna;) /*specifičnost 0, 0, 0, 1*/ h1 em (boja: zlatna;) /*specifičnost: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (boja: plava;) /*specifičnost: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .bočna traka (boja: siva;) /*specifičnost 0, 0, 1, 0 */ #bočna traka (boja: narančasta;) /*specifičnost 0, 1, 0, 0*/ li#bočna traka (boja: aqua;) /*specifičnost: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

Kao rezultat toga, na element će se primijeniti ona pravila koja su specifičnija. Na primjer, ako element ima dvije specifičnosti s vrijednostima 0, 0, 0, 2 i 0, 1, 0, 1, tada će drugo pravilo pobijediti.

Redoslijed povezanih tablica

Možete stvoriti više vanjskih listova stilova i povezati ih s jednom web stranicom. Ako se različite vrijednosti svojstava za jedan element nalaze u različitim tablicama, tada će se kao rezultat toga na element primijeniti pravilo koje se nalazi u dolje navedenom listu stilova.