CSS3-logo   jQuery-logo   CSS og jQuery Selektorer



CSS-reglernes navnedel kaldes "selektor". Der findes (som det ses nedenfor) ca. 40 forskellige former for selektorer. Kun 2 er brugerstyrede, mens resten er styrede af / knyttede til den anvendte HTML-kode. I praksis synes de 2 brugerstyrede dog at være langt de vigtigste.

De manuelt indsatte kan man selv styre brugen af.

De HTML-styrede har man ikke tilsvarende styr på. Når man etablerer en selektor til en given situation kan situationen enten være opstået tidligere eller den kan opstå senere - uden at disse ønskes CSSet.

CSS-selektorer kan som hovedregel bearbejdes dynamisk fra jQuery. Der er dog nogle få CSS-selektorer, der ikke kan behandles med jQuery. Omvendt har jQuery en del egne selektorer, der ikke har nogen makker i CSS. jQuery selektorerne er indarbejdet i tabellen nedenfor.



Gruppering af selektorer


Selektorer kan opdeles i 4 hovedklasser og flere pseudoklasser:


LinkKlassebetegnelseVirke-
måde
Kommentarer
Hovedklasser
xID#id=".."
på brugssted
Kan kun bruges 1 gang pr. HTML-dokument.
Må ikke indeholde tag-navne eller class-regler.
xClassclass=".."
på brugssted
Kan bruges ubegrænset antal gange pr HTML-dokument. Flere class-selektorer kan knyttes til samme tag.
Må ikke indeholde tagnavne.
xTagFra stylesheetGælder universelt for det pågældende tag.
Antallet af tag-regler bør holdes begrænset.
xUkorrekteFra stylesheetGælder universelt når de ikke begynder med "#" eller ".".
Attributter
Kan være selvstændige selektorer eller tilføjelser til tag-selektorer.
Skal altid være indrammet af [].
xAttributterFra stylesheetGælder universelt for den pågældende attribut, medmindre den er knyttet til et tag.
xPseudoklasser
Skal (næsten) alle knyttes til et tag. Har alle ":" som første karakter / skilletegn overfor det tag de knyttes til.
xDynamiskeKan kun anvendes sammen med hhv. a- og input-tags.
xTarget?
xSprogSkal have sprogkode tilknyttet
xBruger interfaceKan kun anvendes sammen med input-taggen.
xStrukturelleAnvendes (bortset fra :root) til håndtering af forskellige tekstrelaterede situationer.
xNegation?
xPseudo tagsAnvendes til håndtering af forskellige tekstrelaterede situationer.
xjQuerySelektorer, der ikke anvendes i CSS, men kun i jQuery.



xAnbefaling fra W3 for selektorer til CSS3.
xW3Schools - CSS Selektorer.
xjQuery - selektorer.



Selektorer

Selektor grundformSyntax i CSSEksempel i jQueryBeskrivelseKodeeksempel (CSS) Links 

ID

      "id-selektor"       Manuel tilknytning i HTML-dokument
#id#navn$(".lastname")Kan kun bruges 1 gang.
Knyttes til tag ved at indsætte id="navn".
#navn{ background:yellow;} x x x

Class

      "class-selektor"       Manuel tilknytning i HTML-dokument.
.class.navn$(".intro")Kan benyttes ubegrænset antal gange.
Knyttes til tag, ved at indsætte class="navn".
.navn{ background:yellow;} x x x

Tag

      "tag-selektor"       Alle selektorer, der begynder med tag.
**$("*")Universal. Sletter / undertrykker alle deklarationer som skjult er knyttet til den enkelte browser. De deklarationer, der knyttes til "*", indsættes i stedet som globale.*{ background:yellow;} x x x
tagp$("p")Knyttes til alle forekomster af det anførte tag.p{ background:yellow;} x x
tag tagdiv p$("div p")Knyttes til alle forekomster af tag2 etc., der er indlejrede i et umiddelbart overliggende niveau.
Tagstrengen kan have ubegrænset længde.
div p{ background:red;} x x x
tag*tagdiv*pBruges ikke i jQueryKnyttes til alle forekomster af tag2, der er indlejrede i tag1 i andet niveau.div>p{ background:yellow;} x
tag>tagdiv>p$("div > p")Knyttes til alle forekomster af tag2, der er indlejrede i tag1 i første niveau.div>p{ background:red;} x x x
tag+tagdiv+p$("div + p")Knyttes til alle forekomster af tag2, der er placeret umiddelbart efter afslutningen af tag1.div+p{ background:red;} x x x
tag,tagdiv,p$("h1,div,p")Knyttes til alle forekomster af to eller flere tagsh1,p {background:yellow;} x x x
tag1~tag2p~ul$("div ~ p")Knyttes til alle linier i liste, der har det anførte tag brugt lige ovenoverp~ul {background:#f00;} x x x

Ukorrekte

      fejl-selektor       Selektorer med enhver form for ureglementeret opbygning.
alt muligt ureglementeretIndeholder de "#" betragter browseren dem som id-selektorer. Indeholder de "." betragter browseren dem som class-selektorer.
Kan få en browser til at gå i "koma".
Vil efter al sandsynlighed blive fanget ved W3-validering. x
F.eks:
#bookmarkMenuItem > .menu-left { list-style-image: url(blah) }

Attributter

      attribut-selektor       Selektorer der styrer attributter i tags.
Kan knyttes til tags.

      Attribut selektion
[attribute][target]$("[href]")Knyttes til alle tags, der indeholder den pågældende attribut.a[target]{ background:yellow;} x x x
[attribute= værdi][target=_blank]$("[href= 'default.htm']")Knyttes til alle tags, der indeholder den pågældende attribut og den anførte værdi svarer nøjagtigt til attributtens værdi.a[target=_blank]{ background:red;} x x x
[attribute~= værdi][title~=flower]$("[name~= 'hello']")Knyttes til alle tags, der indeholder den pågældende attribut og den anførte værdi indgår i attributtens værdi.[title~=blomst]{ background:red;} x x x
[attribute|= værdi][lang|=en]$("[hreflang|= 'en']")Knyttes til alle tags, der indeholder den anførte 2-cifrede sprogkode i deres lang-attribut.[lang|=da]{ background:red;} x x x

      Substreng selektion
[attribut^= værdi]a[src^="https"]$("[name^= 'hello']")Knyttes til alle tags der har tilknyttet den anførte attribut - og denne begynder med substreng med den anførte værdi.div[class^="test"]{background:#ff0;} x x x
[attribut$= værdi]a[src$=".pdf"]$("href$= '.jpg'")Knyttes til alle tags der har tilknyttet den anførte attribut - og denne slutter med substreng med den anførte værdi.div[class$="test"]{background:#ff0;} x x x
[attribut*= værdi]a[src*= "webdok"]$("[name*= 'hello']")Knyttes til alle tags der har tilknyttet den anførte attribut - og denne indeholder substreng med den anførte værdi.div[class*="test"]{background:#ff0;} x x x

Pseudo klasser

     


Baseret på information, der ligger udenfor "dokumenttræet"
eller som ikke kan udtrykkes med simple selektorer.
Kendetegnet ved foranstillet ":".
Skal (bortset fra :root) knyttes til et tag.

Dynamiske

      Knyttet til links og input-felter
:linka:linkBruges ikke i jQueryKnyttes til alle ikke-besøgte links.a:link {background:red;} x x
:visiteda:visitedBruges ikke i jQueryKnyttes til alle besøgte, men forladte links.a:visited {background:red;} x x
:hovera:hoverBruges ikke i jQueryKnyttes til alle links, med aktivering når markøren føres hen over.a:hover {background:red;} x x
:activea:activeBruges ikke i jQueryKnyttes til alle links, der p.t. er aktive.a:active {background:red;} x x
:focusinput:focus$(":focus")Knyttes til input type="text"-felter med markør aktiv.input:focus {background:red;} x x x
Ingen understregning under links.a {text-decoration:none;}
Ingen farveskift ved tryk af mus etc.a:link {color:inherit;}

Target

     
:target#news:targetBruges ikke i jQueryKnytter billede eller anden funktionalitet til "Til"-linket i interne hash-links.
(Fra: <a href="#window">....</a>
Til: <a id="window"> </a>)
.
a:target{ content:url (/..sti../ check01.gif);}
Som benyttet i Webdok.
x x

Sprog

     
:lang(sprog)p:lang(da)$("p:lang(da)")Knyttes for mange tekstindeholdende tags til teksten i taggen, når denne har tilknyttet attributten lang="xx" med den samme sprogkode.p:lang(it){ background:yellow;} x x x

Bruger interface

     
:enabledinput:enabled$(":enabled")Knyttes til alle aktive input type="text"-felter.input[type="text"]: enabled {background:#ff0;} x x x
:disabledinput:disabled$(":disabled")Knyttes til alle inaktive input type="text" disabled-felter.input[type="text"]: disabled {background:red;} x x x
:checkedinput:checked$(":checked")Knyttes til type="radio"- og type="checkbox"-knapper.input:checked {background:#f00;} x x x

Strukturelle

     
:root:root$(":root")Knyttes til HTML-dokumentets "rod": Dokumentets HTML-tag.:root {background:#f00;} x x x
:emptyp:empty$(":empty")Knyttes til tekstindeholdende tags, der ikke indeholder tekst.p:empty {background:#f00;} x x x
:first-childp:first-child$("p:first-child")Knyttes for tekstindeholdende tags til teksten i taggen første gang taggen anvendes indlejret i en anden tag.p:first-child{ background:red;} x x x
:last-childp:last-child$("p:last-child")Knyttes for tekstindeholdende tags til teksten i taggen sidste gang taggen anvendes indlejret i en anden tag.p:last-child {background:#f00;} x x x
:only-childp:only-child$("p:only-child")Knyttes for tekstindeholdende tags til når taggen er eneste indlejring i en anden tag og kun forekommer 1 gang.p:only-child {background:#f00;} x x x
:nth-child(n)p:nth-child(n)
p:nth-child (odd)
p:nth-child (even)
$(" p:nth.child(2)")Knyttes til det n'te tag under body-tagget og viser resultatet af CSS-koden forudsat det pågældende tag svarer til det i CSS-koden.
Ved indsættelse af odd eller even markeres hver anden linie med resultatet af CSS-koden med samme forudsætning som før.
p:nth-child(2) {background:#f00;} x x x
:nth-last-child(n)p: nth-last-child(n)$("p:nth-last-child(2)")Knyttes til det n'te tag over /body-tagget og viser resultatet af CSS-koden forudsat det pågældende tag svarer til det i CSS-koden.
Ved indsættelse af odd eller even markeres hver anden linie med resultatet af CSS-koden med samme forudsætning som før.
p:nth-last-child(2) {background:#f00;} x x x
:first-of-typep:first-of-type$("p:first-of-type")Knyttes for tekstindeholdende tags til første gang den forekommer efter en overskrift etc.p:first-of-type {background:#f00;} x x x
:last-of-typep:last-of-type$(" p:last-of-type")Knyttes for tekstindeholdende tags til sidste gang den forekommer efter en overskrift etc.p:last-of-type {background:#f00;} x x x
:only-of-typep:only-of-type$(" p:only-of-type")Knyttes for tekstindeholdende tags til når taggen kun forekommer 1 gang indlejret i en anden tag.p:only-of-type {background:#f00;} x x x
:nth-of-type(n)p:nth-of-type(n)$(" p:nth-of-type(2)")Knyttes for tekstindeholdende tags hver n'te gang taggen forekommer oppefra i en ubrudt sekvens. Istedet for "n" kan anvendes odd og evenp:nth-of-type(2){background:#f00;} x x x
:nth-last-of-type(n)p:nth-last-of-type(n)$(" p:nth-last-of-type(2)")Knyttes for tekstindeholdende tags hver n'te gang taggen forekommer nedefra i en ubrudt sekvens. Istedet for "n" kan anvendes odd og evenp:nth-last-of-type(2){background:#f00;} x x x

Negation

     
:not(selektor):not(p)$("input:not (:empty)")!!! Knyttes til alle andre tags end den angivne. Virker kun når den angivne tag også er "positivt" defineret:
p{ color:#000;}
:not(p){ color:#f00;}
:not(p) {background:#f00;} x x x

Pseudo tags

     
:first-linep:first-lineBruges ikke i jQueryKnyttes for tekstindeholdende tags til første linie i teksten.p:first-line{ background:yellow;} x x x
:first-letterp:first-letterBruges ikke i jQueryKnyttes for tekstindeholdende tags til første bogstav i teksten.p:first-letter{ font-size:200%; color:#8A2BE2;} x x x
:beforep:beforeBruges ikke i jQueryKnyttes for tekstindeholdende tags til teksten i taggen. Indholdet i content indsættes foran teksten i taggen.p:before{ content:"Read this: ";} x x x
:afterp:afterBruges ikke i jQueryKnyttes for tekstindeholdende tags til teksten i taggen. Indholdet i content indsættes efter teksten i taggen.p:after{ content:"- Remember this";} x x x

Kun i jQuery

     

      Selektorer, der ikke kan bruges i CSS, men kun i jQuery.
:firstBruges ikke i CSS$("p:first")Første element med anførte tag. x
:lastBruges ikke i CSS$("p:last")Sidste element med anførte tag. x
:evenBruges ikke i CSS$("tr:even")Tabelrækker med lige numre. x
:oddBruges ikke i CSS$("tr:odd")Tabelrækker med ulige numre. x
:eq(index)Bruges ikke i CSS$("ul li:eq(3)")Linienummer i liste. (Starter med nummer 0). x
:gt(no)Bruges ikke i CSS$("ul li:gt(3)")Linier i liste med nummer større end anført. (Starter med nummer 0). x
:lt(no)Bruges ikke i CSS$("ul li:lt(3)")Linier i liste med nummer mindre end anført. (Starter med nummer 0). x
:headerBruges ikke i CSS$(":header")Alle tags <h1> etc. x
:animatedBruges ikke i CSS$(":animated")Alle animerede tags x
:contains(text)Bruges ikke i CSS$(":contains ("Hello")")Alle tags, der indeholder den anførte tekst. x
:has(selector)Bruges ikke i CSS$("div:has(p)")Alle "A"-tags, der indeholder er "B"-tag. x
:parentBruges ikke i CSS$(":parent")Alle tags, der er overordnet et andet element. x
:hiddenBruges ikke i CSS$("p:hidden")Alle skjulte forekomster med det pågældende tag. x
:visibleBruges ikke i CSS$("table: visible")Alle synlige forekomster med det pågældende tag. x
[attribute!= værdi]Bruges ikke i CSS$("[href!= 'default.htm']")Knyttes til alle tags, der indeholder den pågældende attribut og den anførte værdi ikke svarer til attributtens værdi. x
:inputBruges ikke i CSS$(":input")Alle input-tags. x
:textBruges ikke i CSS$(":text")Alle input-tags, der indeholder attributten text. x
:passwordBruges ikke i CSS$(":password")Alle input-tags, der indeholder attributten password. x
:radioBruges ikke i CSS$(":radio")Alle input-tags, der indeholder attributten radio. x
:checkboxBruges ikke i CSS$(":checkbox")Alle input-tags, der indeholder attributten checkbox. x
:submitBruges ikke i CSS$(":submit")Alle input-tags, der indeholder attributten submit. x
:resetBruges ikke i CSS$(":reset")Alle input-tags, der indeholder attributten reset. x
:buttonBruges ikke i CSS$(":button")Alle input-tags, der indeholder attributten button. x
:imageBruges ikke i CSS$(":image")Alle input-tags, der indeholder attributten image. x
:fileBruges ikke i CSS$(":file")Alle input-tags, der indeholder attributten file. x
:selectedBruges ikke i CSS$(":selected")Alle input-tags, der indeholder attributten selected. x




























































x
x