CSS selektori i njihovi tipovi

CSS selektori su specifična CSS struktura koja vam omogućuje da odaberete određeni element u HTML kodu i stilizirate ga. Svaki od njih ima svoju specifičnost, tj. Može preklapati druga, "slabija" svojstva.

CSS selektor po oznaci i klasi

Najjednostavniji selektori su po oznakama i po klasama. Izbornik oznaka je najčešći i odabire sve stavke s određenom oznakom. Na primjer, možete napisati sljedeći CSS kod u svojstvima: "p {color: blue}", gdje je "p" oznaka odlomka, a "color: blue" označava boju teksta. Kao rezultat, tekst u svim paragrafima će postati plav. Izbornici oznaka mogu se odvojiti zarezima, a ne morate pisati dvaput.

Ako se nekim odlomcima dodijeli klasa, primjerice "plava", odgovor CSS selektora može se još preciznije konfigurirati. No, njegov unos u svojstva će biti drugačiji - točka će se pojaviti ispred imena klase. To jest, da biste odabrali sve stavke kojima je dodijeljena "plava" klasa i obojili ih plavom bojom, morate u CSS svojstva upisati sljedeći kod: ".blue: {color: blue}". Ovaj je izbornik specifičniji od CSS selektora po oznaci i jači je od njega, ali je jedan od najjednostavnijih. Postoje složenija pravila koja omogućuju odabir malih skupina elemenata.

Značajke selektora po ID-u

Selektori po id ili po id su specifičniji od klase i atributa. To jest, kada se koriste u kaskadi, oni će "nadmašiti" ostale slične selektore. Identifikatori također pomažu u preciznom odabiru određenog elementa u kodu, ali njihova uporaba u dizajnu stranica smatra se lošom praksom među web dizajnerima. Ova praksa je prihvatljiva samo u vrlo rijetkim slučajevima, primjerice kod stvaranja klizača na CSS-u. Činjenica je da unutar jedne stranice može biti samo jedan element s određenim id. Prema tome, zbog jedinstvenosti CSS selektora po idu, može se koristiti samo za jedan element. U ovom slučaju, mnogo je logičnije koristiti klase, a ne identifikatore.

Različita mišljenja o selektoru id-a

Ali postoji i suprotno mišljenje da identifikator pomaže identificirati taj dio koda na stranici, koji bi trebao biti u jednom primjerku. Istodobno, iako ga klasni selektori mogu zamijeniti, trebali bi se koristiti za velike skupine elemenata, au onim mjestima gdje je potrebna preciznost, bolje je koristiti id. Svaki pisaći stroj ima pravo razvijati svoje osobno mišljenje o tom pitanju i pisati kod u svom stilu. Kod pisanja selektora na id ispred njega, koristi se simbol "#". To znači da će redak koda izgledati ovako: "#blue: {color: blue}". S takvim zapisom, element s identifikatorom "#blue" bit će obojen u plavo.

Kaskadno korištenje

Kada koristite CSS selektore po ID-u u HTML-u, možete koristiti i kaskadno svojstvo. Na primjer, ako trebate odabrati neku podređenu oznaku unutar oznake s identifikatorom i promijeniti njezina svojstva, prvo morate napisati ime identifikatora s rešetkom, zatim dječju oznaku i njezina svojstva. Takvi se selektori nazivaju ugniježđeni. To jest, linija koda će izgledati ovako: "#id p {color: blue}". Zatim se unutar roditeljskog elementa s ovim identifikatorom u dječjem stavku boja teksta mijenja u plavu.

Korištenje dječjih selektora

Druga mogućnost korištenja kaskade za promjenu svojstava podređenih elemenata koristi se ako trebate odabrati samo određeni dio koda. Također se naziva selektor nasljednika. Na primjer, da biste odabrali stavku unutar retka tablice, koristite sljedeći unos CSS selektora: “ul li> p: {color: blue}”. Vrijedno je obratiti pozornost na činjenicu da što je dulji zapis, to je veća vjerojatnost da ćete moći promijeniti određeno svojstvo elementa, jer postaje više prioritet za kaskadu. Na primjer, elementi s nekim drugim svojstvom CSS selektora na klasi koja je nadređena neće u potpunosti promijeniti njihova svojstva. Samo će određeni dio teksta unutar popisa biti prebojen.

Izbornik sestrinskog elementa

Još jedan zanimljiv način korištenja kaskadnih su susjedni CSS selektori. Oni se bilježe kao zbroj selektora: “span + a {color blue}”. U ovom slučaju, susjed je onaj pod kojim postoji drugi koji odgovara potrebnim parametrima. Dakle, ako u kodu postoje tri elementa, tada se vlasništvo neće primijeniti na prvi od njih, jer nema susjednog, kao i svih sljedećih, da. To je zbog ikone zbroja, kada se dodaju sljedeći selektori, a ne prethodnih. Takav zapis pomaže smanjiti kod i ne napisati više CSS selektora za različite oznake, primjenjujući ista svojstva na njih. Ako je drugi element popisa također postavljen na klasu, a zapis je promijenjen u “.class + a {color blue}”, odbrojavanje će početi od njega i svojstva će se promijeniti za sljedeće elemente koji odgovaraju pravilu, a prva dva će ostati ista.

Sada pretpostavimo da u našem kodu postoje tri identične oznake s različitim klasama i da morate odabrati sve elemente nakon neke specifične. U ovom slučaju, primjena samo CSS oznaka selektora neće pomoći. Da biste to učinili, upotrijebite sljedeći odabir: ".class ~ div". Time se odabiru elementi s oznakom DIV koja slijedi navedenu klasu. Ako ne želimo odabrati samo elemente s oznakom DIV, nego sve sljedeće, umjesto oznake nakon znaka tilde, trebamo staviti zvjezdicu - "*". Takav zapis znači da morate odabrati sve što slijedi nakon određene klase. Općenito možete odabrati sve elemente na stranici, ako kao selektor ostavite samo zvjezdicu.

CSS selektori atributa

Pretpostavimo da u našem kodu postoje elementi s nekim atributima, ali svi se međusobno razlikuju i pišu se crticom, a mi moramo odabrati sve one čije ime klase počinje s određenom riječju, na primjer, “selektor”, a klase su odvojene znak "-". Što učiniti u ovom slučaju? Izborni unos počinje s uglatim zagradama, gdje se prvo upisuje ime atributa, zatim okomita kosa crta, znakovi "=" i "selektor": "data- | = selektor". Zatim napišite željeno svojstvo koje želite promijeniti. Kao rezultat toga, odabire se element s navedenim parametrima. Promjenom klasa, možete promijeniti svojstva određenih dijelova koda. Ako nazivi klasa nisu napisani crticom, već jednom riječju, mogu se također odabrati, ali s malo drugačijim unosom. U tom slučaju, okomita crta se zamjenjuje simbolom "^": "podaci ^ = selektor". Ovaj birač odabire podniz s početkom naziva klase.

Kako odabrati element s definitivnim završetkom u nazivu klase

Sada ćemo djelovati drugačije i izabrati dijelove koda ne na početku opisa razreda, nego na posljednja slova u njegovu imenu. Za to nam je potrebna ikona za dolar. Stavimo ga umjesto potvrdnog okvira, a nakon znaka jednakosti upisujemo kraj naziva klase: “data $ = ctor”. Elementi s ovom kombinacijom slova sada će odabrati određena svojstva i primijeniti ih. Možete odabrati bilo koji atribut. Hajde da analiziramo što učiniti ako trebamo pronaći element s nekom kombinacijom slova usred riječi. U ovom slučaju, znak dolar mijenjamo u zvjezdicu, a nakon znaka jednakosti upisujemo potrebna slova: "data * = ct".

Pseudo-klase - posebni selektori

Za poveznice se obično koriste posebni CSS selektori, koji prikazuju njihova različita stanja: mirna, fokusirana, aktivna, prošla - nazivaju se pseudo-klase. Pseudo-klasa za aktivnu vezu na koju se pokazuje pokazivač piše se ovako: "a: aktivno". Nadalje, postoje neka svojstva, najčešće se mijenja pozadina ili se dodaje sjena. Ako dodate ovo svojstvo za vezu i kliknete na nju, ona mijenja boju u navedenu. Još jedna pseudo-klasa - hover pokazuje da je veza već prošla. Pisano je ovako: "a: hover".

Značajke aktivnih i fokusnih stanja

Aktivno se često miješa s drugim fokusom na stanje. Snima se ovako: "a: fokus" i označava aktivno stanje gumba dok radite s tipkovnice. To jest, ako koristite TAB tipku, aktivna veza će biti označena posebnom bojom. Ovo se svojstvo mora koristiti jer svi korisnici ne mogu koristiti miša za kretanje po mjestu. Neki mogu imati slab vid ili druga zdravstvena ograničenja, pa se kreću po stranici pomoću ključeva ili posebnih uređaja. Ignoriranje stanja gumba u fokusu je veliki nedostatak za takav parametar u dizajnu web-mjesta kao pristupačnosti i ima značajan utjecaj na njegovu prisutnost određene kategorije korisnika. Uz normalnu navigaciju mišem, veza postaje aktivna i fokusirana. Stoga je pri oblikovanju elemenata važno obratiti pažnju na to.

pseudo

Pseudo-elementi omogućuju vam da definirate određene stilove bez definiranja u samoj HTML strukturi. Oni su napisani ovako: ime selektora, znak "::", ime pseudo elementa. Najčešći elementi su "prije" i "poslije". Oni imaju svojstvo "sadržaj", ne mogu se primijeniti na unutarnje stilove. "Nakon" je potrebno za dodavanje sadržaja nakon sadržaja određene stavke. Što je točno potrebno umetnuti zapisano je u svojstvo "sadržaja". Slično tome, pseudo-element "prije" dodaje sadržaj prije sadržaja elementa. Korištenje ovih posebnih selektora omogućuje vam da smanjite kod i ne napišete novu strukturu svaki put za neki njegov dio, ako trebate dodati mali detalj na određeno mjesto u spremniku. Vrlo se često koriste pri oblikovanju stranica i dodavanju neke vrste dekorativnih elemenata. Kombinacije svih ovih opcija pomažu u stvaranju neobičnih efekata na stranici i uvelike pomažu dizajneru izgleda.