CSS selektori su specifična CSS struktura koja vam omogućuje da odaberete određeni element u HTML kodu i stilizirate ga. Svaka od njih ima svoju specifičnost, to jest, može se preklapati na svojstvima drugih, više "slaba".

CSS selektor po oznaci i klasi

Najjednostavniji selektori - oznakom i klasom. Izbornik na oznaci je najčešći i odabire sve elemente s navedenom oznakom. Na primjer, možete napisati svojstva CSS koda u sljedećem obliku: p {color: blue} ", gdje je" p "oznaka odlomka, a boja: blue svojstvo označava boju teksta. Kao rezultat, tekst u odlomcima bit će plav. Selektori po oznakama mogu se brojati kroz zarez, onda nećete morati pisati dvaput.


Ako se nekim klasama dodjeljuje određena klasa, primjerice "plava", CSS selektor se može još preciznije prilagoditi. No, njegov unos u svojstva će biti drugačiji - točka će se pojaviti prije naziva klase. To jest, da biste odabrali sve paragrafe koji su dodijeljeni plavoj klasi i obojili ih plavom bojom, CSS svojstva trebaju biti napisana na sljedeći način: ".blue: {color: blue}". Ovaj je izbornik specifičniji od CSS selektora po oznaci i jači je od njega, ali je najjednostavniji. Postoje složenija pravila koja omogućuju odabir malih skupina elemenata.

Značajke selektora s identifikatorom

Selektori za id ili id ​​su specifičniji od klase i atributa. To jest, kada se koriste u kaskadi, oni će "nadmašiti" ostale slične selektore. Identifikatori će vam također pomoći da točno odabereteodređeni element u kodu, ali njihova uporaba u dizajnu stranica smatra se lošom praksom među planerima. Samo u vrlo rijetkim slučajevima, kao što je kreiranje klizača na CSS-u, ova praksa je neprihvatljiva. Činjenica je da unutar jedne stranice može biti samo jedan element s određenim id. Zbog toga, zbog jedinstvenosti CSS id selektora, može se koristiti samo za jedan jedini element. U ovom slučaju, mnogo je logičnije koristiti klase, a ne identifikatore.

Različite misli o selektoru po idu

No, postoji i suprotno stajalište da identifikator pomaže identificirati isječak koda na stranici koja bi trebala biti u jednoj instanci. U tom slučaju, iako ga mogu zamijeniti preklopnici klase, trebali bi se koristiti za velike skupine elemenata, a na mjestima gdje je potrebna točnost, bolje je koristiti id. Svaka majstorica ima pravo razvijati svoje osobno mišljenje o predmetu i pisati kod u svom stilu. Kada pišete selektor po ID-u, prije njega se koristi simbol "#". To znači da će linija koda izgledati ovako: "#blue: {color: blue}". S ovim unosom, stavka s ID # plavom bojom će biti obojana plavom bojom.

Korištenje kaskade

Kada koristite HTML CSS selektore na id, također možete koristiti kaskadno svojstvo. Na primjer, ako unutar oznake s identifikatorom koji želite odabrati podređenu oznaku i promijenite njezina svojstva, prvo trebate zabilježiti ime ID-a s rešetkom, zatim podređenu oznaku i njegova svojstva.Ti se selektori nazivaju ugniježđeni. To znači da će linija koda izgledati ovako: #id p {color: blue}. Tada će se boja teksta unutar roditeljskog elementa s ovim identifikatorom u dječjem stavku promijeniti u plavo.

Korištenje selektora podređenih elemenata

Druga opcija za korištenje kaskade za promjenu svojstava podređenih elemenata koristi se samo ako trebate odabrati određeni dio koda. Također se naziva i selektor potomaka. Na primjer, za odabir stavka unutar retka tablice koristi se sljedeći CSS selektorski unos: "ul li & gt; p: {boja: plava} ". Vrijedi obratiti pozornost na činjenicu da što je dulji zapis, to je veća vjerojatnost da će biti moguće promijeniti određeno svojstvo elementa, budući da postaje više prioritet za kaskadu. Na primjer, elementi s nekim drugim svojstvima nadređenog CSS selektora neće u cijelosti promijeniti svoja svojstva. Oslikava se samo određeni dio teksta unutar popisa.

Odabir sestrinskih elemenata

Još jedan zanimljiv način korištenja kaskadnih - sljedećih CSS selektora. Oni se bilježe kao zbroj selektora: "span + a {color blue}". U ovom slučaju, susjed je onaj pod kojim postoji drugi, koji odgovara traženim parametrima. Dakle, ako postoje tri elementa u kodu, onda se imovina ne odnosi na prvu, jer nema susjeda, i na sve kasnije - tako. To se događa kroz ikonu iznosa kada se kreiraju sljedeći selektori, a ne prethodni. Ovaj unos pomaže u smanjenju koda i ne bilježi više CSS selektora za različiteiste oznake na njih. Ako druga stavka u popisu specificira dodatnu klasu, a unos se mijenja u .class + a {color blue}, odbrojavanje će se ukloniti i svojstva će se promijeniti u sljedećim elementima pravila postavljanja, a prva dva će ostati ista.

Sada pretpostavimo da u našem kodu postoje tri identične oznake s različitim klasama i morate odabrati sve elemente nakon nekog određenog. U ovom slučaju, upotreba samo CSS tagova neće raditi. U tu svrhu koristi se selektor sljedeće vrste: ".class ~ div". Ovo odabire stavke s oznakom DIV, koje idu nakon određene klase. Ako ne želimo odabrati samo elemente s oznakom DIV, već sve sljedeće, umjesto oznake nakon znaka tilde, morate staviti znak zvjezdice - "*". Takav zapis će značiti da morate odabrati sve što slijedi nakon određene klase. Možete odabrati sve stavke na stranici, ako ostavite zvjezdicu kao selektor.

CSS selektori atributa

Pretpostavimo da naš kod sadrži elemente s nekim atributima, ali oni se međusobno razlikuju i pišu se kroz crticu, i moramo odabrati one u kojima ime klase počinje s određenom riječju na primjer, "selektor", a klase su odvojene znakom "-". Što trebam učiniti u ovom slučaju? Izborni unos počinje s uglatim zagradama, gdje se prvo upisuje ime atributa, zatim okomita kosa crta, znak "=" i "selektor": "data- | = selektor". Zatim napišemo željeno svojstvo koje želite promijeniti. Kao rezultat toga, stavka je odabrana s danimparametri. Promjenom klasa, možete promijeniti svojstva određenih dijelova koda. Ako se nazivi klasa ne pišu preko crtice, već jednom riječju, mogu se također odabrati, ali s malo drugačijim zapisom. U tom slučaju, vertikalna kosa crta zamjenjuje se simbolom "^": "data ^ = selektor". Ovaj birač odabire podniz s početkom naziva klase.

Kako odabrati stavku s određenim završetkom u nazivu klase

Sada ćemo raditi drugačije i odabrati dio koda ne od početka opisa klase, nego zadnjim slovima u njezinom imenu. Da bismo to učinili, trebamo značku za dolar. Stavimo ga na kvačicu, a nakon znaka jednakosti upisujemo kraj naziva klase: "data $ = ctor". Sada će biti odabrani elementi s tom kombinacijom slova i na njih će se primijeniti određena svojstva. Možete odabrati bilo koji atribut. Razmotrimo kako to učiniti ako trebamo pronaći element s nekom vrstom kombinacije slova usred riječi. U ovom slučaju, znak dolar mijenjamo na zvjezdicu, a nakon znaka jednakosti pišemo slova: "data * = ct".

Pseudo-klase - posebni selektori

CSS-stil prilagođeni selektori obično se koriste za veze, koje odražavaju njihova različita stanja: mirno, u fokusu, aktivno, prošlo - nazivaju se pseudo-klase. Pseudo-klasa za aktivnu vezu na koju se prikazuje pokazivač piše se kao "a: active". Sljedeće su neka svojstva, najčešće se pozadina mijenja ili se dodaje sjena. Ako dodate ovo svojstvo u vezu i kliknete na nju, ona će promijeniti boju u danu vezu. Još jedan pseudo-klasa hover pokazuje da je veza već prošla.Bilježi se kao "a: hover".