Selektor - Versionshistorik

PGJ: /* Tillgängliga selektorer */

2019-01-13T13:21:00Z

Tillgängliga selektorer

← Äldre version		Versionen från 13 januari 2019 kl. 13.21
Rad 5:		Rad 5:

	== Tillgängliga selektorer ==		== Tillgängliga selektorer ==
	Här följer de selektorer som är tillgängliga i [[CSS\|CSS3]].		Här följer de vanligaste selektorer som är tillgängliga i [[CSS\|CSS3]].
	=== "element-namn" ===		=== "element-namn" ===
	Genom att ange elementtyp, d.v.s. en taggtyp, matchar man alla motsvarande [[element\|HTML-element]] i dokumentet, t.ex.:		Genom att ange elementtyp, d.v.s. en taggtyp, matchar man alla motsvarande [[element\|HTML-element]] i dokumentet, t.ex.:

PGJ: /* "element 1" "element 2" */

2019-01-10T11:01:05Z

"element 1" "element 2"

← Äldre version		Versionen från 10 januari 2019 kl. 11.01
Rad 48:		Rad 48:
	Ovanstående skulle ändra färgerna på alla <code>[[em]]</code>-element som ligger inuti ett <code>[[p]]</code>.		Ovanstående skulle ändra färgerna på alla <code>[[em]]</code>-element som ligger inuti ett <code>[[p]]</code>.

			== Fotnoter ==
	<references/>		<references/>

PGJ den 30 augusti 2015 kl. 10.25

2015-08-30T10:25:33Z

← Äldre version		Versionen från 30 augusti 2015 kl. 10.25
Rad 47:		Rad 47:
	</syntaxhighlight>		</syntaxhighlight>
	Ovanstående skulle ändra färgerna på alla <code>[[em]]</code>-element som ligger inuti ett <code>[[p]]</code>.		Ovanstående skulle ändra färgerna på alla <code>[[em]]</code>-element som ligger inuti ett <code>[[p]]</code>.

	~~TODO: Gör klart...~~

	<references/>		<references/>

PGJ den 12 augusti 2014 kl. 14.55

2014-08-12T14:55:32Z

← Äldre version		Versionen från 12 augusti 2014 kl. 14.55
Rad 47:		Rad 47:
	</syntaxhighlight>		</syntaxhighlight>
	Ovanstående skulle ändra färgerna på alla <code>[[em]]</code>-element som ligger inuti ett <code>[[p]]</code>.		Ovanstående skulle ändra färgerna på alla <code>[[em]]</code>-element som ligger inuti ett <code>[[p]]</code>.

			TODO: Gör klart...

	<references/>		<references/>

PGJ den 12 augusti 2014 kl. 14.54

2014-08-12T14:54:38Z

← Äldre version		Versionen från 12 augusti 2014 kl. 14.54
Rad 6:		Rad 6:
	== Tillgängliga selektorer ==		== Tillgängliga selektorer ==
	Här följer de selektorer som är tillgängliga i [[CSS\|CSS3]].		Här följer de selektorer som är tillgängliga i [[CSS\|CSS3]].
	=== "element" ===		=== "element-namn" ===
	Genom att ange elementtyp, d.v.s. en taggtyp, matchar man alla motsvarande [[element\|HTML-element]] i dokumentet, t.ex.:		Genom att ange elementtyp, d.v.s. en taggtyp, matchar man alla motsvarande [[element\|HTML-element]] i dokumentet, t.ex.:
	<syntaxhighlight lang="CSS">		<syntaxhighlight lang="CSS">

PGJ den 12 augusti 2014 kl. 14.54

2014-08-12T14:54:06Z

← Äldre version		Versionen från 12 augusti 2014 kl. 14.54
Rad 8:		Rad 8:
	=== "element" ===		=== "element" ===
	Genom att ange elementtyp, d.v.s. en taggtyp, matchar man alla motsvarande [[element\|HTML-element]] i dokumentet, t.ex.:		Genom att ange elementtyp, d.v.s. en taggtyp, matchar man alla motsvarande [[element\|HTML-element]] i dokumentet, t.ex.:
	~~{CODE()}~~		<syntaxhighlight lang="CSS">
	p {		p {
	background-color: blue;		background-color: blue;
	}		}
	~~{CODE}~~		</syntaxhighlight>
	Ovanstående exempel skulle ~~färga~~ alla ~~-+((~~p~~-tagg\|~~<p>~~))+~~-~~-taggar~~ blå, om inte någon högre värderad ((CSS))-regel, skulle trumfa denna.		Ovanstående exempel skulle ändra alla <code>[[p]]</code>-element så de får blå bakgrund. I alla fall om det inte finns någon högre värderad [[CSS-regel]] som skulle trumfa denna.
	; *: Matchar ''alla'' HTML-element. Man bör använda detta med stor försiktighet, då den kan göra sidan långsam.		=== * ===
	~~{CODE()}~~		Matchar ''alla'' [[element\|HTML-element]]. Man bör använda detta med stor försiktighet, då den kan göra sidan långsam.
			<syntaxhighlight lang="CSS">
	* {		* {
	box-sizing: border-box;		box-sizing: border-box;
	}		}
	~~{CODE}~~		</syntaxhighlight>
	Ovanstående skulle sätta -+box-sizing+- till den nya modellen på alla element.		Ovanstående skulle sätta <code>box-sizing</code> till den nya box-modellen på ''alla'' element.
	; #"idnamn"~~: Matchar~~ det ((element\|HTML-element)) som har ~~((ID))~~ satt till "idnamn". Kom ihåg att ett ~~((ID))~~ enbart får användas en gång i varje HTML-dokument (visserligen tillåter de flesta webbläsare flera förekomster, men undvik det ändå!).		=== #"idnamn" ===
	~~{CODE()}~~		Lägg märke till det inledande "#"-tecknet. Denna selektor matchar det [[element\|HTML-element]] som har [[id]] satt till "idnamn". Kom ihåg att ett [[id]] enbart får användas en gång i varje HTML-dokument (visserligen tillåter de flesta webbläsare flera förekomster, men undvik det ändå!).
			<syntaxhighlight lang="CSS">
	#toppen {		#toppen {
	font-size: 200%;		font-size: 200%;
	}		}
	~~{CODE}~~		</syntaxhighlight>
	Ovanstående skulle fördubbla teckensnittsstorleken på innehållet i det element som har ~~((ID))~~ satt till "toppen".		Ovanstående skulle fördubbla teckensnittsstorleken på innehållet i det element som har [[id]] satt till "toppen".
	; ."klassnamn"~~: Matchar~~ alla de ((element\|HTML-element)) som har ((class)) satt till "klassnamn".		=== ."klassnamn" ===
	~~{CODE()}~~		Lägg märke till den inledande punkten. Denna selektor matchar alla de [[element\|HTML-element]] som har [[class]] satt till "klassnamn".
			<syntaxhighlight lang="CSS">
	.viktigt {		.viktigt {
	text-decoration: underline;		text-decoration: underline;
	}		}
	~~{CODE}~~		</syntaxhighlight>
	Ovanstående skulle göra så att alla ((element)) som har klassen "viktigt" skulle visas med understruken text.		Ovanstående skulle göra så att alla [[element]] som har klassen "viktigt" skulle visas med understruken text.
	; "element 1" "element 2": Väljer ut de ((element)) av typen "element 2" som är ((förhållanden\|avkomma)) till "element 1".		=== "element 1" "element 2" ===
	~~{CODE()}~~		Väljer ut de [[element]] av typen "element 2" som är [[förhållanden\|avkomma]] till "element 1".
			<syntaxhighlight lang="CSS">
	p em {		p em {
	background-color: yellow;		background-color: yellow;
	color: black;		color: black;
	}		}
	~~{CODE}~~		</syntaxhighlight>
	Ovanstående skulle ändra färgerna på alla ~~-+((~~em~~-tagg\|~~<em>~~))+-~~-~~taggar~~ som ligger inuti ~~en -+((~~p~~-tagg\|~~<p>~~))+-~~.		Ovanstående skulle ändra färgerna på alla <code>[[em]]</code>-element som ligger inuti ett <code>[[p]]</code>.

	<references/>		<references/>

PGJ: Skapade sidan med ' SelektorerSelektor är en något svengelsk, direktöversättning av engelskans "selector". Ett bättre namn kanske vore väljare, matchare eller något liknande. Dock s...'

2014-08-12T14:42:52Z

Skapade sidan med ' Selektorer<ref>Selektor är en något svengelsk, direktöversättning av engelskans "selector". Ett bättre namn kanske vore väljare, matchare eller något liknande. Dock s...'

Ny sida

Selektorer<ref>Selektor är en något svengelsk, direktöversättning av engelskans "selector". Ett bättre namn kanske vore väljare, matchare eller något liknande. Dock så används oftast ordet selektor i detta sammanhang.</ref> används i [[CSS]] för att genom matchning välja ut specifika [[element]] i ett HTML-dokument. Vad man väljer ut kan variera det kan vara alltifrån att ange att ett specifik [[element|HTML-element]] ser ut på ett vis, till att välja det första ordet på varannan rad.

Det finns en uppsjö av selektorer som kan kombineras på många olika vis. Olika selektorer är värderade på olika sätt, så kallad [[specificitet]]. Det betyder att [[CSS-regler]] kan trumfa, och "skriva över", andra [[CSS-regler]] för att de är högre värderade. Det kan t.ex. jämföras med hur olika operander i matematiken har företräde framför andra (multiplikation före addition, o.s.v.). Olika [[element]] kan även matchas av många olika [[CSS-regler]] och därmed få egenskaper ifrån olika regler. [[Specificitet]]en avgör då vilka egenskapsvärden som blir de slutgiltiga.

== Tillgängliga selektorer ==
Här följer de selektorer som är tillgängliga i [[CSS|CSS3]].
=== "element" ===
Genom att ange elementtyp, d.v.s. en taggtyp, matchar man alla motsvarande [[element|HTML-element]] i dokumentet, t.ex.:
{CODE()}
p {
background-color: blue;
}
{CODE}
Ovanstående exempel skulle färga alla -+((p-tagg|<p>))+--taggar blå, om inte någon högre värderad ((CSS))-regel, skulle trumfa denna.
; *: Matchar ''alla'' HTML-element. Man bör använda detta med stor försiktighet, då den kan göra sidan långsam.
{CODE()}
* {
box-sizing: border-box;
}
{CODE}
Ovanstående skulle sätta -+box-sizing+- till den nya modellen på alla element.
; #"idnamn": Matchar det ((element|HTML-element)) som har ((ID)) satt till "idnamn". Kom ihåg att ett ((ID)) enbart får användas en gång i varje HTML-dokument (visserligen tillåter de flesta webbläsare flera förekomster, men undvik det ändå!).
{CODE()}
#toppen {
font-size: 200%;
}
{CODE}
Ovanstående skulle fördubbla teckensnittsstorleken på innehållet i det element som har ((ID)) satt till "toppen".
; ."klassnamn": Matchar alla de ((element|HTML-element)) som har ((class)) satt till "klassnamn".
{CODE()}
.viktigt {
text-decoration: underline;
}
{CODE}
Ovanstående skulle göra så att alla ((element)) som har klassen "viktigt" skulle visas med understruken text.
; "element 1" "element 2": Väljer ut de ((element)) av typen "element 2" som är ((förhållanden|avkomma)) till "element 1".
{CODE()}
p em {
background-color: yellow;
color: black;
}
{CODE}
Ovanstående skulle ändra färgerna på alla -+((em-tagg|<em>))+--taggar som ligger inuti en -+((p-tagg|<p>))+-.

<references/>