Što je selektor u css-u je opis tog elementa ili grupe elemenata koji govori pregledniku koji element odabrati da na njega primijeni stil. Pogledajmo osnovne CSS selektore.

1) .X

CSS selektor po klasi X. Razlika između id-a i klase je u tome što nekoliko elemenata na stranici može imati istu klasu, ali je id uvijek jedinstven. Klase bi se trebale koristiti za primjenu istog stila na više elemenata.

• Krom
• Firefox
• Safari
• Opera

2) #X

CSS id birač. Znak hash ispred CSS selektora X odabire element čiji je id = X. Kada dodjeljujete stilove prema id-u, uvijek morate zapamtiti da on mora biti jedinstven - samo jedan takav id bi trebao biti na stranici. Stoga je bolje koristiti selektore prema klasama, kombinacijama klasa ili imenima oznaka. Međutim, id selektori izvrsni su za automatizirano testiranje jer... Omogućuju vam da odmah stupite u interakciju s točno željenim elementom i imate povjerenje da postoji samo jedan takav na stranici.

Koji preglednici su podržani:
• Krom
• Firefox
• Safari
• Opera

3) *

CSS selektor za sve elemente. Simbol zvjezdice odabire sve elemente koji se nalaze na stranici. Mnogi ga programeri koriste za uklanjanje (nuliranje) vrijednosti margine i ispune svih elemenata stranice. Međutim, u praksi je bolje to ne činiti jer ovaj CSS selektor prilično opterećuje preglednik pretražujući sve elemente na stranici.

Simbol * također se može koristiti za odabir svih podređenih elemenata:

#zaglavlje * (obrub: 5px jednobojno sivo; )

Ovaj primjer odabire sve potomke (potomke) elementa s #header. Ali uvijek je vrijedno zapamtiti da je ovaj birač prilično težak za preglednik.

Koji preglednici su podržani:
• Krom
• Firefox
• Safari
• Opera

4) X

Selektor vrste CSS-a. Kako odabrati sve elemente istog tipa ako nemaju niti id niti klase? Vrijedno je koristiti selektor tipa CSS elementa. Na primjer, za odabir svih poredanih popisa na stranici upotrijebite ol(...) kao što je prikazano gore.

Koji preglednici su podržani:
• Krom
• Firefox
• Safari
• Opera

5) X Y

Selektor CSS potomaka ili Selektor CSS podređenog elementa se najčešće koristi. Koristi se ako je potrebno odabrati elemente određenog tipa iz više podređenih elemenata. Na primjer, trebate odabrati sve poveznice koje se nalaze u li elementu. U ovom slučaju koristite ovaj selektor. Kada koristite lance takvih selektora, uvijek se zapitajte je li moguće odabrati ovog elementa koristite još kraći niz selektora.

Koji preglednici su podržani:
• Krom
• Firefox
• Safari
• Opera

6) X + Y

Selektor susjednog elementa bira samo element tipa Y koji dolazi odmah nakon elementa X. U ovom slučaju, svaki paragraf odmah nakon svakog div elementa dobit će posebnu vrstu i veličinu fonta.

Koji preglednici su podržani:
• IE7+
• Firefox
• Krom
• Safari
• Krom

7) X > Y

Selektor CSS potomaka. Razlika između selektora X Y i X > Y je u tome što će predmetni CSS selektor odabrati samo neposrednu djecu elemenata (izabrat će samo izravne potomke). npr.:

CSS birač #content > ul odabrat će samo ul koji je izravno dijete diva s id="container" . Neće odabrati ul koji je dijete prvog li. Ovo je prilično brz CSS selektor.

Koji preglednici su podržani:
• Krom
• Firefox
• Safari
• Opera

8) X ~ Y

Selektor sestrinskih (subling) elemenata manje strog od X + Y. Odabrat će ne samo prvi, već i sve ostale p elemente koji slijede ol.

Koji preglednici su podržani:
• Krom
• Firefox
• Safari
• Opera

Pseudo-klasa: veza koristi se za odabir svih poveznica koje još niste kliknuli. Ako trebate primijeniti određeni stil na već posjećene veze, upotrijebite pseudo-klasa:posjećeno.

Koji preglednici su podržani:
• Krom
• Firefox
• Safari
• Opera

10) X

Selektor CSS atributa. Ovaj primjer odabire samo one veze koje imaju atribut naslova.

Koji preglednici su podržani:
• Krom
• Firefox
• Safari
• Opera

11) X

Koji preglednici su podržani:
• Krom
• Firefox
• Safari
• Opera

12) X

Zvjezdica znači da vrijednost koju tražite mora biti negdje u atributu (bilo koji dio atributa href). Na taj način bit će odabrani i linkovi sa https://www..stijit.. Zlatna boja bit će primijenjena na sve odabrane linkove.

Koji preglednici su podržani:
• Krom
• Firefox
• Safari
• Opera

13) X

Neke stranice imaju male ikone strelica pored poveznica na druge stranice koje označavaju da su vanjske veze. Karat “^” je simbol za označavanje početka retka. Dakle, da odaberete sve oznake čiji href počinje s http, morate koristiti CSS selektor s karat, kao što je prikazano u gornjem primjeru.

Koji preglednici su podržani:
• Krom
• Firefox
• Safari
• Opera

14) X

Ovdje se koristi regularni izraz i simbol $ za označavanje kraja retka. U u ovom primjeru tražimo sve linkove koji upućuju na slike s ekstenzijom .jpg.

Koji preglednici su podržani:
• Krom
• Firefox
• Safari
• Opera

15) X

Ovdje se prijavljujemo Birač prilagođenih CSS atributa. Svakoj vezi dodajemo vlastiti atribut data-filetype:

veza

Sada, pomoću gornjeg CSS selektora, možete odabrati sve veze koje vode do slika s bilo kojim proširenjem.

Koji preglednici su podržani:
• Krom
• Firefox
• Safari
• Opera

16) X

Tilda (~) omogućuje vam da označite određeni atribut s popisa atributa odvojenih razmakom. Možete napisati naš vlastiti data-info atribut, u kojem možete navesti nekoliko ključnih riječi odvojenih razmakom. Na taj način možete označiti da je poveznica vanjska i da vodi do slike.

veza

Pomoću ove tehnike možemo odabrati elemente s kombinacijama atributa koji su nam potrebni:

/* Odaberite element čiji data-info atribut sadrži vrijednost external */ a ( boja: zelena; ) /* Odaberite element čiji data-info atribut sadrži vrijednost image */ a ( border: 2px isprekidana crna; )

Koji preglednici su podržani:
• Krom
• Firefox
• Safari
• Opera

17) X: označeno

Ova pseudoklasa samo ističe elemente kao što su potvrdni okvir ili radio gumb, i to samo kada su već u označenom stanju.

Koji preglednici su podržani:
• Krom
• Firefox
• Safari
• Opera

18) X: poslije

Pseudoklase :before i :after vrlo su korisne - one stvaraju sadržaj prije i poslije odabranog elementa.

Clearfix:after ( sadržaj: ""; prikaz: blok; jasno: oboje; vidljivost: skriveno; veličina fonta: 0; visina: 0; ) .clearfix ( *display: inline-block; _height: 1%; )

Ovdje, korištenjem pseudo-class:after, prazna linija se stvara nakon bloka s class.clearfix, a zatim se briše. Ovaj se pristup koristi ako nije moguće primijeniti svojstvo overflow: hidden.

Koji preglednici su podržani:
• Krom
• Firefox
• Safari
• Opera

19) X: lebdite

Primjenjuje određeni stil na element kada kursor miša prijeđe iznad njega. Star Internetske verzije Explorer primjenjuje :hover samo na veze.

A: lebdjeti ( border-bottom: 1px točkasto plavo; )

Koji preglednici su podržani:
• IE6+ (odnosi se samo na veze u IE6)
• Krom
• Firefox
• Safari
• Opera

20) X:ne(selektor)

Pseudoklasa ne (negacije) Ovo je korisno kada, na primjer, trebate odabrati sve divove osim one s id="content" .

Koristeći isti princip, možete odabrati sve elemente osim p:

*:not(p) (boja: plava;)

Koji preglednici su podržani:
• Krom
• Firefox
• Safari
• Opera

21) X::pseudoElement

Pseudoelementi se mogu koristiti za primjenu stilova na dijelove elemenata—na primjer, prvi redak odlomka ili prvo slovo riječi. Primjenjuje se samo na blok elemente.

Odabir prvog slova odlomka:

P::prvo-slovo (font-family: cursive; font-size: 30px; font-weight: bold; padding-right: 1px; )

Odabir prvog reda u odlomku:

P:prvi redak (veličina fonta: 28px; težina fonta: podebljano;)

Koji preglednici su podržani:
• Krom
• Firefox
• Safari
• Opera

22) X: prvo dijete

Prvo dijete pseudorazreda odabire samo prvo dijete nadređenog elementa. Često se koristi za uklanjanje obruba s prvog elementa popisa. Ova pseudoklasa postoji od tada CSS 1.

Koji preglednici su podržani:
• Krom
• Firefox
• Safari
• Opera 3.5+
• Android

23) X:posljednje dijete

Pseudo-klasa zadnje dijete odabire posljednje dijete nadređenog elementa. Pojavio se tek od tada CSS 3.

Koji preglednici su podržani:
• IE9+ (IE8 podržava prvo dijete, ali ne i zadnje dijete. Microsoft (c))
• Krom
• Firefox
• Safari
• Opera 9.6+
• Android

24) X:jedino dijete

Pseudo-klasa jedino dijete omogućuje odabir onih elemenata koji su jedina djeca svojih roditelja.

Koji preglednici su podržani:
• Krom
• Firefox
• Safari 3.0+
• Opera 9.6+
• Android

25) X:nth-child(n)

Odaberite% s element djeteta prema broju navedenom u parametru. selektor n-tog djeteta uzima cijeli broj kao parametar, ali broji od 1, tj. ako trebate odabrati drugu stavku popisa, koristite li:nth-child(2) . Sve pseudo-klase koje koriste nth-child pojavile su se samo počevši od CSS 3.

Koji preglednici su podržani:
• Krom
• Firefox 3.6+
• Safari 3.1+
• Opera 9.6+
• Android 2.1+
• iOS 2.0+

26) X:n-to-zadnje-dijete(n)

Ako imate veliki popis elemenata u ul i trebate odabrati treći element od kraja? Umjesto pisanja li:nth-child(109) možete koristiti birač posljednjeg djeteta nth-last-child. Ova metoda je ista kao prethodna, ali računajući od kraja.

Koji preglednici su podržani:
• Krom
• Firefox 3.6+
• Safari 3.1+
• Opera 9.6+
• Android 2.1+
• iOS 2.0+

27) X:nth-of-type(n)

Ako na stranici postoje četiri neuređena popisa i trebate stilizirati samo treći, koji nema jedinstveni ID, trebali biste upotrijebiti nth-of-type.

Koji preglednici su podržani:
• Krom
• Firefox 3.6+
• Safari 3.1+
• Opera 9.6+
• Android 2.1+
• iOS 2.0+

28) X:nth-last-of-type(n)

Pseudo-klasa nth-last-of-type(n) namijenjen je odabiru n-tog elementa određene vrste od kraja.

Koji preglednici su podržani:
• Krom
• Firefox 3.6+
• Safari 3.1+
• Opera 9.6+
• Android 2.1+
• iOS 2.0+

29) X:samo-od-vrste

Pseudo-klasa samo tipa odabire elemente koji nemaju susjede unutar nadređenog elementa. Na primjer, možete odabrati sve ul-ove koji sadrže samo usamljene lisove.

Koji preglednici su podržani:
• Krom
• Firefox 3.5+
• Safari 3.1+
• Opera 9.6+
• Android 2.1+
• iOS 2.0+

30) X: prvi od tipa

Pseudoklasa prvog tipa odabire prvi element zadanog tipa.

Koji preglednici su podržani:
• Krom
• Firefox 3.5+
• Safari 3.1+
• Opera 9.5+
• Android 2.1+
• iOS 2.0+

Skup pravila dizajna (koji se pak sastoje od selektora s oglasnim blokom) primijenjenih na određene html oznake, zahvaljujući kojima se formira izgled web mjesta.

CSS birač- ovo je sastavni dio CSS pravila odgovoran za određivanje specifičnih html oznake, na koje će se primijeniti stilovi dizajna navedeni u ovom pravilu.

Stoga, zahvaljujući selektorima, preglednik razumije koji elementi koda stranice trebaju primijeniti određene stilove dizajna.

Alat za odabir CSS elemenata iznimno je fleksibilan i prikladan za odabir kako pojedinačnih elemenata koda, tako i cijelih grupa elemenata definiranih određenim karakteristikama.

Vrste css selektora

Baš kao rečenice u tekstu, CSS selektori mogu biti jednostavni ili složeni. Razlika između njih je u tome što se složeni dobivaju kombinacijom nekoliko jednostavnih i koriste se za točniju prilagodbu konačnog dizajna resursa.

Samo, za razliku od običnih tekstova, u kaskadnim stilskim listovima bitno je kojim redoslijedom i koje selektore koristimo. Štoviše, to će odrediti ne samo koje elemente biramo i na temelju kojih kriterija, već i brzinu obrade našeg koda u cjelini, ali o suptilnostima ćemo govoriti u daljnjim člancima.

Jednostavni selektori

• Univerzalni selektor – odgovoran je za odabir svih elemenata u dokumentu. Određeno zvjezdicom. Obično se koristi za resetiranje zadanih stilova preglednika, tako da svatko tko posjeti stranicu ne izgubi svoj dizajn ako koristi neke svoje postavke preglednika ili razne dodatke...

  * (malo stila;)

• Birač vrste – odabire sve oznake koje odgovaraju određenoj vrsti. Određeno nazivom oznake. Koristi se za zadatak Opća pravila dizajn dokumenta, na primjer, postavite različite fontove za naslove i običan tekst dokumenta.

  h1 (malo stila; )

• – primijenit će css pravilo na sve oznake s konkretno ime razreda. Određeno točkom iza koje je odmah napisano ime klase. Možda najčešći selektor u rasporedu. Obično se koristi za postavljanje različitih stilova dizajna za oznake iste vrste, ali različite funkcionalnosti.

  Lijevi stupac (neki stil;)

• ID birač – koristi se za dizajn jedinstvenih elemenata na stranici. Određen je hashom nakon kojeg slijedi ID imena. Koristi se ako trebate dizajnirati jedan određeni element stranice.

  #alertButton (neki stil; )

• – odabire oznake koje imaju atribut. Određeno imenom atributa u uglate zagrade. Može se koristiti i za dizajniranje grupe oznaka u kojoj je dani atribut jednostavno prisutan i za grupu oznaka u kojoj je prisutan dani atribut s određenom vrijednošću.

  [ tip] (neki stil; ) [ tip= "pošalji" ] (neki stil; ) unos[ tip= "pošalji" ] (neki stil; )

Složeni selektori

• Selektor potomaka – odabire elemente potomke (oznake koje se nalaze unutar druge oznake). Navedeno odvojeno razmakom (roditelj - razmak - dijete).

  div p (neki stil; )

• Selektor podređenog elementa - odabire element izravno ugniježđen unutar drugog elementa. Određeno simbolom ">" (roditelj-provjera-dijete). Element dijete razlikuje se od elementa potomka po tome što dolazi odmah nakon roditelja (prva razina ugniježđivanja). Dok se dijete smatra bilo kojom oznakom unutar druge, bez obzira na razinu ugniježđenja.

  Bočna traka>ul (malo stila;)

• Selektor sestrinskog elementa – odabire oznaku koja dolazi odmah nakon druge oznake (nije zatvorena unutra, već ide dalje). Određeno plusom (prvi element – ​​​​plus – sestrinski element). U praksi se rijetko koristi. Preduvjet za korištenje je prisutnost zajedničkog roditelja za sve elemente s kombiniranim znakom "+".

  h1+ p (malo stila; )

Pseudoklase i pseudoelementi

Gornja klasifikacija CSS selektora ovisila je isključivo o oznakama dokumenta. Ako želimo postaviti promjenu izgled elemenata ovisno o promjenama u njegovom stanju na stranici (na primjer, promjena boje gumba pri lebdenju), tada možemo koristiti pseudoklase i selektore pseudoelemenata.

• Zapamtite da, za razliku od html-a, CSS razlikuje velika i mala slova. Odnosno, class.active i .Active nisu iste stvari! Oni će se primijeniti na različite elemente, ako ih ima u dokumentu.
• Imenujte selektore za stiliziranje kako se kasnije ne biste zbunili s njima: .leftColumn – dobro ime, .left - ovisi o situaciji, ali ne baš, .llll - nekakvo smeće, možete i sami zaključiti bez gledanja koda odakle je došla ova klasa?
• Da vas podsjetim još jednom - ako postoji samo jedan element na stranici, a sav je jedinstven, onda za njega koristimo id, no ako postoji mogućnost da se pojavi još jedan ili jednostavno postoji više sličnih elemenata na stranici stranicu, a zatim koristite klase za dizajn.

Sumirati

Selektori u CSS-u- Ovo najmoćniji alat identifikaciju određenih elemenata stranice ili grupe elemenata objedinjenih određenom karakteristikom za daljnju primjenu stilova dizajna na njih iz oglasnog bloka koji se odnosi na ovaj birač.

Nakon svladavanja generalni principi interakcije i kreiranja selektora, zaboravit ćete na probleme s dizajnom web dokumenata. Dobro znanje selektori vam omogućuju značajno smanjenje vremena HTML izgled stranice.

Iako se tema na prvi pogled čini krajnje zbunjujućom, postaje jednostavna i razumljiva nakon razdoblja prakse, potkrijepljene kvalitativnom teorijom.

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. Pojavljivao se s vremena na vrijeme mala ažuriranja unutar specifikacije selektora, ali nikad 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, točnije 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. Vertikalna linija znači 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

Slično vezama, postoje i neke pseudoklase povezane sa stanjem elemenata korisničko sučelje, 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 posljednju stavku popisa, odabirući retke 2 i 10. Div:only-child selektor 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

Pseudoklasa: 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 text. 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. Dodatne namjene Ovi pseudoelementi mogu 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 za pružanje bolju podršku 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

Zadnja izmjena: 21.04.2016

Definiranje stila počinje selektorom. Na primjer:

Div( širina:50px; /* širina */ visina:50px; /* visina */ boja pozadine:crvena; /* boja pozadine */ margina: 10px; /* uvlačenje od ostalih elemenata */ )

U ovom slučaju, selektor je div. Određeni broj selektora nasljeđuje naziv oblikovanih elemenata, na primjer, div, p, h2, itd. Kada se definira takav selektor, njegov stil će se primijeniti na sve elemente koji odgovaraju ovom selektoru. To jest, gore definirani stil će se primijeniti na sve elemente

na web stranici:

CSS selektori

Postoje 3 diva na stranici i svi će biti stilizirani:

Nastava

Ponekad isti elementi zahtijevaju različit stil. I u ovom slučaju možemo koristiti klase.

Za definiranje selektora klase u CSS-u, ispred naziva klase stavlja se točka:

RedBlock(boja-pozadine:crvena; )

Naziv klase može biti proizvoljan. Na primjer, u ovom slučaju naziv klase je "redBlock". Međutim, dopušteno je koristiti slova, brojke, crtice i podvlake u nazivu klase, a ime klase mora započeti slovom.

Također je vrijedno razmotriti slučaj imena: nazivi "article" i "ARTICLE" predstavljat će različite klase.

Jednom kada je klasa definirana, možemo je primijeniti na element pomoću atributa class. Na primjer:

Definirajmo i koristimo nekoliko klasa:

CSS klase

Identifikatori

Za identifikaciju jedinstvenih elemenata na web stranici koriste se identifikatori koji se određuju korištenjem id atributa. Na primjer, stranica može imati glavni blok ili zaglavlje:

Definiranje stilova za identifikatore slično je definiranju klasa, samo se umjesto točke koristi hash simbol #:

Zaglavlje stranice

Glavni sadržaj

Podnožje

Međutim, vrijedi napomenuti da identifikatori imaju više veze sa strukturom web stranice, a manje sa stilom. Klase se koriste za stiliziranje, a ne za identifikatore.

Univerzalni selektor

Osim selektora oznaka, klasa i identifikatora, css ima i tzv univerzalni selektor, što predstavlja zvjezdicu (*). Primjenjuje stilove na sve elemente na html stranici:

*(boja pozadine: crvena; )

Oblikovanje grupe selektora

Ponekad se određeni stilovi primjenjuju na niz selektora. Na primjer, recimo da želimo primijeniti podcrtavanje na sve naslove. U ovom slučaju možemo navesti selektore svih elemenata odvojene zarezima:

CSS3

Selektori

Selektorska grupa

Neki tekst...

Grupa selektora može sadržavati selektore oznaka i selektore klasa i identifikatora, na primjer:

H1, #zaglavlje, .redBlock( boja: crvena; )

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

• Programi
• Sigurnost
• Vijesti
• Zanimljiv
• Savjet
• Vijesti
• Recenzije
• Pridruži nam se!

  Već se pretplatilo više od 6000 ljudi.
  Dobijte najnovije članke.

  PRETPLATITE SE