Praneškite apie mus:


CSS selektoriai

0

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 divan
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

 

Paaiškinimas: Nuo CSS rodo nuo kelintos CSS versijos pradėtas naudoti.

Pilna informacija anglų kalba: http://www.w3.org/TR/css3-selectors/

 

Perskaityta: 4775 kartų

Lukas
Autorius: Lukas
El. paštas.: Šis el. pašto adresas yra apsaugotas nuo spam botų. Jum reikalingas įjungtas Javasctipt kad jį matytumėte
Manualai.lt tinklo autorius ir administratorius. VDU Energetikos Fizikos ir Verslo Informatikos studentas. LinkedIn
Raktažodžiai
css    pazengusiems    selektoriai    klasės    css3    id   
Patinka straipsnis?
Komentarai

Komentarų nėra. Norėdami komentuoti turite prisijungti