Turordningsregler för CSS - Versionshistorik

PGJ: /* Samma selektor flera gånger */

2019-01-13T13:19:53Z

Samma selektor flera gånger

← Äldre version		Versionen från 13 januari 2019 kl. 13.19
Rad 55:		Rad 55:
	== Samma selektor flera gånger ==		== Samma selektor flera gånger ==
	I de fall som [[selektor]]erna har samma vikt, blir det den som påträffas sist som vinner. Ett par exempel på detta:		I de fall som [[selektor]]erna har samma vikt, blir det den som påträffas sist som vinner. Ett par exempel på detta:
	<codepen pen="zGRxYV" tab="css" height="300">		<codepen pen="zGRxYV" tab="css,result" height="300">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	h1 {		h1 {

PGJ: /* Matchning av samma element, olika egenskaper */

2019-01-13T13:19:34Z

Matchning av samma element, olika egenskaper

← Äldre version		Versionen från 13 januari 2019 kl. 13.19
Rad 37:		Rad 37:
	== Matchning av samma element, olika egenskaper ==		== Matchning av samma element, olika egenskaper ==
	Låt oss titta på ett annat fall där flera regler matchar samma element.		Låt oss titta på ett annat fall där flera regler matchar samma element.
	<codepen pen="PqQwoK" tab="css" height="300">		<codepen pen="PqQwoK" tab="css,result" height="300">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	h1 {		h1 {

PGJ: /* Att sätta samma egenskap i flera regler */

2019-01-13T13:15:56Z

Att sätta samma egenskap i flera regler

← Äldre version		Versionen från 13 januari 2019 kl. 13.15
Rad 17:		Rad 17:

	== Att sätta samma egenskap i flera regler ==		== Att sätta samma egenskap i flera regler ==
	Ett annat fall där samma egenskap kan förändras flera gånger är när vi har två (eller flera) regler som matchar samma element. Vad skulle hända om vi hade följande ~~CSS-~~kod:		Ett annat fall där samma egenskap kan förändras flera gånger är när vi har två (eller flera) regler som matchar samma element. Vad skulle hända om vi hade följande kod?
	<codepen pen="GJQgKm" tab="css" height="300">		<codepen pen="GJQgKm" tab="html,css" height="300">
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	h1 {		h1 {
Rad 27:		Rad 27:
	color: blue;		color: blue;
	}		}
	~~</syntaxhighlight>~~
	~~</codepen>~~
	~~och tillhörande HTML-kod:~~
	~~<codepen pen="GJQgKm" tab="html" height="300">~~
	~~<syntaxhighlight lang="html5">~~
	~~<h1 id="idnamn">Rubriken</h1>~~
	</syntaxhighlight>		</syntaxhighlight>
	</codepen>		</codepen>

PGJ: /* Att sätta samma egenskap i en regel */

2019-01-13T13:14:58Z

Att sätta samma egenskap i en regel

← Äldre version		Versionen från 13 januari 2019 kl. 13.14
Rad 2:		Rad 2:
	== Att sätta samma egenskap i en regel ==		== Att sätta samma egenskap i en regel ==
	Det enklaste fallet där samma egenskap ändras flera gånger är om egenskapen förekommer flertalet gånger i samma regel. Låt säga att vi har följande kod:		Det enklaste fallet där samma egenskap ändras flera gånger är om egenskapen förekommer flertalet gånger i samma regel. Låt säga att vi har följande kod:
	<codepen pen="gpvbbR" tab="css" height="300">		<codepen pen="gpvbbR" tab="css,result" height="300">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	h1 {		h1 {

PGJ: /* Matchning av samma element, olika egenskaper */

2016-10-19T07:04:24Z

Matchning av samma element, olika egenskaper

← Äldre version		Versionen från 19 oktober 2016 kl. 07.04
Rad 57:		Rad 57:
	Här inför vi en ny CSS-egenskap som gör att vi kan sätta bakgrundsfärgen på ett [[element]]. Koden ovan anger att alla <code>[[hx\|h1]]</code>-element ska ha gul bakgrund och röd förgrund (ja, verkligen hemska färgval!). Samtidigt anger vi att det [[element]] som har [[id]]:n ”<code>idnamn</code>” ska ha blå förgrund. Hur kommer webbläsaren att tolka detta? Vilket av de båda möjliga värdena kommer att vinna?		Här inför vi en ny CSS-egenskap som gör att vi kan sätta bakgrundsfärgen på ett [[element]]. Koden ovan anger att alla <code>[[hx\|h1]]</code>-element ska ha gul bakgrund och röd förgrund (ja, verkligen hemska färgval!). Samtidigt anger vi att det [[element]] som har [[id]]:n ”<code>idnamn</code>” ska ha blå förgrund. Hur kommer webbläsaren att tolka detta? Vilket av de båda möjliga värdena kommer att vinna?

	Vi har redan konstaterat att id-selektorn väger tyngre än element-selektorn och att den vinner vad gäller ”<code>color</code>”. Men vad händer med ”<code>background-color</code>”? Jo, alla <code>h1</code>-element kommer att få gul bakgrund, även det vars [[id]] matchar den andra regeln. Allteftersom reglerna matchar ett element (i stigande viktordning), ~~sätter~~ webbläsaren de egenskaps-förändringar som anges.För varje regel som gås igenom sätts de egenskaper som anges i regeln, eventuellt skriver webbläsaren över de förändringar som andra regler angett. Sånt som förändrats i tidigare regler, men som inte finns med i efterföljande regler lämnas som det var.		Vi har redan konstaterat att id-selektorn väger tyngre än element-selektorn och att den vinner vad gäller ”<code>color</code>”. Men vad händer med ”<code>background-color</code>”? Jo, alla <code>h1</code>-element kommer att få gul bakgrund, även det vars [[id]] matchar den andra regeln. Allteftersom reglerna matchar ett element (i stigande viktordning), genomför webbläsaren de egenskaps-förändringar som anges. För varje regel som gås igenom sätts de egenskaper som anges i regeln, eventuellt skriver webbläsaren över de förändringar som andra regler angett. Sånt som förändrats i tidigare regler, men som inte finns med i efterföljande regler lämnas som det var.

	== Samma selektor flera gånger ==		== Samma selektor flera gånger ==

PGJ: /* Att sätta samma egenskap i en regel */

2016-10-19T07:01:07Z

Att sätta samma egenskap i en regel

← Äldre version		Versionen från 19 oktober 2016 kl. 07.01
Rad 1:		Rad 1:
	I många fall kommer flera olika CSS-regler att matcha ett och samma element. Då kan det hända att dessa regler anger olika värden för samma egenskap, t.ex. kanske flera olika regler sätter bakgrundsfärgen. För att kunna hantera sådana situationer på ett förutsägbart sätt, så har CSS ett regelverk som anger vilken turordning som gäller för olika selektorer.		I många fall kommer flera olika CSS-regler att matcha ett och samma element. Då kan det hända att dessa regler anger olika värden för samma egenskap, t.ex. kanske flera olika regler sätter bakgrundsfärgen. För att kunna hantera sådana situationer på ett förutsägbart sätt, så har CSS ett regelverk som anger vilken turordning som gäller för olika selektorer.
	== Att sätta samma egenskap i en regel ==		== Att sätta samma egenskap i en regel ==
	Det enklaste fallet där samma egenskap ~~sätts~~ flera gånger är om ~~vi sätter~~ egenskapen ~~flera~~ gånger i samma regel. Låt säga att vi har följande kod:		Det enklaste fallet där samma egenskap ändras flera gånger är om egenskapen förekommer flertalet gånger i samma regel. Låt säga att vi har följande kod:
	<codepen pen="gpvbbR" tab="css" height="300">		<codepen pen="gpvbbR" tab="css" height="300">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
Rad 12:		Rad 12:
	Här skulle slutfärgen bli gul, för om man sätter samma egenskap flera gånger i en och samma regel, så vinner den sista förekomsten av egenskapen.		Här skulle slutfärgen bli gul, för om man sätter samma egenskap flera gånger i en och samma regel, så vinner den sista förekomsten av egenskapen.

			<div class="well-sm well-meadow">
	I vissa fall kan olika CSS-egenskaper förändra samma sak, trots att de heter olika. Detta gäller inte minst de sammansatta, kortegenskaperna där man kan ange flera egenskaper med ett och samma CSS-kommando.		I vissa fall kan olika CSS-egenskaper förändra samma sak, trots att de heter olika. Detta gäller inte minst de sammansatta, kortegenskaperna där man kan ange flera egenskaper med ett och samma CSS-kommando.
			</div>

	== Att sätta samma egenskap i flera regler ==		== Att sätta samma egenskap i flera regler ==
	Ett annat fall där samma egenskap kan förändras flera gånger är när vi har två (eller flera) regler som matchar samma element. Vad skulle hända om vi hade följande CSS-kod:		Ett annat fall där samma egenskap kan förändras flera gånger är när vi har två (eller flera) regler som matchar samma element. Vad skulle hända om vi hade följande CSS-kod:

PGJ: /* Specificitet */

2016-10-19T06:57:10Z

Specificitet

← Äldre version		Versionen från 19 oktober 2016 kl. 06.57
Rad 38:		Rad 38:
	I [[CSS]] kan man generellt säga att desto specifikare en [[selektor]] är, desto högre vikt har den. En id-selektor är ju jättespecifik, då den enbart kan matcha ett enda [[element]] (ett id får ju enbart förekomma en gång i ett webbdokument). Därmed har den högst vikt och det är den som ”vinner” i detta fall. Det <code>[[hx\|h1]]</code>-element som har [[id]]:t ”<code>idnamn</code>” kommer alltså att få blå textfärg.		I [[CSS]] kan man generellt säga att desto specifikare en [[selektor]] är, desto högre vikt har den. En id-selektor är ju jättespecifik, då den enbart kan matcha ett enda [[element]] (ett id får ju enbart förekomma en gång i ett webbdokument). Därmed har den högst vikt och det är den som ”vinner” i detta fall. Det <code>[[hx\|h1]]</code>-element som har [[id]]:t ”<code>idnamn</code>” kommer alltså att få blå textfärg.

	== ~~Specificitet~~ ==		== Matchning av samma element, olika egenskaper ==
	Låt oss titta på ett annat fall där flera regler ~~blir att gälla för~~ samma element.		Låt oss titta på ett annat fall där flera regler matchar samma element.
	<codepen pen="PqQwoK" tab="css" height="300">		<codepen pen="PqQwoK" tab="css" height="300">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
Rad 54:		Rad 54:
	Här inför vi en ny CSS-egenskap som gör att vi kan sätta bakgrundsfärgen på ett [[element]]. Koden ovan anger att alla <code>[[hx\|h1]]</code>-element ska ha gul bakgrund och röd förgrund (ja, verkligen hemska färgval!). Samtidigt anger vi att det [[element]] som har [[id]]:n ”<code>idnamn</code>” ska ha blå förgrund. Hur kommer webbläsaren att tolka detta? Vilket av de båda möjliga värdena kommer att vinna?		Här inför vi en ny CSS-egenskap som gör att vi kan sätta bakgrundsfärgen på ett [[element]]. Koden ovan anger att alla <code>[[hx\|h1]]</code>-element ska ha gul bakgrund och röd förgrund (ja, verkligen hemska färgval!). Samtidigt anger vi att det [[element]] som har [[id]]:n ”<code>idnamn</code>” ska ha blå förgrund. Hur kommer webbläsaren att tolka detta? Vilket av de båda möjliga värdena kommer att vinna?

	Vi har redan konstaterat att id-selektorn väger tyngre än element-selektorn och att den vinner vad gäller ”<code>color</code>”. Men vad händer med ”<code>background-color</code>”? Jo, alla <code>h1</code>-element kommer att få gul bakgrund, även det vars [[id]] matchar den andra regeln. Allteftersom reglerna matchar ett element (i stigande viktordning), sätter webbläsaren de egenskaps-förändringar som anges. ~~I det fall den kommer till en~~ regel som ~~väger tyngre än de tidigare sätt~~ de egenskaper som anges i regeln, eventuellt skriver webbläsaren över de förändringar som andra regler angett. ~~Allt övrigt~~ som förändrats i tidigare regler lämnas som det var.		Vi har redan konstaterat att id-selektorn väger tyngre än element-selektorn och att den vinner vad gäller ”<code>color</code>”. Men vad händer med ”<code>background-color</code>”? Jo, alla <code>h1</code>-element kommer att få gul bakgrund, även det vars [[id]] matchar den andra regeln. Allteftersom reglerna matchar ett element (i stigande viktordning), sätter webbläsaren de egenskaps-förändringar som anges.För varje regel som gås igenom sätts de egenskaper som anges i regeln, eventuellt skriver webbläsaren över de förändringar som andra regler angett. Sånt som förändrats i tidigare regler, men som inte finns med i efterföljande regler lämnas som det var.

			== Samma selektor flera gånger ==
	I de fall som [[selektor]]erna har samma vikt, blir det den som påträffas sist som vinner. Ett par exempel på detta:		I de fall som [[selektor]]erna har samma vikt, blir det den som påträffas sist som vinner. Ett par exempel på detta:
	<codepen pen="zGRxYV" tab="css" height="300">		<codepen pen="zGRxYV" tab="css" height="300">

PGJ: /* Att sätta samma egenskap i flera regler */

2016-10-19T06:53:25Z

Att sätta samma egenskap i flera regler

← Äldre version		Versionen från 19 oktober 2016 kl. 06.53
Rad 35:		Rad 35:
	Här har vi alltså två [[CSS-regel\|CSS-regler]]. En som säger att alla <code>[[hx\|h1]]</code>-element ska ha röd färg och en som säger att det [[element]]et som har [[id]] satt till ”<code>idnamn</code>” ska ha blå färg. Vad händer nu, när vi satt så att ett av våra <code>[[hx\|h1]]</code>-element har just den [[id]]:n? Jo, det finns ett regelverk som anger hur mycket vikt man ska lägga på olika [[selektor]]er och den tyngst vägande [[selektor]]n trumfar över de lättviktigare [[selektor]]erna. Det fungerar ungefär som prioriteringsreglerna i matematiken, där t.ex. multiplikation sker före addition.		Här har vi alltså två [[CSS-regel\|CSS-regler]]. En som säger att alla <code>[[hx\|h1]]</code>-element ska ha röd färg och en som säger att det [[element]]et som har [[id]] satt till ”<code>idnamn</code>” ska ha blå färg. Vad händer nu, när vi satt så att ett av våra <code>[[hx\|h1]]</code>-element har just den [[id]]:n? Jo, det finns ett regelverk som anger hur mycket vikt man ska lägga på olika [[selektor]]er och den tyngst vägande [[selektor]]n trumfar över de lättviktigare [[selektor]]erna. Det fungerar ungefär som prioriteringsreglerna i matematiken, där t.ex. multiplikation sker före addition.

			=== Specificitet ===
	I [[CSS]] kan man generellt säga att desto specifikare en [[selektor]] är, desto högre vikt har den. En id-selektor är ju jättespecifik, då den enbart kan matcha ett enda [[element]] (ett id får ju enbart förekomma en gång i ett webbdokument). Därmed har den högst vikt och det är den som ”vinner” i detta fall. Det <code>[[hx\|h1]]</code>-element som har [[id]]:t ”<code>idnamn</code>” kommer alltså att få blå textfärg.		I [[CSS]] kan man generellt säga att desto specifikare en [[selektor]] är, desto högre vikt har den. En id-selektor är ju jättespecifik, då den enbart kan matcha ett enda [[element]] (ett id får ju enbart förekomma en gång i ett webbdokument). Därmed har den högst vikt och det är den som ”vinner” i detta fall. Det <code>[[hx\|h1]]</code>-element som har [[id]]:t ”<code>idnamn</code>” kommer alltså att få blå textfärg.

PGJ: /* Att sätta samma egenskap i flera regler */

2016-10-19T06:51:46Z

Att sätta samma egenskap i flera regler

← Äldre version		Versionen från 19 oktober 2016 kl. 06.51
Rad 14:		Rad 14:
	I vissa fall kan olika CSS-egenskaper förändra samma sak, trots att de heter olika. Detta gäller inte minst de sammansatta, kortegenskaperna där man kan ange flera egenskaper med ett och samma CSS-kommando.		I vissa fall kan olika CSS-egenskaper förändra samma sak, trots att de heter olika. Detta gäller inte minst de sammansatta, kortegenskaperna där man kan ange flera egenskaper med ett och samma CSS-kommando.
	== Att sätta samma egenskap i flera regler ==		== Att sätta samma egenskap i flera regler ==
	Vad skulle hända om vi hade följande CSS-kod:		Ett annat fall där samma egenskap kan förändras flera gånger är när vi har två (eller flera) regler som matchar samma element. Vad skulle hända om vi hade följande CSS-kod:
	<codepen pen="GJQgKm" tab="css" height="300">		<codepen pen="GJQgKm" tab="css" height="300">
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
Rad 33:		Rad 33:
	</codepen>		</codepen>

	Här har vi alltså två [[CSS-regel\|CSS-regler]]. En som säger att alla <code>[[hx\|h1]]</code>-element ska ha röd färg och en som säger att det [[element]]et som har [[id]] satt till ”<code>idnamn</code>” ska ha blå färg. Vad händer nu, när vi satt så att ett av våra <code>[[hx\|h1]]</code>-element har just den [[id]]:n? Jo, det finns ett regelverk som anger hur mycket vikt man ska lägga på olika [[selektor]]er och den tyngst vägande [[selektor]]n trumfar över de lättviktigare [[selektor]]erna. ~~Ungefär~~ som prioriteringsreglerna i matematiken, där t.ex. multiplikation sker före addition.		Här har vi alltså två [[CSS-regel\|CSS-regler]]. En som säger att alla <code>[[hx\|h1]]</code>-element ska ha röd färg och en som säger att det [[element]]et som har [[id]] satt till ”<code>idnamn</code>” ska ha blå färg. Vad händer nu, när vi satt så att ett av våra <code>[[hx\|h1]]</code>-element har just den [[id]]:n? Jo, det finns ett regelverk som anger hur mycket vikt man ska lägga på olika [[selektor]]er och den tyngst vägande [[selektor]]n trumfar över de lättviktigare [[selektor]]erna. Det fungerar ungefär som prioriteringsreglerna i matematiken, där t.ex. multiplikation sker före addition.

	I [[CSS]] kan man generellt säga att desto specifikare en [[selektor]] är, desto högre vikt har den. En id-selektor är ju jättespecifik, då den enbart kan matcha ett enda [[element]] (ett id får ju enbart förekomma en gång i ett webbdokument). Därmed har den högst vikt och det är den som ”vinner” i detta fall. Det <code>[[hx\|h1]]</code>-element som har [[id]]:t ”<code>idnamn</code>” kommer alltså att få blå textfärg.		I [[CSS]] kan man generellt säga att desto specifikare en [[selektor]] är, desto högre vikt har den. En id-selektor är ju jättespecifik, då den enbart kan matcha ett enda [[element]] (ett id får ju enbart förekomma en gång i ett webbdokument). Därmed har den högst vikt och det är den som ”vinner” i detta fall. Det <code>[[hx\|h1]]</code>-element som har [[id]]:t ”<code>idnamn</code>” kommer alltså att få blå textfärg.

PGJ: /* Exempel */

2016-10-19T06:49:14Z

Exempel

@@ Rad 1: / Rad 1: @@
 I många fall kommer flera olika CSS-regler att matcha ett och samma element.  Då kan det hända att dessa regler anger olika värden för samma egenskap, t.ex. kanske flera olika regler sätter bakgrundsfärgen. För att kunna hantera sådana situationer på ett förutsägbart sätt, så har CSS  ett regelverk som anger vilken turordning som gäller för olika selektorer.
-== Exempel ==
+== Att sätta samma egenskap i en regel ==
 Vad skulle hända om vi hade följande CSS-kod:
 <codepen pen="GJQgKm" tab="css" height="300">