CSS, pseudo-klasa, pseudo-element: lebdjeti, dijete, cilj

Kombinirajući HTML i CSS, možete upravljati apsolutno svim elementima web stranice. Pomoću stilova možete jednostavno promijeniti izgled bilo kojeg bloka ili linije. Često, koder treba obaviti složeniji zadatak - promijeniti izgled ne samog elementa, već njegov pojedinačni dio ili određeno stanje. U ovom slučaju, pseudoklasci CSS dolaze u spašavanje.

Pseudo-klase rade na isti način kao i redovne klase u označavanju, ali nisu fizički prisutne na stranici. Pomoću njih možete odabrati stavke na temelju podataka koji nisu u dokumentu, a koji se ne mogu odabrati uobičajenim izbornikom. Evo jednostavnog primjera: imate crveni gumb i želite da postane plava kada ga zadržite. Teoretski se može implementirati u jаvascript, ali zašto takva složenost? Mnogo je praktičnije koristiti : lebdeći CSS. Pomoću nje možete blokirati sve parametre koji će funkcionirati samo kada zadržite miša.

Popis pseudo klase CSS redovito se ažurira. Možda dok čitate ovaj materijal, pojavit će se nekoliko novih. Prvo, pogledajmo one koje su se pojavile u specifikaciji CSS3.

: n-tipa

Recimo da imate popis u kojem želite koristiti izmjenične boje, tj, prva crta je, na primjer, napisan crvenim slovima, a druga - .. plava, crvena opet treći, četvrti opet u plavo. Prije toga morali ste stvoriti nove klase za to. Prošli šarmanti dodali su svaki element popisa u klasu, a zatim promijenili izgled u listi stila. Nije bilo vrlo prikladno i zagađeno izgledom.

Sada je sve lakše. Upotrijebite pseudo klase CSS: n-tipa. To će vam pružiti priliku da dobijete potrebni vizualni efekt bez da promijenite ništa u oznaci. Princip je jednostavan: ući u izbornik, te u zagradi iza imena napisati formulu ili ključne riječi koje će se naći potrebne elemente. Na primjer ,: n-ti-o-tipa (čak i) sve će čak i elemenata, i: n-ti-o-tipa (ak) - ak. Postoji velik broj formula koje se koriste za najtočniju kontrolu. U zagradama možete odrediti broj - u kojem se slučaju stilovi primjenjuju na element čiji je indeks jednak broju.

: n-dijete

Ova pseudo-klasa CSS-a slična je prethodnom, no za razliku od toga radi isključivo s djecom odabranog elementa. Na primjer, ako ga želite koristiti za prilagodbu izgleda oznaka

Za preciznu kontrolu mogu se koristiti formule. Prilično su teške za početnike, ali vrijedi malo kopati u sintaksu, kako stvari postaju jednostavnije. Formule izgledaju ovako: a + b, gdje je a množitelj, a b je pomak. Na primjer, ako navedete n u zagradama, pseudo-klasa će odabrati svu djecu (jer nijedan dodatni uvjet nije naveden u obliku a i b). Ako navedete n + 2, svi će se elementi odabrati, osim prvog (jer je ta dva pomaka). To je najbolje proučiti u praksi. Eksperimentirajte s komponentama djeteta i različitim formulama.

: posljednje dijete

Sve je jednostavno. CSS dječje pseudo-klase koriste se za odabir određenog elementa. Ovo odabire posljednje dijete roditelja. Koriste se prilično često, na primjer, da biste označili posljednji redak tablice ili uklonili uvlačenje iz zadnjeg bloka kako biste izbjegli njegov prijenos na sljedeći redak.

: n-posljednje dijete

Po principu rada sličan je prethodno spomenuto n-ti-dijete, ali djeluje u suprotnom smjeru, tj. E. Pri korištenju elemenata će se pomaknuti prema gore. To je korisno ako želite pronaći posljednjih nekoliko elemenata.

Možda mislite da su ove pseudo-klase i CSS pseudo-elementi su beskorisni jer možete postići cilj i uz pomoć običnih klasa. Nije tako. : N-ti-dijete ,: n-ti-zadnji-dijete i njihovih analoga su vrlo zgodan kada se radi o velikim projektima - na primjer, u slučajevima kada je blok ima veliki broj djece. Ručno postavljanje nastave je dug i težak.

Pseudo-klase državnog upravljanja

Što ako trebate promijeniti izgled elementa u određenoj državi? U tom slučaju, predviđene su pseudo-klase CSS pritiskanja, usmjeravanja i drugih radnji. Razmotrimo ih detaljnije.

: link

Ovo je pseudo-klasa CSS veza, ne samo bilo koje, već samo one koje još nisu posjetile. U njemu možete odrediti stilove za te stavke , na kojem korisnik još nije prebacio.

: posjetili

Analogna verzija prethodne verzije, koja upravlja samo već povezanim vezama. Kombinirajući ove dvije pseudo-klase, možete prilagoditi izgled oznaka točno onako kako vam je potrebna. Međutim, imajte na umu da se stanja izračunavaju za određene preglednike i poništavaju nakon brisanja povijesti.

Pseudo klase: ciljani CSS

Jedna od najzanimljivijih pseudo-klasa, koja s pravilnom upotrebom u određenoj mjeri zamjenjuje upotrebu jаvascript-a. Omogućuje vam upravljanje elementom čiji je identifikator naveden u adresnoj traci stranice. Da, prvi put je teško shvatiti. Pokušajmo napraviti primjer.

Recimo da na stranici postoje 3 div kutija s određenim id: id1, id2, id3. Imamo i tri veze s odgovarajućim vrijednostima: # id1, # ​​id2, # id3. Kada kliknete na prvu vezu u adresnoj traci stranice nakon što se veza na stranicu pojavljuje, odgovarajući id.

U CSS-u, za sve div blokove, prikazano je: none svojstvo, tj. Prema zadanim postavkama, one se ne prikazuju. Upotrijebite cilj: div i postavite njegov prikaz: blokiraj svojstvo. Sada, kada kliknete na veze s određenom href, blokovi s odgovarajućim ID će biti dodijeljeni prikaz: blok, što znači da će se početi pojavljivati ​​na stranici! Kada kliknete vezu s href = "# id1" pojavljuje se blok s ID1 i tako dalje.

Još uvijek ništa nije jasno? Pokušajte eksperimentirati. Izradite stranicu s gore navedenim oznakama i stilovima. Za nekoliko minuta bit će vam u redu sve.

Pseudo-klase koje se mogu primijeniti na bilo koji element

Većina opisanih pseudo-klasa zahtijevala je reference za rad. Međutim, nisu svi potrebni elementi . Brojne opcije mogu se primijeniti na apsolutno bilo koji dio stranice.

• : aktivna je namijenjena oblikovanju elemenata na kojima je korisnik kliknuo lijevu tipku miša -
• : zadržite pokazivač miša - CSS za elemente kojima korisnik zadržava kursor-
• : fokus - za one dijelove stranice koji su trenutačno u fokusu. Ova pseudo-klasa često se koristi za rad s oblicima. Na primjer, ako želite označiti ulazni niz za korisničko ime, kada posjetitelj postavlja pokazivač i počinje upisivati ​​znakove.

Zapamtite: Aktivno je aktivno samo kada ga pritisnete. Odmah nakon lijeve tipke miša prestaje raditi, stilovi dodijeljeni s njim će nestati i element će biti prikazan kao što je bio prikazan prema zadanim postavkama. U većini slučajeva, ova pseudo-klasa koristi se za rad s gumbima. Možete ih postaviti velikim brojem država. Na primjer, prema zadanim postavkama gumb će biti plavi, kada se lebdi - zeleno, kada je pritisnut - crvena i tako dalje.

Naravno, pseudo-klase u potpunosti podržavaju samo moderni preglednici. Na primjer, u IE6 i 7, ne možete upotrebljavati fokus, a zadržite pokazivač miša i aktivno u IE6 raditi samo za reference. Nadajmo se da ne morate raditi s takvim preglednicima, a ako trebate, upotrijebite uvjetne komentare.

Dodatne pseudo-klase

Gore navedeni popis nije ograničen na popis. Zahvaljujući modernom CSS-u, možete odabrati samo uključene elemente (: omogućeno) ili samo onemogućene (: onemogućeno), samo označite potvrdne okvire i radio (: označeno). Ukratko opišite još nekoliko opcija koje možete koristiti kako biste pobliže kontrolirali izgled sadržaja.

• : samo-dijete - mogućnost primjene stila elementu koji je jedini dječji element-
• : lang - za rad s elementima koji imaju jezik postavljen pomoću lang-
• : root - Koristi se za odabir korijenskog elementa. Prema tome, u HTML-u, to je oznaka -
• : nije vrlo moćan alat. Omogućuje ograničavanje primjene stilova na određene selektore. Evo primjera: .blue-color: not (span). Ovaj izbornik primjenjuje stilove za sve elemente s plavom bojom, ako nisu .

Kompletan popis pseudo-klasa može se protezati na više od jedne stranice. Većina tipletera koristi samo neke od njih u praksi, preferirajući upravljanje državama koristeći jаvascript. Da, to je prikladno, ali postoji nekoliko točaka na kojima se lakše postižu učinkovitije rezultate pomoću odgovarajuće pseudo-klase.