Kombinationer av selektorer - Versionshistorik

PGJ den 31 oktober 2020 kl. 13.09

2020-10-31T13:09:41Z

← Äldre version		Versionen från 31 oktober 2020 kl. 13.09
Rad 3:		Rad 3:
	Om man någon gång vill påverka alla [[element]] i ett dokument så kan man använda sig av ”<code>*</code>”-tecknet. En sådan regel skulle se ut så här:		Om man någon gång vill påverka alla [[element]] i ett dokument så kan man använda sig av ”<code>*</code>”-tecknet. En sådan regel skulle se ut så här:

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	* {		* {
Rad 9:		Rad 8:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	Det skulle göra att all text, i alla [[element]] skulle skjutas åt vänster. Ja, förutom de [[element]] som eventuellt påverkas av någon annan regel, som är mer specifik än denna och som sätter ”<code>text-align</code>” till något annat.		Det skulle göra att all text, i alla [[element]] skulle skjutas åt vänster. Ja, förutom de [[element]] som eventuellt påverkas av någon annan regel, som är mer specifik än denna och som sätter ”<code>text-align</code>” till något annat.
Rad 18:		Rad 16:
	Ibland vill man att en regel ska triggas igång av flera olika [[selektor]]er. Det vill säga vi vill att flera olika typer av [[element]] ska påverkas av en och samma regel. Det är lätt att åstadkomma. Vi kombinerar helt enkelt alla [[selektor]]er vi vill på en rad och sätter dem åtskilda med kommatecken. Så här kan det se ut:		Ibland vill man att en regel ska triggas igång av flera olika [[selektor]]er. Det vill säga vi vill att flera olika typer av [[element]] ska påverkas av en och samma regel. Det är lätt att åstadkomma. Vi kombinerar helt enkelt alla [[selektor]]er vi vill på en rad och sätter dem åtskilda med kommatecken. Så här kan det se ut:

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	.topp, p, h2 {		.topp, p, h2 {
Rad 24:		Rad 21:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	Ovanstående exempel skulle sätta gul bakgrundsfärg på alla [[element]] som har [[klass]]en <code>.topp</code>, alla <code>[[p]]</code>-element och alla <code>[[hx\|h2]]</code>-element.		Ovanstående exempel skulle sätta gul bakgrundsfärg på alla [[element]] som har [[klass]]en <code>.topp</code>, alla <code>[[p]]</code>-element och alla <code>[[hx\|h2]]</code>-element.
Rad 31:		Rad 27:
	Nu ska vi börja titta på lite kraftfullare kombinationer av [[selektor]]er. Låt säga att du vill att alla <code>[[i]]</code>-element som finns inuti ett <code>[[p]]</code>-element ska påverkas. Man brukar kalla [[element]] som ligger inuti andra element för underelement, nästlade element eller avkomlings-element (från engelskans [[descendant]]). För att komma åt dessa [[element]], skapar man en regel där man sätter samman flera [[selektor]]er som en enda [[selektor]], åtskilda av ett mellanslag (eller annan "white space", såsom tab och ny rad). Ett exempel på detta:		Nu ska vi börja titta på lite kraftfullare kombinationer av [[selektor]]er. Låt säga att du vill att alla <code>[[i]]</code>-element som finns inuti ett <code>[[p]]</code>-element ska påverkas. Man brukar kalla [[element]] som ligger inuti andra element för underelement, nästlade element eller avkomlings-element (från engelskans [[descendant]]). För att komma åt dessa [[element]], skapar man en regel där man sätter samman flera [[selektor]]er som en enda [[selektor]], åtskilda av ett mellanslag (eller annan "white space", såsom tab och ny rad). Ett exempel på detta:

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	p i {		p i {
Rad 37:		Rad 32:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	Här väljer vi ut alla <code>[[i]]</code>-element som finns nästlade inuti <code>[[p]]</code>-element och dessa skulle nu få fetare textstil. Det går förstås att kombinera med andra [[selektor]]er än element-selektorerna.		Här väljer vi ut alla <code>[[i]]</code>-element som finns nästlade inuti <code>[[p]]</code>-element och dessa skulle nu få fetare textstil. Det går förstås att kombinera med andra [[selektor]]er än element-selektorerna.
Rad 43:		Rad 37:
	Du kan även använda stjärn-selektorn. Om du skulle vilja ändra ''alla'' [[element]] som finns inuti <code>[[p]]</code>-element, skulle du kunna göra så här:		Du kan även använda stjärn-selektorn. Om du skulle vilja ändra ''alla'' [[element]] som finns inuti <code>[[p]]</code>-element, skulle du kunna göra så här:

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	p * {		p * {
Rad 49:		Rad 42:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	I de flesta fall är det dock inte nödvändigt att göra detta. Väldigt många av föräldra-elementens egenskaper ärvs av underelementen. Så om du ändrar något såsom text-färgen, kommer underelementen att ärva samma färg. Vissa egenskaper ärvs dock inte. Om det inte fungerar som du vill, kolla i listan över [[CSS-egenskaper]] och se om egenskaperna ärvs eller ej.		I de flesta fall är det dock inte nödvändigt att göra detta. Väldigt många av föräldra-elementens egenskaper ärvs av underelementen. Så om du ändrar något såsom text-färgen, kommer underelementen att ärva samma färg. Vissa egenskaper ärvs dock inte. Om det inte fungerar som du vill, kolla i listan över [[CSS-egenskaper]] och se om egenskaperna ärvs eller ej.

PGJ den 12 april 2019 kl. 06.44

2019-04-12T06:44:38Z

← Äldre version		Versionen från 12 april 2019 kl. 06.44
Rad 1:		Rad 1:
	Vi ska nu titta på lite fler [[selektor]]er, samt hur man kan kombinera [[selektor]]erna på olika vis. Det finns många sätt på vilket vi kan påverka ~~flera~~ olika element med våra [[selektor]]er. Den enklaste multi-[[selektor]]n är <code>*</code>-selektorn.		Vi ska nu titta på lite fler [[selektor]]er, samt hur man kan kombinera [[selektor]]erna på olika vis. Det finns många sätt på vilket vi kan påverka olika element med våra [[selektor]]er. Den enklaste multi-[[selektor]]n är <code>*</code>-selektorn.
	== <code>*</code> ==		== <code>*</code> ==
	Om man någon gång vill påverka alla [[element]] i ett dokument så kan man använda sig av ”<code>*</code>”-tecknet. En sådan regel skulle se ut så här:		Om man någon gång vill påverka alla [[element]] i ett dokument så kan man använda sig av ”<code>*</code>”-tecknet. En sådan regel skulle se ut så här:

PGJ: /* Avkomling-selektorn (descendant) */

2019-01-11T21:42:48Z

Avkomling-selektorn (descendant)

← Äldre version		Versionen från 11 januari 2019 kl. 21.42
Rad 31:		Rad 31:
	Nu ska vi börja titta på lite kraftfullare kombinationer av [[selektor]]er. Låt säga att du vill att alla <code>[[i]]</code>-element som finns inuti ett <code>[[p]]</code>-element ska påverkas. Man brukar kalla [[element]] som ligger inuti andra element för underelement, nästlade element eller avkomlings-element (från engelskans [[descendant]]). För att komma åt dessa [[element]], skapar man en regel där man sätter samman flera [[selektor]]er som en enda [[selektor]], åtskilda av ett mellanslag (eller annan "white space", såsom tab och ny rad). Ett exempel på detta:		Nu ska vi börja titta på lite kraftfullare kombinationer av [[selektor]]er. Låt säga att du vill att alla <code>[[i]]</code>-element som finns inuti ett <code>[[p]]</code>-element ska påverkas. Man brukar kalla [[element]] som ligger inuti andra element för underelement, nästlade element eller avkomlings-element (från engelskans [[descendant]]). För att komma åt dessa [[element]], skapar man en regel där man sätter samman flera [[selektor]]er som en enda [[selektor]], åtskilda av ett mellanslag (eller annan "white space", såsom tab och ny rad). Ett exempel på detta:

			<div class="well well-cyanide-light">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	p i {		p i {
Rad 36:		Rad 37:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
			</div>

	Här väljer vi ut alla <code>[[i]]</code>-element som finns nästlade inuti <code>[[p]]</code>-element och dessa skulle nu få fetare textstil. Det går förstås att kombinera med andra [[selektor]]er än element-selektorerna.		Här väljer vi ut alla <code>[[i]]</code>-element som finns nästlade inuti <code>[[p]]</code>-element och dessa skulle nu få fetare textstil. Det går förstås att kombinera med andra [[selektor]]er än element-selektorerna.
Rad 41:		Rad 43:
	Du kan även använda stjärn-selektorn. Om du skulle vilja ändra ''alla'' [[element]] som finns inuti <code>[[p]]</code>-element, skulle du kunna göra så här:		Du kan även använda stjärn-selektorn. Om du skulle vilja ändra ''alla'' [[element]] som finns inuti <code>[[p]]</code>-element, skulle du kunna göra så här:

			<div class="well well-cyanide-light">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	p * {		p * {
Rad 46:		Rad 49:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
			</div>

	I de flesta fall är det dock inte nödvändigt att göra detta. Väldigt många av föräldra-elementens egenskaper ärvs av underelementen. Så om du ändrar något såsom text-färgen, kommer underelementen att ärva samma färg. Vissa egenskaper ärvs dock inte. Om det inte fungerar som du vill, kolla i listan över [[CSS-egenskaper]] och se om egenskaperna ärvs eller ej.		I de flesta fall är det dock inte nödvändigt att göra detta. Väldigt många av föräldra-elementens egenskaper ärvs av underelementen. Så om du ändrar något såsom text-färgen, kommer underelementen att ärva samma färg. Vissa egenskaper ärvs dock inte. Om det inte fungerar som du vill, kolla i listan över [[CSS-egenskaper]] och se om egenskaperna ärvs eller ej.

PGJ: /* Flera selektorer, en regel */

2019-01-11T21:42:21Z

Flera selektorer, en regel

← Äldre version		Versionen från 11 januari 2019 kl. 21.42
Rad 18:		Rad 18:
	Ibland vill man att en regel ska triggas igång av flera olika [[selektor]]er. Det vill säga vi vill att flera olika typer av [[element]] ska påverkas av en och samma regel. Det är lätt att åstadkomma. Vi kombinerar helt enkelt alla [[selektor]]er vi vill på en rad och sätter dem åtskilda med kommatecken. Så här kan det se ut:		Ibland vill man att en regel ska triggas igång av flera olika [[selektor]]er. Det vill säga vi vill att flera olika typer av [[element]] ska påverkas av en och samma regel. Det är lätt att åstadkomma. Vi kombinerar helt enkelt alla [[selektor]]er vi vill på en rad och sätter dem åtskilda med kommatecken. Så här kan det se ut:

			<div class="well well-cyanide-light">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	.topp, p, h2 {		.topp, p, h2 {
Rad 23:		Rad 24:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
			</div>

	Ovanstående exempel skulle sätta gul bakgrundsfärg på alla [[element]] som har [[klass]]en <code>.topp</code>, alla <code>[[p]]</code>-element och alla <code>[[hx\|h2]]</code>-element.		Ovanstående exempel skulle sätta gul bakgrundsfärg på alla [[element]] som har [[klass]]en <code>.topp</code>, alla <code>[[p]]</code>-element och alla <code>[[hx\|h2]]</code>-element.

PGJ: /* * */

2019-01-11T21:42:01Z

← Äldre version		Versionen från 11 januari 2019 kl. 21.42
Rad 3:		Rad 3:
	Om man någon gång vill påverka alla [[element]] i ett dokument så kan man använda sig av ”<code>*</code>”-tecknet. En sådan regel skulle se ut så här:		Om man någon gång vill påverka alla [[element]] i ett dokument så kan man använda sig av ”<code>*</code>”-tecknet. En sådan regel skulle se ut så här:

			<div class="well well-cyanide-light">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	* {		* {
Rad 8:		Rad 9:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
			</div>

	Det skulle göra att all text, i alla [[element]] skulle skjutas åt vänster. Ja, förutom de [[element]] som eventuellt påverkas av någon annan regel, som är mer specifik än denna och som sätter ”<code>text-align</code>” till något annat.		Det skulle göra att all text, i alla [[element]] skulle skjutas åt vänster. Ja, förutom de [[element]] som eventuellt påverkas av någon annan regel, som är mer specifik än denna och som sätter ”<code>text-align</code>” till något annat.

PGJ: /* Avkomling-selektorn (descendant) */

2016-10-19T10:47:20Z

Avkomling-selektorn (descendant)

← Äldre version		Versionen från 19 oktober 2016 kl. 10.47
Rad 43:		Rad 43:
	</syntaxhighlight>		</syntaxhighlight>

	I de flesta fall är det dock inte nödvändigt att göra detta. Väldigt många av föräldra-elementens egenskaper ärvs av underelementen. Så om du ändrar något såsom text-färgen, kommer underelementen att ärva samma färg. Vissa egenskaper ärvs dock inte~~, om~~ det inte fungerar som du vill kolla i listan över [[CSS-egenskaper]] och se om egenskaperna ärvs eller ej.		I de flesta fall är det dock inte nödvändigt att göra detta. Väldigt många av föräldra-elementens egenskaper ärvs av underelementen. Så om du ändrar något såsom text-färgen, kommer underelementen att ärva samma färg. Vissa egenskaper ärvs dock inte. Om det inte fungerar som du vill, kolla i listan över [[CSS-egenskaper]] och se om egenskaperna ärvs eller ej.

	== Det finns mer... ==		== Det finns mer... ==

PGJ: /* Flera selektorer, en regel */

2016-10-19T10:44:51Z

Flera selektorer, en regel

← Äldre version		Versionen från 19 oktober 2016 kl. 10.44
Rad 14:		Rad 14:

	== Flera selektorer, en regel ==		== Flera selektorer, en regel ==
	Ibland vill man att en regel ska triggas igång av flera olika [[selektor]]er. Det vill säga vi vill att flera olika typer av [[element]] ska påverkas av en och samma regel. Det är lätt att åstadkomma. Vi kombinerar helt enkelt alla [[selektor]]er vi vill ~~ha,~~ åtskilda med kommatecken~~, i vår regel~~. ~~T.ex. så~~ här:		Ibland vill man att en regel ska triggas igång av flera olika [[selektor]]er. Det vill säga vi vill att flera olika typer av [[element]] ska påverkas av en och samma regel. Det är lätt att åstadkomma. Vi kombinerar helt enkelt alla [[selektor]]er vi vill på en rad och sätter dem åtskilda med kommatecken. Så här kan det se ut:

	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">

PGJ: /* Flera selektorer, en regel */

2016-10-19T10:43:22Z

Flera selektorer, en regel

← Äldre version		Versionen från 19 oktober 2016 kl. 10.43
Rad 14:		Rad 14:

	== Flera selektorer, en regel ==		== Flera selektorer, en regel ==
	Ibland vill man att en regel ska triggas igång av flera olika [[selektor]]er. Det vill säga vi vill att flera olika typer av [[element]] ska påverkas av en och samma regel. Det är lätt att åstadkomma~~, vi~~ kombinerar helt enkelt alla [[selektor]]er vi vill ha, åtskilda med kommatecken, i vår regel. T.ex. så här:		Ibland vill man att en regel ska triggas igång av flera olika [[selektor]]er. Det vill säga vi vill att flera olika typer av [[element]] ska påverkas av en och samma regel. Det är lätt att åstadkomma. Vi kombinerar helt enkelt alla [[selektor]]er vi vill ha, åtskilda med kommatecken, i vår regel. T.ex. så här:

	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">

PGJ: /* * */

2016-10-19T10:42:42Z

← Äldre version		Versionen från 19 oktober 2016 kl. 10.42
Rad 11:		Rad 11:
	Det skulle göra att all text, i alla [[element]] skulle skjutas åt vänster. Ja, förutom de [[element]] som eventuellt påverkas av någon annan regel, som är mer specifik än denna och som sätter ”<code>text-align</code>” till något annat.		Det skulle göra att all text, i alla [[element]] skulle skjutas åt vänster. Ja, förutom de [[element]] som eventuellt påverkas av någon annan regel, som är mer specifik än denna och som sätter ”<code>text-align</code>” till något annat.

	Stjärn-selektorn är väldigt generell och matchar mycket. Den kan vara långsam att använda i de fall som man anger många egenskaper i den. Vanligtvis brukar man undvika den så långt som möjligt~~. Men~~ i vissa fall kan den vara bra att ha. ~~T.ex.~~ om man vill ändra "[[box model]]" för allt i ett helt dokument.		Stjärn-selektorn är väldigt generell och matchar ofta alltför mycket. Den kan vara långsam att använda i de fall som man anger många egenskaper i den. Vanligtvis brukar man undvika den så långt som möjligt, men i vissa fall kan den vara bra att ha. Ett exempel på detta kan vara om man vill ändra "[[box model]]" för allt i ett helt dokument.

	== Flera selektorer, en regel ==		== Flera selektorer, en regel ==

PGJ: /* * */

2016-10-19T07:11:15Z

← Äldre version		Versionen från 19 oktober 2016 kl. 07.11
Rad 11:		Rad 11:
	Det skulle göra att all text, i alla [[element]] skulle skjutas åt vänster. Ja, förutom de [[element]] som eventuellt påverkas av någon annan regel, som är mer specifik än denna och som sätter ”<code>text-align</code>” till något annat.		Det skulle göra att all text, i alla [[element]] skulle skjutas åt vänster. Ja, förutom de [[element]] som eventuellt påverkas av någon annan regel, som är mer specifik än denna och som sätter ”<code>text-align</code>” till något annat.

	Stjärn-selektorn är ~~rätt~~ långsam~~, så~~ man ~~bör~~ undvika den så långt som möjligt! Men i vissa fall kan den vara bra att ha. T.ex. om man vill ändra "[[box model]]" för ett helt dokument.		Stjärn-selektorn är väldigt generell och matchar mycket. Den kan vara långsam att använda i de fall som man anger många egenskaper i den. Vanligtvis brukar man undvika den så långt som möjligt. Men i vissa fall kan den vara bra att ha. T.ex. om man vill ändra "[[box model]]" för allt i ett helt dokument.

	== Flera selektorer, en regel ==		== Flera selektorer, en regel ==