Ne sve, ali više nego dovoljno
Ljudi koji proučavaju XHTML, kao i CSS iz knjiga, često se susreću s činjenicom 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 može 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 li element, ali ne i ul, bit će prikazan s danim postavkama stila)
:last-child Stilizira zadnje dijete nekog drugog elementa. :focus Postavlja stil za elemente obrasca koji primaju fokus, tj. one na koje kliknete. Na primjer, aktivno polje za unos teksta možete razlikovati 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 stavlja se dvoznamenkasta međunarodna oznaka jezika ili drugim riječima naziv domenska zona. 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
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 se CSS za određene stranice automatski generira. Istodobno, mora funkcionirati ispravno i ispravno.
Spomenuli smo nasljednost elemenata. Sada ćemo to dublje analizirati.
CSS može definirati pravila za različite vrste nasljednost, odnosno pripadnost elemenata roditeljskom 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 tablica potomaka. |
| 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 definira 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. Sljedeće lekcije bit će o JavaScriptu.
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). Obično se CSS stilovi koriste za stvaranje i promjenu stila elemenata web stranica i korisničkih sučelja napisanih u HTML jezici i XHTML, ali se također može 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 tako da autori mogu prilagoditi prezentaciju svojih dokumenata vizualnim preglednicima, audio uređajima, pisačima, brajevim uređajima, ručnim uređajima itd.
Kaskadni listovi stilova opisuju pravila za oblikovanje elemenata pomoću svojstava i dopuštenih vrijednosti za ta svojstva. Za svaki element možete koristiti ograničen 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 predstavlja tekstualna datoteka s ekstenzijom .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 u nizu , označavajući svrhu ovog stilskog lista 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, zapisujemo 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 da odredite stilove za jedan ili više elemenata s istim nazivom klase, postavljenih na različita mjesta na stranici ili na različite stranice mjesto. 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 selektor
Birač 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 druga ograničenja o tome koji oblik ID može imati; identifikatori mogu biti svi brojevi, počinjati brojem, počinjati podvlakom, 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.first a (boja: zelena;) - ovaj stil će se primijeniti 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 odabiru 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 - odlomci č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;
:disabled - 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 jedan element navedeni tip među podređenim elementima nadređeni element.
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 parne slike, alternativni tekst koji 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 tražene 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 različiti tipovi listovi stilova se primjenjuju na dokument i kako se sukobljena pravila poništavaju.
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, bijelo -razmak i razmak između riječi. U mnogim je slučajevima to zgodno jer ne morate postaviti 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, pozicija, ukras teksta, okomito poravnanje i z-indeks.
Prisilno nasljeđivanje
Možete koristiti ključnu riječ inherit da prisilite 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, desnom tipkom miša kliknite iznad elementa 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 redom 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 u različite tabliceću upoznati različita značenja svojstva jednog elementa, tada će se kao rezultat na element primijeniti pravilo u dolje navedenoj tablici stilova.
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:* odgovarat će 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:. naziv 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 selektora , je metoda grupiranja, 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.">
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.">
Sintaksa: A>B
Primjer: ul > li će odgovarati svim elementima koji se koriste za predstavljanje stavke na popisu.">
- 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.
- Ova će stavka biti odabrana
-
Ovaj div će biti odabran
-
......
- Ova će stavka biti odabrana
- Ova će stavka biti odabrana
- Ova će stavka biti odabrana
- Ova će stavka biti odabrana
- Ova će stavka biti odabrana
- Ova će stavka biti odabrana
- Ova će stavka biti odabrana
- Ova će stavka biti odabrana
- Ova će stavka biti odabrana
- Ova će stavka biti odabrana
- Ova će stavka biti odabrana
- Ova će stavka biti odabrana
- Ova će stavka biti odabrana
- Ova će stavka biti odabrana
- Razumijevanje izraza pseudoklase nth-child na SitePointu
- Kroćenje naprednih CSS selektora u časopisu Smashing
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
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, u U zadnje vrijeme Sve se više pozornosti posvećuje selektorima, 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, konkretno 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 odabir može se izvršiti na dva različita načina, pomoću izbornika djeteta ili izravnog izbornika 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 novu razinu hijerarhije za svaki element na popisu.
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 koji imaju zajedničkog pretka, 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 sa zajedničkim selektorom, susjedni 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 neposredno 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 (color: #ff7b29;) input:checked + label (box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); color: #9799a7 ; ) nav ( max-height: 0; overflow: hidden; conversion: 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 (color: #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 bira na temelju vrijednosti klase ili id-a. Ovi selektori atributi klase i id naširoko se koriste i prilično su moćni, ali to je tek 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 uglate zagrade() u selektoru. 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
Ul (list-style: none; margin: 0; padding: 0; ) a (background-position: 0 50%; background-repeat: no-repeat; color: #0087cc; padding-left: 22px; text-decoration: nijedan; ) a: hover (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 oznakama; umjesto toga, popunjavaju se dinamički kao rezultat korisničkih radnji 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 se primjenjuje na element kada korisnik postavi element u fokus stranice, često korištenjem tipke Tab dok se kreće od jednog elementa do drugog.
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 uz 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 posljednjeg 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 tako 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:posljednje-dijete (...) div:jedino-dijete (...)
: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, neparne i parne 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 se koristi 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 biti odabrani redovi 4 i 7.
Li:nth-child(3n) (…)
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) (...)
Ponovno mijenjanje izraza, ovaj put s negativnom vrijednošću, dat će novi izbor. Ovdje selektor li:nth-child(-n+4) specificira prve četiri stavke na popisu, ostavljajući preostale stavke neodabrane, tako da će biti odabrani retci od 1 do 4.
Li:nth-child(-n+4) (...)
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) (...)
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) (...)
: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 pseudoklase :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 zadnji 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 neposredno 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
Pseudo-klasa: 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 odlomka 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, oba selektora div:not(.awesome) i :not(div) koriste pseudo-klasu :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, budući da nadilazi dvije pseudo-klase.Div:not(.awesome) (...) :not(div) (...)
Ovaj div će biti odabran
...
Ovaj odjeljak će biti odabran Ovaj odjeljak će biti odabranPrimjer 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 posljednji 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-zadnje-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 Pseudoklasa: 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:not(.strašno) Pseudo-klasa: 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. Jedna važna stvar koju treba napomenuti je da se samo jedan pseudoelement može koristiti u selektoru u datom trenutku.
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
Sadržaj generiran pseudoelementima
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 prije 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 pseudo-elemente.
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
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-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, a zatim 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
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 |
|---|---|---|
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, u U zadnje vrijeme Sve se više pozornosti posvećuje selektorima, 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, konkretno 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 odabir može se izvršiti na dva različita načina, pomoću izbornika djeteta ili izravnog izbornika 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 novu razinu hijerarhije za svaki element na popisu.
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 koji imaju zajedničkog pretka, 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 sa zajedničkim selektorom, susjedni 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 neposredno 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 (color: #ff7b29;) input:checked + label (box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); color: #9799a7 ; ) nav ( max-height: 0; overflow: hidden; conversion: 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 (color: #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 bira na temelju vrijednosti klase ili id-a. Ovi selektori atributi klase i id naširoko se koriste i prilično su moćni, ali to je tek 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 uglate zagrade() u selektoru. 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
Ul (list-style: none; margin: 0; padding: 0; ) a (background-position: 0 50%; background-repeat: no-repeat; color: #0087cc; padding-left: 22px; text-decoration: nijedan; ) a: hover (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 oznakama; umjesto toga, popunjavaju se dinamički kao rezultat korisničkih radnji 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 se primjenjuje na element kada korisnik postavi element u fokus stranice, često korištenjem tipke Tab dok se kreće od jednog elementa do drugog.
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 uz 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 posljednjeg 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 tako 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:posljednje-dijete (...) div:jedino-dijete (...)
: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, neparne i parne 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 se koristi 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 biti odabrani redovi 4 i 7.
Li:nth-child(3n) (…)
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) (...)
Ponovno mijenjanje izraza, ovaj put s negativnom vrijednošću, dat će novi izbor. Ovdje selektor li:nth-child(-n+4) specificira prve četiri stavke na popisu, ostavljajući preostale stavke neodabrane, tako da će biti odabrani retci od 1 do 4.
Li:nth-child(-n+4) (...)
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) (...)
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) (...)
: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 pseudoklase :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 zadnji 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 neposredno 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
Pseudo-klasa: 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 odlomka 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, oba selektora div:not(.awesome) i :not(div) koriste pseudo-klasu :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, budući da nadilazi dvije pseudo-klase.Div:not(.awesome) (...) :not(div) (...)
Ovaj div će biti odabran
...
Ovaj odjeljak će biti odabran Ovaj odjeljak će biti odabranPrimjer 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 posljednji 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-zadnje-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 Pseudoklasa: 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:not(.strašno) Pseudo-klasa: 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. Jedna važna stvar koju treba napomenuti je da se samo jedan pseudoelement može koristiti u selektoru u datom trenutku.
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
Sadržaj generiran pseudoelementima
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 prije 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 pseudo-elemente.
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
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-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, a zatim 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
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 koji imaju zajedničkog pretka, 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 sa zajedničkim selektorom, susjedni 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 neposredno 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 (color: #ff7b29;) input:checked + label (box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); color: #9799a7 ; ) nav ( max-height: 0; overflow: hidden; conversion: 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 (color: #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 bira na temelju vrijednosti klase ili id-a. Ovi selektori atributi klase i id naširoko se koriste i prilično su moćni, ali to je tek 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 uglate zagrade() u selektoru. 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
Ul (list-style: none; margin: 0; padding: 0; ) a (background-position: 0 50%; background-repeat: no-repeat; color: #0087cc; padding-left: 22px; text-decoration: nijedan; ) a: hover (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 oznakama; umjesto toga, popunjavaju se dinamički kao rezultat korisničkih radnji 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 se primjenjuje na element kada korisnik postavi element u fokus stranice, često korištenjem tipke Tab dok se kreće od jednog elementa do drugog.
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 uz 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 posljednjeg 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 tako 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:posljednje-dijete (...) div:jedino-dijete (...)
: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, neparne i parne 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 se koristi 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 biti odabrani redovi 4 i 7.
Li:nth-child(3n) (…)
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) (...)
Ponovno mijenjanje izraza, ovaj put s negativnom vrijednošću, dat će novi izbor. Ovdje selektor li:nth-child(-n+4) specificira prve četiri stavke na popisu, ostavljajući preostale stavke neodabrane, tako da će biti odabrani retci od 1 do 4.
Li:nth-child(-n+4) (...)
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) (...)
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) (...)
: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 pseudoklase :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 zadnji 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 neposredno 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
Pseudo-klasa: 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 odlomka 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, oba selektora div:not(.awesome) i :not(div) koriste pseudo-klasu :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, budući da nadilazi dvije pseudo-klase.Div:not(.awesome) (...) :not(div) (...)
Ovaj div će biti odabran
...
Ovaj odjeljak će biti odabran Ovaj odjeljak će biti odabranPrimjer 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 posljednji 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-zadnje-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 Pseudoklasa: 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:not(.strašno) Pseudo-klasa: 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. Jedna važna stvar koju treba napomenuti je da se samo jedan pseudoelement može koristiti u selektoru u datom trenutku.
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
Sadržaj generiran pseudoelementima
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 prije 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 pseudo-elemente.
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
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-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, a zatim 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
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 koji imaju zajedničkog pretka, 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 sa zajedničkim selektorom, susjedni 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 neposredno 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 (color: #ff7b29;) input:checked + label (box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); color: #9799a7 ; ) nav ( max-height: 0; overflow: hidden; conversion: 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 (color: #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 bira na temelju vrijednosti klase ili id-a. Ovi selektori atributi klase i id naširoko se koriste i prilično su moćni, ali to je tek 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 uglate zagrade() u selektoru. 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
Ul (list-style: none; margin: 0; padding: 0; ) a (background-position: 0 50%; background-repeat: no-repeat; color: #0087cc; padding-left: 22px; text-decoration: nijedan; ) a: hover (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 oznakama; umjesto toga, popunjavaju se dinamički kao rezultat korisničkih radnji 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 se primjenjuje na element kada korisnik postavi element u fokus stranice, često korištenjem tipke Tab dok se kreće od jednog elementa do drugog.
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 uz 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 posljednjeg 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 tako 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:posljednje-dijete (...) div:jedino-dijete (...)
: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, neparne i parne 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 se koristi 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 biti odabrani redovi 4 i 7.
Li:nth-child(3n) (…)
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) (...)
Ponovno mijenjanje izraza, ovaj put s negativnom vrijednošću, dat će novi izbor. Ovdje selektor li:nth-child(-n+4) specificira prve četiri stavke na popisu, ostavljajući preostale stavke neodabrane, tako da će biti odabrani retci od 1 do 4.
Li:nth-child(-n+4) (...)
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) (...)
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) (...)
: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 pseudoklase :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 zadnji 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 neposredno 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
Pseudo-klasa: 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 odlomka 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, oba selektora div:not(.awesome) i :not(div) koriste pseudo-klasu :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, budući da nadilazi dvije pseudo-klase.Div:not(.awesome) (...) :not(div) (...)
Ovaj div će biti odabran
...
Ovaj odjeljak će biti odabran Ovaj odjeljak će biti odabranPrimjer 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 posljednji 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-zadnje-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 Pseudoklasa: 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:not(.strašno) Pseudo-klasa: 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. Jedna važna stvar koju treba napomenuti je da se samo jedan pseudoelement može koristiti u selektoru u datom trenutku.
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
Sadržaj generiran pseudoelementima
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 prije 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 pseudo-elemente.
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
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-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, a zatim 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
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
Ispod, odlomak u retku 3, jedini je izravni potomak svog roditelja
Č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 koji imaju zajedničkog pretka, 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 sa zajedničkim selektorom, susjedni 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 neposredno 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 (color: #ff7b29;) input:checked + label (box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); color: #9799a7 ; ) nav ( max-height: 0; overflow: hidden; conversion: 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 (color: #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 bira na temelju vrijednosti klase ili id-a. Ovi selektori atributi klase i id naširoko se koriste i prilično su moćni, ali to je tek 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 uglate zagrade() u selektoru. 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
Ul (list-style: none; margin: 0; padding: 0; ) a (background-position: 0 50%; background-repeat: no-repeat; color: #0087cc; padding-left: 22px; text-decoration: nijedan; ) a: hover (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" ;)
| 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 oznakama; umjesto toga, popunjavaju se dinamički kao rezultat korisničkih radnji 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 se primjenjuje na element kada korisnik postavi element u fokus stranice, često korištenjem tipke Tab dok se kreće od jednog elementa do drugog.
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 uz 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 posljednjeg 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 tako retke 2 i 10. Div:only-child selektor traži
Li:prvo-dijete (...) li:posljednje-dijete (...) div:jedino-dijete (...)
: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, neparne i parne 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 se koristi 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 biti odabrani redovi 4 i 7.
Li:nth-child(3n) (…)
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) (...)
Ponovno mijenjanje izraza, ovaj put s negativnom vrijednošću, dat će novi izbor. Ovdje selektor li:nth-child(-n+4) specificira prve četiri stavke na popisu, ostavljajući preostale stavke neodabrane, tako da će biti odabrani retci od 1 do 4.
Li:nth-child(-n+4) (...)
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) (...)
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) (...)
: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
Korištenjem pseudoklase :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 zadnji 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 neposredno 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
Div:prazno (...)
Pseudo-klasa: 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 odlomka 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, oba selektora div:not(.awesome) i :not(div) koriste pseudo-klasu :not(x). Selektor div:not(.awesome) definira bilo koji
Div:not(.awesome) (...) :not(div) (...)
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; )
| 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 posljednji 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-zadnje-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 | Pseudoklasa: 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:not(.strašno) | Pseudo-klasa: 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. Jedna važna stvar koju treba napomenuti je da se samo jedan pseudoelement može koristiti u selektoru u datom trenutku.
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
Sadržaj generiran pseudoelementima
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 prije 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 pseudo-elemente.
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
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-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, a zatim 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
