CSS pseido klašu špikeris – CSS pseudo class cheat sheet

Vienkāršie selektori

Selektors

 Sintakse

Piemērs
Element element div {

}
Class .class .alpha { }
ID #id #alpha { }
Universal * * { }

Vienkāršo selektoru variācijas

Elements Sintakse Piemērs Description
Two classes .first-class.second-class .alpha.beta { } Visi elementi ar alfa un beta klasēm
Element and class element.class p.alpha { } Visi alfa klases elementi iekšpusē <p>
Two elements element, element p, div { } Visi <p> un <div> elementi
Two elements element element p div { } Visi <div> elementi iekšpusē <p>

Descendant selectors/combinators

Selektors Sintakse Piemērs Apraksts
Descendant element element div p { } Visi <p> <div> pēcteči
Child element>element div > p { } Visi <p> tiešie <div> pēcteči
Adjacent Sibling element+element div + p { } <p> elements tieši aiz <div>
General Sibling element~element div ~ p { } Visas <p> elementu iterācijas pēc <div>

Atribūtu selektori

Selektors Sintalse Piemērs
[attribute] [href] {

}

 Atlasa visus elementus ar atribūtu href
[attribute=value] [lang=”fr”] {

}

 Atlasa visus elementus ar lang atribūtu, kura vērtība ir “fr”
[attribute~=value] [input~=hello] {

}

 Elementi ar ievades atribūtu, kas satur atstarpi atdalītu apakšvirkni “hello”
[attribute|=value] [lang|=en] {

}

 Elementi ar lang atribūta vērtību, kas vienāda ar “en” vai “en-” (en defise)
[attribute^=value] a[href^=”https”] {

}

 Katrs <a> elements ar href atribūta vērtību sākas ar “https”
[attribute$=value] a[href$=”.docx”] {

}

 Katrs <a> elements ar href atribūta vērtību beidzas ar “.docx”
[attribute*=value] a[href*=”meta”] {

}

 Katram <a> elementam ar atribūta href vērtību ir apakšvirkne “meta”

 

Pseido-klase Piemērs Selektora apraksts
:active a:active { } Visas aktīvās saites
:checked input:checked { } Visi pārbaudītie <input> elementi
:default input:default { } Visi noklusējuma <input> elementi
:disabled input:disabled { } Visi atspējotie <input> elementi
:empty div:empty { } Visi <div> elementi bez bērniem
:enabled input:enabled { } Visi iespējotie <input> elementi
:first-child p:first-child { } Visi <p> elementi, kas ir vecāka elementa pirmie atvasinātie elementi
:first-of-type p:first-of-type { } Visi <p> elementi, kas ir pirmelementa <p> elementi
:focus input:focus { } Ievades elements fokusā
:fullscreen :fullscreen { } Elements pilnekrāna režīmā
:hover p:hover { } Darbības efekts peles kursorā
:invalid input:invalid { } Ievadiet elementus ar nederīgu vērtību
:last-child p:last-child { } Visi <p> elementi, kas ir vecāka elementa pēdējie atvasinātie elementi
:last-of-type p:last-of-type { } Visi <p> elementi, kas ir pēdējais vecāka elementa <p> elements
:link a:link { } Visas neapmeklētās saites
:not(selector) :not(div) { } Visi elementi, kas nav <div> elements
:nth-child(n) div:nth-child(3) { } Visi <p> elementi, kas ir vecāka elementa trešais atvasinātais elements
:nth-last-child(n) div:nth-last-child(3) { } Visi <div> elementi, kas ir vecākelementa trešais bērnelements, skaitot no pēdējā pakārtotā elementa
:nth-last-of-type(n) p:nth-last-of-type(2) { } Otrais brālis un māsa no vecākelementa pēdējā atvasinājuma.
:nth-of-type(n) p:nth-of-type(2) { } Vecāka elementa otrais brālis.
:only-of-type p:only-of-type { } Visi <p> elementi, kas ir tikai <p> elementi savā vecākajā
:only-child p:only-child { } Visi <p> elementi, kas ir tikai vecākelementa atvasinātie elementi
:optional input:optional { } Ievades elementi bez “obligātā” atribūta
:required input:required { } Atlasa ievades elementus ar norādīto atribūtu “obligāts”.
:root :root { } Dokumenta saknes elements
::selection ::selection { } Lietotāja atlasītā elementa daļa
:valid input:valid { } Visi ievades elementi ar derīgu vērtību
:visited a:visited { } Atlasa visas apmeklētās saites

Pseido-elementu selektori

Sintakse Piemērs Apraksts
::after p::after { } Ievieto saturu aiz <p> elementa satura
::before p::before { } Ievieto saturu pirms <p> elementa satura
::first-letter p::first-letter { } Atlasa katra <p> elementa pirmo burtu
::first-line p::first-line { } Atlasa katra <p> elementa pirmo rindu
::placeholder input::placeholder { } Atlasa ievades elementus ar norādītu atribūtu “placeholder”.
::marker ::marker { } Atlasa marķierus sarakstā

Loading

Noderīgs raksts? Dalies ar citiem:
Dalīties: