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:

Link	Klassebetegnelse	Virke- måde	Kommentarer
Hovedklasser
	ID	#id=".." på brugssted	Kan kun bruges 1 gang pr. HTML-dokument. Må ikke indeholde tag-navne eller class-regler.
	Class	class=".." på brugssted	Kan bruges ubegrænset antal gange pr HTML-dokument. Flere class-selektorer kan knyttes til samme tag. Må ikke indeholde tagnavne.
	Tag	Fra stylesheet	Gælder universelt for det pågældende tag. Antallet af tag-regler bør holdes begrænset.
	Ukorrekte	Fra stylesheet	Gæ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 [].
	Attributter	Fra stylesheet	Gælder universelt for den pågældende attribut, medmindre den er knyttet til et tag.
	Pseudoklasser Skal (næsten) alle knyttes til et tag. Har alle ":" som første karakter / skilletegn overfor det tag de knyttes til.
	Dynamiske		Kan kun anvendes sammen med hhv. a- og input-tags.
	Target		?
	Sprog		Skal have sprogkode tilknyttet
	Bruger interface		Kan kun anvendes sammen med input-taggen.
	Strukturelle		Anvendes (bortset fra :root) til håndtering af forskellige tekstrelaterede situationer.
	Negation		?
	Pseudo tags		Anvendes til håndtering af forskellige tekstrelaterede situationer.
	jQuery		Selektorer, der ikke anvendes i CSS, men kun i jQuery.

Anbefaling fra W3 for selektorer til CSS3. W3Schools - CSS Selektorer. jQuery - selektorer.

Selektorer

Selektor grundform	Syntax i CSS	Eksempel i jQuery	Beskrivelse	Kodeeksempel (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;}
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;}
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;}
tag	p	$("p")	Knyttes til alle forekomster af det anførte tag.	p{ background:yellow;}
tag tag	div 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;}
tag*tag	div*p	Bruges ikke i jQuery	Knyttes til alle forekomster af tag2, der er indlejrede i tag1 i andet niveau.	div>p{ background:yellow;}
tag>tag	div>p	$("div > p")	Knyttes til alle forekomster af tag2, der er indlejrede i tag1 i første niveau.	div>p{ background:red;}
tag+tag	div+p	$("div + p")	Knyttes til alle forekomster af tag2, der er placeret umiddelbart efter afslutningen af tag1.	div+p{ background:red;}
tag,tag	div,p	$("h1,div,p")	Knyttes til alle forekomster af to eller flere tags	h1,p {background:yellow;}
tag1~tag2	p~ul	$("div ~ p")	Knyttes til alle linier i liste, der har det anførte tag brugt lige ovenover	p~ul {background:#f00;}
Ukorrekte       fejl-selektor       Selektorer med enhver form for ureglementeret opbygning.
alt muligt ureglementeret			Indeholder 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.	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;}
[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;}
[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;}
[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;}
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;}
[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;}
[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;}
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
:link	a:link	Bruges ikke i jQuery	Knyttes til alle ikke-besøgte links.	a:link {background:red;}
:visited	a:visited	Bruges ikke i jQuery	Knyttes til alle besøgte, men forladte links.	a:visited {background:red;}
:hover	a:hover	Bruges ikke i jQuery	Knyttes til alle links, med aktivering når markøren føres hen over.	a:hover {background:red;}
:active	a:active	Bruges ikke i jQuery	Knyttes til alle links, der p.t. er aktive.	a:active {background:red;}
:focus	input:focus	$(":focus")	Knyttes til input type="text"-felter med markør aktiv.	input:focus {background:red;}
			Ingen understregning under links.	a {text-decoration:none;}
			Ingen farveskift ved tryk af mus etc.	a:link {color:inherit;}
Target
:target	#news:target	Bruges ikke i jQuery	Knytter 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.
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;}
Bruger interface
:enabled	input:enabled	$(":enabled")	Knyttes til alle aktive input type="text"-felter.	input[type="text"]: enabled {background:#ff0;}
:disabled	input:disabled	$(":disabled")	Knyttes til alle inaktive input type="text" disabled-felter.	input[type="text"]: disabled {background:red;}
:checked	input:checked	$(":checked")	Knyttes til type="radio"- og type="checkbox"-knapper.	input:checked {background:#f00;}
Strukturelle
:root	:root	$(":root")	Knyttes til HTML-dokumentets "rod": Dokumentets HTML-tag.	:root {background:#f00;}
:empty	p:empty	$(":empty")	Knyttes til tekstindeholdende tags, der ikke indeholder tekst.	p:empty {background:#f00;}
:first-child	p: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;}
:last-child	p: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;}
:only-child	p: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;}
: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;}
: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;}
:first-of-type	p: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;}
:last-of-type	p: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;}
:only-of-type	p: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;}
: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 even	p:nth-of-type(2){background:#f00;}
: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 even	p:nth-last-of-type(2){background:#f00;}
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;}
Pseudo tags
:first-line	p:first-line	Bruges ikke i jQuery	Knyttes for tekstindeholdende tags til første linie i teksten.	p:first-line{ background:yellow;}
:first-letter	p:first-letter	Bruges ikke i jQuery	Knyttes for tekstindeholdende tags til første bogstav i teksten.	p:first-letter{ font-size:200%; color:#8A2BE2;}
:before	p:before	Bruges ikke i jQuery	Knyttes for tekstindeholdende tags til teksten i taggen. Indholdet i content indsættes foran teksten i taggen.	p:before{ content:"Read this: ";}
:after	p:after	Bruges ikke i jQuery	Knyttes for tekstindeholdende tags til teksten i taggen. Indholdet i content indsættes efter teksten i taggen.	p:after{ content:"- Remember this";}
Kun i jQuery
Selektorer, der ikke kan bruges i CSS, men kun i jQuery.
:first	Bruges ikke i CSS	$("p:first")	Første element med anførte tag.
:last	Bruges ikke i CSS	$("p:last")	Sidste element med anførte tag.
:even	Bruges ikke i CSS	$("tr:even")	Tabelrækker med lige numre.
:odd	Bruges ikke i CSS	$("tr:odd")	Tabelrækker med ulige numre.
:eq(index)	Bruges ikke i CSS	$("ul li:eq(3)")	Linienummer i liste. (Starter med nummer 0).
:gt(no)	Bruges ikke i CSS	$("ul li:gt(3)")	Linier i liste med nummer større end anført. (Starter med nummer 0).
:lt(no)	Bruges ikke i CSS	$("ul li:lt(3)")	Linier i liste med nummer mindre end anført. (Starter med nummer 0).
:header	Bruges ikke i CSS	$(":header")	Alle tags <h1> etc.
:animated	Bruges ikke i CSS	$(":animated")	Alle animerede tags
:contains(text)	Bruges ikke i CSS	$(":contains ("Hello")")	Alle tags, der indeholder den anførte tekst.
:has(selector)	Bruges ikke i CSS	$("div:has(p)")	Alle "A"-tags, der indeholder er "B"-tag.
:parent	Bruges ikke i CSS	$(":parent")	Alle tags, der er overordnet et andet element.
:hidden	Bruges ikke i CSS	$("p:hidden")	Alle skjulte forekomster med det pågældende tag.
:visible	Bruges ikke i CSS	$("table: visible")	Alle synlige forekomster med det pågældende tag.
[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.
:input	Bruges ikke i CSS	$(":input")	Alle input-tags.
:text	Bruges ikke i CSS	$(":text")	Alle input-tags, der indeholder attributten text.
:password	Bruges ikke i CSS	$(":password")	Alle input-tags, der indeholder attributten password.
:radio	Bruges ikke i CSS	$(":radio")	Alle input-tags, der indeholder attributten radio.
:checkbox	Bruges ikke i CSS	$(":checkbox")	Alle input-tags, der indeholder attributten checkbox.
:submit	Bruges ikke i CSS	$(":submit")	Alle input-tags, der indeholder attributten submit.
:reset	Bruges ikke i CSS	$(":reset")	Alle input-tags, der indeholder attributten reset.
:button	Bruges ikke i CSS	$(":button")	Alle input-tags, der indeholder attributten button.
:image	Bruges ikke i CSS	$(":image")	Alle input-tags, der indeholder attributten image.
:file	Bruges ikke i CSS	$(":file")	Alle input-tags, der indeholder attributten file.
:selected	Bruges ikke i CSS	$(":selected")	Alle input-tags, der indeholder attributten selected.