Selektor
Univerzalni selektor

Pregled CSS koda izgleda ovako:

Selektor (CSS svojstvo: vrijednost; CSS svojstvo: vrijednost; ... itd.)

U univerzalnom selektoru, zvjezdica * djeluje kao selektor:

* (CSS svojstvo: vrijednost; CSS svojstvo: vrijednost; ... itd.)

Univerzalni selektor, utječe na sve oznake HTML dokumenta odjednom.

Na primjer, možete ukloniti sav padding i padding iz svih oznaka u HTML dokumentu:

* (margina: 0; dopuna: 0;)

Recimo da imamo HTML dokument koji sadrži sljedeći kod:

Snježni leopard

na sljedeći način.

Upotrijebimo univerzalni selektor da boju fonta svih oznaka učinimo zeleno zelenom, naziv fonta arial, stil fonta kosim.

Snježni leopard

Snježni leopard (irbis, ak leopard) je veliki grabežljiv mačji sisavac. Živi u planinskim lancima Afganistana, Burme, Butana, Indije, Kazahstana, Kirgistana, Kine, Mongolije, Nepala, Pakistana, Rusije, Tadžikistana i Uzbekistana. Irbis se odlikuje tankim, dugim, fleksibilnim tijelom, relativno kratkim nogama, malom glavom i vrlo dugim repom. Duljina snježnog leoparda s repom je 200-230 cm, težina do 55 kg. Boja krzna je svijetla, dimno siva s prstenastim ili čvrstim tamnim mrljama.

Snježni leopard lovi uglavnom planinske koze i ovnove, a u njegovoj prehrani nalaze se i divlje svinje, fazani, pa čak i gofovi. Zbog nepristupačnosti staništa vrste, snježni leopardi su još uvijek slabo shvaćeni. Međutim, prema grubim procjenama, njihov broj varira u području od oko 10 tisuća jedinki. Od 2013. lov na snježne leoparde općenito je zabranjen.

Stranica u pregledniku će izgledati ovako.

Također možete eksperimentirati s paddingom, prvo ga napraviti 0, a zatim 15px, dodati ga u CSS kod.

• Zadatak koji se obavlja je odabir svih stavki. Općenito, svi.
• Oznaka - simbol zvjezdice - *.
• Primjer upotrebe:

poništi uvlake za sve elemente prema zadanim postavkama

Saznajte više o univerzalnom selektoru

Uvedeno u CSS od verzije 2. Odgovara bilo kojem elementu u. Stoga se stilovi specificirani za univerzalni selektor primjenjuju na sve elemente odjednom. Iz tog razloga, savjetujem vam da ga koristite vrlo oprezno - može doći u probleme pri nasljeđivanju stilova. Ili bolje rečeno, nepredvidivo (za neiskusnog programera) ponašanje. Ovu točku ćemo detaljnije razmotriti u odjeljku o nasljeđivanju.

Još jedna značajka univerzalnog selektora je da kada se koristi zajedno s drugim selektorom (na primjer, selektorom klase, identifikatora ili atributa) kao dio jednostavnog selektora, može se nekažnjeno preskočiti. To je otprilike isto kao da jednostavno kažete "dromedari su jednogrbe deve" umjesto "Svi dromedari su jednogrbe deve". Značenje se nije promijenilo.

Primjer:

* .pogreška (boja: crvena;) .pogreška (boja: crvena;) / * ova dva pravila su ekvivalentna. Univerzalni selektor se preskače u drugom slučaju * /

Područje primjene

Zapravo, najprikladnije je koristiti univerzalni selektor, kao u prvom primjeru, za poništavanje početnih vrijednosti stilova ovisnih o pregledniku (posebno, uvlačenje).

Ali čak ni ova aplikacija neće uvijek biti dobra ideja. Zbog nedostataka univerzalnog selektora opisanog u ovom članku, bolje je koristiti. Odnosno, koristite birače tipa.

Tako smo glatko ti i ja došli do sljedeće teme. S univerzalnim selektorom se, čini se, riješilo. Vrijeme je da krenemo dalje. Sljedeća stanica - .

Pozdrav dragi čitatelji blog stranice. Danas ćemo nastaviti puniti naše materijalima i početi pričati o tako temeljnoj stvari kao što su selektori na CSS jeziku.

Ima ih sedam vrsta - oznaka, klasa, Id, univerzalna, atributi, kao i pseudoklase i pseudoelementi. Malo previše, zar ne? Pa ništa, polako ćemo ih sve analizirati, a uz to i na detaljnim primjerima.

U prethodnim publikacijama već smo razmatrali, a također se i upoznali s jedinicama veličina, kao što smo naučili o principima nasljeđivanja u CSS-u. Pa, danas, kao što sam rekao, otvaramo vrlo ozbiljno poglavlje u proučavanju jezika za označavanje stila.

CSS oznaka i selektori klasa

Prije proučavanja stilskih pravila, morat ćete naučiti kako i po kojim načelima postaviti te oznake prema kojima će preglednik razumjeti na koje elemente HTML koda ih treba primijeniti. Postoje različiti selektori. Najjednostavniji, sa stajališta razumijevanja, koriste nazive oznaka na koje će se morati primijeniti CSS pravila napisana nakon njih.

Ovaj primjer koristit će crvenu za boju fonta i sivu za ispunu pozadine za sve oznake P paragrafa. Svako CSS pravilo može imati nekoliko selektora odjednom. Kako će ih trebati čitati u ovom slučaju? Je uvijek s desna na lijevo, tj. započnite od najbliže početnoj vitičastoj zagradi.

U gornjem primjeru, prvi redak prikazuje selektor oznake (elementa) koji govori da boja fonta bude crvena za sve Divove.

Sadržaj običnog spremnika Div

U drugom retku vidimo primjer složenog selektora, u kojem imamo novi element poput razred (razred)... Propisan je u kvaliteti. Kao vrijednost za klasu možemo koristiti proizvoljan naziv pomoću simbola ,,, [_], [-].

Ali osim klase, Id se također koristi u jeziku za označavanje stila. Koja je razlika između klase i ID-a? Vrijednost potonjeg mora biti jedinstvena, budući da Id je jedinstveni identifikator za Html tag i njegov naziv (vrijednost) mogu se koristiti samo jednom u kodu.

I vrijednost za klasu nije jedinstvena i može se koristiti za bilo koji broj elemenata u kodu. Oni. različite oznake (Div, P, H1, itd.) mogu imati istu vrijednost za svoj atribut klase:

Kako se koristi u CSS selektorima? Ispostavilo se da je njegovo ime napisano točkastim naprijed.

Stoga, kada vidimo da nešto počinje točkom u CSS kodu, odmah razumijemo da je riječ o klasi. Ako uzmemo u obzir primjer prikazan na snimci zaslona, ​​sada će u svim elementima Html koda, gdje će biti napisana "klasa" s vrijednošću "Plavo", tekst biti obojen plavom bojom.

Ali to se uopće neće dogoditi jer smo odabrali naziv klase "Plava". Možete ga imenovati kako god želite (čak i "xyz"), a boja u našem primjeru postavljena je točno onako kako je dodijeljena selektoru s ovom klasom. Nadam se da je ovo jasno? Promijenimo naziv (vrijednost) klase u primjeru:

Stavak s tekstom

Stavak s tekstom

Oni. sada imamo klasu XYZ i za nju napisano pravilo:

Xyz (boja: plava)

obojio tekst odlomka u plavo. Ovaj primjer to dodatno naglašava naziv za atribut klase može se koristiti bilo koji. Međutim, nastavimo.

Pogledajmo još jedan primjer kako se selektori oznaka i klasa koriste u CSS-u. Zamislimo da imamo sljedeća stilska pravila:

Div (boja: crvena) div.a123 (boja: zelena) .xyz (boja: plava)

I također zamislite da u HTML kodu imamo sljedeće elemente:

U skladu s propisanim pravilima za navedene selektore, sadržaj zadanih elemenata Html koda trebao bi izgledati ovako:

Pogledajmo sada zašto je preglednik na ovaj način tumačio stil ovih elemenata HTML koda. Za prvi spremnik Div, u kojem nije napisana klasa, primjenjivat će se CSS pravilo primjenjivo na sve spremnike: div (boja: crvena). Stoga će njegov sadržaj biti obojen crvenom bojom. Što se tražilo pokazati.

U oznaci drugog Diva imamo registriranu klasu "a123". U ovom slučaju, CSS pravila koja odgovaraju "div.a123" bit će primijenjena (jer imamo samo Div tag s atributom class = "a123" upisanim u njemu). Stoga će sadržaj drugog spremnika biti obojen zelenom bojom.

No, vjerojatno ste primijetili da se prvo CSS pravilo "div (boja: crvena)" može primijeniti i na drugi Div, budući da je namijenjeno svim kontejnerima bez iznimke. Ispada kontradikcija, koja se u CSS-u rješava uvođenjem koncepta.

O tome ćemo detaljnije govoriti malo kasnije, ali za sada ću samo reći da će prioritet "div.a123" (za drugi Div u ovom primjeru) biti veći.

Inače, slična situacija se događa i s trećim Div iz našeg primjera. Za njega su prikladne dvije opcije odjednom: selektor oznake "div" i selektor klase ".xyz". Opet, zbog razloga koje još nisam objasnio (o tome pročitajte na linku gore), prioritet potonjeg bit će veći, pa će sadržaj trećeg spremnika biti obojen plavom bojom.

Idemo dalje. U gornjem primjeru imamo sljedeću oznaku paragrafa P, koja je napisana class = "a123". Ispostavilo se da ovaj element ne spada ni pod jedan od tri selektora koje smo napisali (sva trojica su ga propustila).

Ima samo preklapanje s drugom opcijom, ali ovaj selektor će se koristiti samo za Div oznake s klasom a123, ne i za paragraf tag P. Kao rezultat toga, boja teksta u ovom odlomku će ostati zadana, tj. crno.

Dalje u primjeru imamo element odlomka s klasom = "xyz". Posljednje CSS pravilo ".xyz (boja: plava)" bit će primijenjeno na njega. Stoga će tekst u ovom odlomku biti obojen plavom bojom. Ovdje je, mislim, sve jasno.

Generički selektor i jedinstveni ID

A sada prijeđimo na Id-ove, koje sam već spomenuo. Kad vidimo nešto u CSS kodu prednja mreža (hash), onda to znači da imamo posla s ID-om:

Obično je ovaj selektor napisan bez spominjanja oznake, na koje se odnosi (prva opcija u primjeru gore navedenom), iako je druga opcija pravopisa također prihvatljiva, ali se rijetko koristi. To je zbog činjenice da će vrijednost atributa Id u kodu biti jedinstvena, što znači da ne mogu postojati dva elementa s istim Id vrijednostima. Oni. nema smisla precizirati, iako to nije zabranjeno.

Stoga obično samo napišu hash (rešetku), a odmah iza njega vrijednost (ime) atributa Id. Pretpostavimo da imamo sljedeće pravilo za Id:

#leđa (boja: crvena)

a kod sadrži sljedeći isječak:

što će, kao rezultat primjene pravila nakon "#back" na njega, preglednik tumačiti na sljedeći način:

Div spremnik s jedinstvenim ID-om

Također, CSS predviđa univerzalni selektor označen zvjezdicom, što pokazuje da će se ovo pravilo općenito primjenjivati ​​na bilo koji element u kodu:

* (Crna boja)

U tom slučaju, tekst u bilo kojoj oznaci bit će crn (zadana boja). Jasno je da će svi ostali selektori (oznake, klase i Id) imati veći prioritet od univerzalnog.

Selektori atributa i njihova budućnost u modernom CSS-u

Sve gore opisane opcije (oznaka, klasa, Id i generički) će raditi u apsolutno svim preglednicima. Ali postoje i druge opcije koje ne rade svugdje.

Ova vrsta uključuje birače atributa, koji su vrlo praktični i omogućuju vam da značajno proširite i istovremeno pojednostavite mogućnosti djelovanja na točke, ali koji, nažalost, nisu 100% podržani od strane svih preglednika.

Kao što se vjerojatno sjećate, u HTML jeziku unutar oznaka možemo koristiti razne atribute koji nam omogućuju da damo određena svojstva sadržaju samih elemenata. Stoga bi bilo logično koristiti ne samo nazive oznaka kao selektore u CSS-u, već i nazive atributa.

Zapravo, to smo već učinili kada smo razmatrali klasu i Id, jer su oni u biti bili atributi nekih oznaka. Samo što su Aidi i Klass jako bitni u izgledu i razdvojeni su u zasebne grupe, svaka sa svojom sintaksom.

I kako koristiti druge atribute koji postoje u HTML jeziku (ne Id i ne klasa) u selektorima? Prilično jednostavno - stavite ih u uglaste zagrade:

(boja: zelena)

Sada će svaka oznaka u Html kodu, koja će imati "title", imati zelenu boju teksta.

Vrlo zgodno po mom mišljenju. Ali cijeli problem s korištenjem selektora atributa je to u IE 6 i ispod ne rade općenito, ili djeluju, ali samo djelomično. Sve dok udio korisnika koji surfaju internetom pomoću IE 6 ne bude jednak nuli, malo je vjerojatno da će se ova prikladna metoda široko koristiti u izgledu. Ali unatoč tome, morate znati za njihovo postojanje i moći ih koristiti.

Kao što možete vidjeti iz primjera, nije važno ima li atribut naveden u selektoru bilo kakvu vrijednost ili je prazan. Ali to je daleko od svega što se može učiniti s njim, jer ovo je samo pjesma.

Možete naznačiti u njima ne samo naziv atributa, već i njegovu vrijednost:

(boja: zelena)

Kao rezultat toga, CSS pravila napisana za takav selektor primjenjivat će se samo na oznaku koja ima "title" s vrijednošću "Prvi paragraf" (u našem primjeru, ovo će biti drugi redak):

Opisani primjer je bio stroga jednakost, ali ovaj selektor možete napisati ovako:

(boja: zelena)

Da. ovo CSS pravilo primjenjivat će se samo na one elemente HTML koda koji imaju riječ "paragraf" u "naslovu" (u našem primjeru, to će biti drugi i treći redak):

Sintaksa selektora atributa tumači «~=» kao "sadrži cijelu riječ". Na primjer, za element s naslovom = "(! LANG: Drugi odlomak" CSS правило «color:green» уже применяться не будет.!}

Ali umjesto toga možete staviti «*=» i tada će se uzeti u obzir ne samo pojedinačne riječi navedene u selektoru, već i dijelovi riječi (bilo koji dio teksta koji se nalazi bilo gdje u atributu):

(boja: zelena)

U ovom slučaju i za element s naslovom = "(! LANG: Drugi odlomak" сработает правило «color:green» и его текст подкрасится зеленым цветом. Надеюсь, что это понятно. Есть еще такой оператор как !} «^=» (sve što počinje vrijednošću u zagradama), što pomaže u stvaranju birača atributa poput ovoga:

(boja: crvena)

Vjerojatno se sjećate da je atribut naznačiti. Dakle, vrlo često se interne veze na stranici prave relativne, a vanjske veze, inače, kako ih učiniti apsolutnim, neće raditi.

Stoga će sve vanjske veze počinjati s "http", a interne veze mogu se specificirati u relativnom obliku bez korištenja "http". Da. selektor napisan u našem primjeru će dopustiti obojite sve vanjske veze na stranici(sve apsolutno) crvenom bojom. Pa, relativne one koje ne sadrže "http" ostat će u zadanoj boji. Po meni super!!!

Kao što vidite, selektori atributa nam daju puno mogućnosti, a činjenica da još nisu u širokoj upotrebi zasluga je vrlo siromašne i uvrijeđene tvrtke Melkosoft, a posebno njihove zamisli IE 6. No polako se počinju koristiti u CSS-u i uskoro će, naravno, ući u život.

Da, postoji još jedan operater «$=» - sve što završava navedenom vrijednošću:

(boja: zelena)

Kao rezultat toga, drugi i treći redak iz našeg prvog primjera bit će obojeni zelenom bojom. vrijednosti "title" završavaju s "raf". Ovako bi selektori atributa izvrsno radili u modernom CSS-u da nije određenog postotka korisnika IE 6.

Zapravo, od svih vrsta, ostaje nam da razmotrimo samo dvije:. Ali želim to prenijeti na sljedeći članak, gdje ćemo također govoriti o njihovim raznim kombinacijama.

Sretno ti! Vidimo se uskoro na stranicama blog stranice

Možda ćete biti zainteresirani

Selektori pseudoklasa i pseudoelemenata u CSS-u (lebdjenje, prvo dijete, prvi red i drugi), odnosi između oznaka u HTML kodu
Css prioriteti i pojačavanje s važnom, kombinacijom birača i grupiranjem, prilagođenim stilovima i stilovima autora
Stil liste (vrsta, slika, pozicija) - Css pravila za prilagođavanje izgleda popisa u HTML kodu
Pozadina u CSS-u (boja, pozicija, slika, ponavljanje, privitak) - sve za postavljanje boje pozadine ili pozadinske slike HTML elemenata
CSS - što je to, kako se kaskadni stilovi povezuju s html kodom pomoću stila i veze
Jedinice veličine (pikseli, Em i Ex) i nasljeđivanje CSS pravila
Čemu služi CSS, kako povezati kaskadne tablice stilova s ​​HTML dokumentom i osnove sintakse ovog jezika
Padding, Margin and Border - postavite unutarnje i vanjske margine u CSS-u, kao i granice za sve strane (gore, dolje, lijevo, desno) Kako postaviti izmjenu boje pozadine redaka tablica, popisa i drugih Html elemenata na web mjestu koristeći pseudoklasu nth-child
Kako pronaći i ukloniti neiskorištene stilske linije (dodatne selektore) u CSS datoteci vaše stranice
Prikaz (blok, nijedan, inline) u CSS-u - postavite vrstu prikaza HTML elemenata na web stranici

Ponekad, prilikom izrade web stranice, postaje potrebno primijeniti određeni stil na sve elemente koji se nalaze na stranici, bez iznimke. Za postizanje ovog zadatka koristi se univerzalni selektor.

Opis

Označava se kao simbol "*". Uz njegovu pomoć možete odabrati sve oznake na stranici odjednom bez unošenja ispravaka za njihovu namjenu i ugniježđenje. Na primjer:

* (veličina fonta: 18px;)

Ovim unosom dali smo svim elementima s tekstom visinu fonta od 18 piksela.

Pogledajmo to pobliže. Do druge verzije CSS-a nije postojao univerzalni selektor. Poklapa se sa svim elementima, tako da će se stilovi koje će imati biti primijenjeni na njih u isto vrijeme. Budite vrlo oprezni kada koristite ovaj selektor. Ovaj oprez uzrokovan je mogućom pojavom poteškoća u nasljeđivanju stilova, odnosno njihovim nepredvidivim ponašanjem.

Također je vrijedno napomenuti da korištenje klase, identifikatora, atributa omogućuje vam da preskočite univerzalni selektor bez ikakve štete. Na primjer:

*. lijevo (rub: 1px puni # 000;). lijevo (rub: 1px puni # 000;)

Ovi unosi nose isto semantičko opterećenje, a stil će se primijeniti na isti način i sa i bez univerzalnog selektora.

Gdje se može primijeniti?

U osnovi, univerzalni selektor nalazi se u praksi kada se nuliraju zadani stilovi preglednika. Na primjer, padding, veličine fonta i tako dalje.

Međutim, iako je ova metoda jednostavna, a također će značajno smanjiti duljinu koda, ona ima niz nedostataka.

Nedostaci univerzalnog selektora pri ispuštanju standardnih stilova:

• neki od stilova se ne mogu resetirati
• za atribut odabira ne može nula padding
• može "ubiti" standardni izgled gumba u većini preglednika
• Mozila radi s manjim greškama u pregledniku
• značajno usporava učitavanje stranica za Mozilu (međutim, ovo se odnosi na stranice s CSS-om više od tisuću redaka, inače je kašnjenje nevidljivo.)

Iz gore opisanih razloga, preporuča se da se izbace stilovi posebno za svaki element koristeći selektor tipa. Primjer sličnog koda za resetiranje stilova dat je na kraju.

Generički CSS selektor je možda najlakši za razumjeti, jer navodi da će se stilovi primijeniti na apsolutno sve elemente bez iznimke. Univerzalni selektor sastoji se od samo jednog znaka - zvjezdice (*), opća sintaksa je sljedeća:

* { svojstvo: vrijednost; svojstvo: vrijednost; ...)

Primjer korištenja CSS generičkog selektora

Stavak 1

Stavak 2

Stavak 3

Rezultat u pregledniku

Stavak 1

Stavak 2

Stavak 3

U ovom su primjeru uklonjene margine, dopuna i obrubi elemenata stranice. Čemu služi? Kao što već znate iz lekcije , neki HTML elementi u početku imaju određene vrijednosti nekih svojstava, na primjer, odlomci imaju gornje i donje margine razmaka koje nisu nula, veze na slike imaju okvire itd. Ali nije sve tako jednostavno, činjenica je da se u različitim preglednicima veličina ovih polja može neznatno razlikovati, a neki već dugo nisu postavili zadane okvire za veze na slike. I to nisu sve moguće razlike.

Dakle, mnogi dizajneri izgleda (a sada učite točno layout) kreiraju tzv. "Reset CSS stilova", odnosno na samom početku stylesheeta resetiraju sve moguće CSS vrijednosti različite od nule, a zatim u proces, dodati stilove elementima, ali već, naravno, sa svojim vlastitim značenjima. Na taj način možete biti sigurni da će HTML stranica izgledati isto u svim preglednicima.

Vrlo često se univerzalni selektor koristi za resetiranje stilova, iako neki radije jednostavno navode neke birače oznaka odvojene zarezima, a drugi uopće ne koriste resetiranje, oslanjajući se na njihovu brigu. Kako ćete postupiti ovisi o vama, ali u svakom slučaju prerano je razmišljati o tome. I budite uvjereni da ćete s vremenom razviti vlastiti stil pisanja (oprostite na tautologiji) pa se nemojte zamarati time.

Domaća zadaća.

Ne vidim smisla raditi zadaću na univerzalnom selektoru, budući da je ovdje sve previše očito, pa idemo malo drugačije.

1. Promijenite stilove oznake tako da izgleda kao odlomak. Koja vam je nekretnina potrebna za ovo, razmislite sami.
2. Promijenite oznaku odlomka tako da izgleda kao oznaka za isticanje dugih navodnika.
3. Pretvorite oznaku iz inline elementa u blok element. Za to iskoristite vlasništvo