CSS selektoriai

Lukas

CSS kalba turi selektorius, per kuriuos yra priskiriamos taisyklės. Selektorius tai yra ta dalis, kuri parenka kokiems html elementams bus taikomos css taisyklės. Šioje lentelėje galite matyti CSS1, CSS2 ir CSS3 kalbų versijų selektorius. Lentelėje selektoriai yra tarptautine angliška išraiška parašyti tam, kad supratę šią lentelę galėtumėte lengvai susigaudyti užsienio puslapiuose. Po lentele yra simbolių ir angliškų žodžių paaiškinimai. Jei norite pilnai suprasti visus selektorius, turite gerai mokėti html kalbą. Apie html skaitykite html skiltyje.

CSS selektorių lentelė su paaiškinimais

E - bet koks html elementas
foo - betkokia reikšmė
bar - betkokia reikšmė

Labiausiai naudojamus pajuodinau. Gali būti, kad jūs naudojat dažniau kitus selektorius.

Selektorius	Paaiškinimas	Tipas	Nuo CSS
*	Bet koks elementas	Universalus selektorius	2
E	Elementai pagal tipą, t.y. kokia nors HTML žymė: div, table, td, strong, span, body ir t.t.	Pagal elemento tipą	1
E[foo]	Elementas su atributu laužtiniuose skliaustuose, pvz.: div[width]	Pagal atributą	2
E[foo="bar"]	Elementas su atributu laužtiniuose skliaustuose ir jo konkrečia reikšme, pvz.: div[class="testas"]	Pagal atributą	2
E[foo~="bar"]	Elementas, kurio atributo reikšmės yra kelios ir surašytos atskiriant tarpu, viena iš jų yra tokia kaip "bar", pvz.: div[class~="testas"]	Pagal atributą	2
E[foo^="bar"]	Elementas, kurio atributo reikšmė prasideda būtent taip pat kaip "bar", pvz.: div[class^="test"]	Pagal atributą	3
E[foo$="bar"]	Elementas, kurio atributo reikšmė pasibaigia būtent taip pat kaip "bar", pvz.: div[class$="test"]	Pagal atributą	3
E[foo*="bar"]	Elementas, kurio atributo reikšmėje yra "bar", pvz.: div[class*="test"]	Pagal atributą	3
E[foo\|="en"]	Elementas, kurio atributo reikšmės yra kelios ir surašytos atskiriant brūkšneliu, reikšmės pradžia yra tokia kaip "bar", pvz.: div[class\|="testas"]	Pagal atributą	2
E:root	Pagrindinis HTML dokumento elementas, HTML 4 kalboje jis visada yra <html>	Pagal struktūrinę pseudo klasę	3
E:nth-child(n)	n-tasis vidinis elementas, pvz.: tr:nth-child(odd)	Pagal struktūrinę pseudo klasę	3
E:nth-last-child(n)	Elementas n-tasis vidinis elementas, skaičiuojant nuo paskutinio, Pvz.: tr:nth-last-child(-n+2) paims dvi paskutines lentelės eilutes	Pagal struktūrinę pseudo klasę	3
E:nth-of-type(n)	n-tasis elementas pagal tipą, pvz.: img:nth-of-type(2n+1)	Pagal struktūrinę pseudo klasę	3
E:nth-last-of-type(n)	n-tasis elementas pagal tipą, skaičiuojant nuo paskutinio	Pagal struktūrinę pseudo klasę	3
E:first-child	Elementas, pirmas tėvinio vidinis elementas, pvz.: div > p:first-child paims pirmą paragrafą esantį viduje div	Pagal struktūrinę pseudo klasę	2
E:last-child	Elementas esantis tėvinio elemento paskutinis vidinis elementas, pvz.: ol > li:last-child	Pagal struktūrinę pseudo klasę	3
E:first-of-type	Elementas, pirmas tokio pat tipo, pvz.: dl dt:first-of-type	Pagal struktūrinę pseudo klasę	3
E:last-of-type	Elementas, paskutinis tokio pat tipo, pvz.: dl dt:last-of-type	Pagal struktūrinę pseudo klasę	3
E:only-child	Elementas, kuris turi tėvinį elementą ir jo tėvinis elementas neturi daugiau vidinių elementų, tik jį patį. Tas pats kaip :first-child:last-child arba :nth-child(1):nth-last-child(1)	Pagal struktūrinę pseudo klasę	3
E:only-of-type	Elementas, kuris turi tėvinį elementą ir jo tėvinis elementas neturi daugiau tokio pat tipo vidinių elementų, tik jį patį. Tas pats kaip :first-of-type:last-of-type arba :nth-of-type(1):nth-last-of-type(1)	Pagal struktūrinę pseudo klasę	3
E:empty	Elementas, kuris nieko neturi savo viduje, pvz p:empty paims visus <p></p>	Pagal struktūrinę pseudo klasę	3
E:link E:visited	*Elementas, kuris yra nuoroda dar nelankyta (:link) ir jau lankyta (:visited)*	Nuorodų pseudo klasė	1
E:active E:hover E:focus	Elementas su vartotojo veiksmais. :active - laiko tarpas, kol vartotojas laiko paspaudęs pelės mygtuką ant elemento, bet dar neatleidęs. :hover - laiko tarpas, kol vartotojas yra užėjęs su pelės žymekliu ant elemento. :focus - laikas, kai vartotojas sufokusavęs pelės žymeklį ant elemento, pvz įvedimo lauko.	Vartotojo veiksmų pseudo klasės	1 ir 2
E:target	Elementas, į kurį nurodo inkaro tipo nuoroda (URI), pvz.: p.tekstas:target paims elementą p, kurio klasė yra tekstas ir į jį rodo nuoroda tokiu būdu: http://www.adresas.lt/index.php#tekstas	Nuorodos taikinio pseudo klasė	3
E:lang(fr)	Elementas tokio tipo kaip E ir su kalba "fr"	Kalbos pseudo klasė	2
E:enabled E:disabled	a user interface element E which is enabled or disabled Vartotojo sąsajos (UI) elementas E, kuris yra aktyvus (:enabled) arba ne (:disabled)	Vartotojo sąsajos (UI) elementų būsenos pseudo klasė	3
E:checked	a user interface element E which is checked (for instance a radio-button or checkbox) Vartotojo aplinkos (UI) elementas E, kuris yra pažymėtas, taikomas radio mygtukams ir checkbox dėžutėms	Vartotojo sąsajos (UI) elementų būsenos pseudo klasė	3
E::first-line	Pirma E elemento formatuota eilutė	Pirmos eilutės pseudo elementas	1
E::first-letter	Pirma E elemento teksto raidė	Pirmos raidės pseudo elementas	1
E::before	Sugeneruotas turinys prieš elementą E	::before pseudo elementas	2
E::after	Sugeneruotas turinys po elemento E	::after pseudo elementas	2
E.bandom	Elementas E su klase bandom	Klasės selektorius	1
E#manoid	Elementas E su id manoid	ID selektorius	1
E:not(s)	Elementai kurie nėra tokie, kuriuos paima selektorius s, pvz.: :not(div) reiškia visi elementai tik ne div*an	Neigimo pseudo klasė	3
E F	*F elementas, kuris yra viduje E elemento. Jei naudosite išraišką E F, tai reikš F elementas, kuris yra viduje E elemento, arba yra vidinis vidinių E elementų elementas**	Vidinių elementų kombinacija	1
E > F	F elementas, kuris yra vidinis E elemento elementas	Vidinių elementų kombinacija	2
E + F	F elementas, kuris yra iš karto po E elemento. Ne viduje, o po jo!	Šalimos giminystės kombinacija	2
E ~ F	F elementas, kuris yra po E elemento. Ne viduje, o po jo ir nebūtinai iš karto!	Tolimos giminystės kombinacija	3