Forum Mjukvara Programmering och digitalt skapande Tråd

[CSS] Skillnad mellan class och id?

1
Skriv svar
Permalänk
Medlem
●

[CSS] Skillnad mellan class och id?

Bara undrar om det tolkas olika, för jag får olika renderingar beroende på vad jag kör :/ Aldrig råkat ut för det tidigare. Funkar med id, sen byter jag till class på de ställena jag vill och så gör jag det samma i css-filen.

Väääldigt konstigt tycker jag..

Visa signatur

Swec @ 2001 / Chalmerist - Javisst!
'Den som har flest prylar när han dör vinner!'

Redigera
Citera flera Citera
Permalänk
Medlem
●

id är väl unikt?

Redigera
Citera flera Citera
Permalänk
Medlem
●

ID är unikt för varje objekt, CLASS ska du använda för att definiera stilar.

EDIT: Aldrig får man vara först

Senast redigerat
Visa signatur

Laptop: Zepto 6214W, Core Duo @ 2.0 GHz, 2048 MB RAM, 100 GB 7200 rpm
Server: Asus A7N8X Deluxe 2.0, Athlon XP 2500+ Barton, 2*Corsair 1024 MB, 200 GB Seagate, 3*320 GB WD3200 varav 2*RAID Edition

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ja, jag veeet
Det var inte det frågan handlade om
"Bara undrar om det tolkas olika"

Visa signatur

Swec @ 2001 / Chalmerist - Javisst!
'Den som har flest prylar när han dör vinner!'

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ja jag undrar lite samma sak, varför finns ID när man alltid kan använda Class?

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jo, lite av den frågan inkluderas i min, det har du rätt i

Visa signatur

Swec @ 2001 / Chalmerist - Javisst!
'Den som har flest prylar när han dör vinner!'

Redigera
Citera flera Citera
Permalänk
Medlem
●

En vild gissning att det finns 2 är för strukturens skull.

Visa signatur

metal

Redigera
Citera flera Citera
Permalänk
Medlem
●

ID använder man ju väldigt ofta när man programmerar i JavaScript, personligen använder jag det aldrig för CSS-grejer.

Visa signatur

Laptop: Zepto 6214W, Core Duo @ 2.0 GHz, 2048 MB RAM, 100 GB 7200 rpm
Server: Asus A7N8X Deluxe 2.0, Athlon XP 2500+ Barton, 2*Corsair 1024 MB, 200 GB Seagate, 3*320 GB WD3200 varav 2*RAID Edition

Redigera
Citera flera Citera
Permalänk
Medlem
●

Joooo men jag har fortfarande inte fått svar på min fråga. Ingen som vet?

Visa signatur

Swec @ 2001 / Chalmerist - Javisst!
'Den som har flest prylar när han dör vinner!'

Redigera
Citera flera Citera
Permalänk
Medlem
●

men id och class är två helt olika variabler.
nu vet jag riktigt hur sånt där parsas, men med javascript och annan dynamik så är det två helt olika variabler. Varför det ens går att blanda är enligt mig konstigt (och inkonsekvent).

class är ju definiering av funktionalitet, id är namngivning

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag tycker det ärjättekonstigt, aldrig upplevt något sånt här förut.

Visa signatur

Swec @ 2001 / Chalmerist - Javisst!
'Den som har flest prylar när han dör vinner!'

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Använder ID när det gäller specifika lager och class när det gäller övergripande på återkommande objekt på hela sidan.

Svårare än så är det inte

Sen kan man ju alltid jävlas med browsern och lägga in ett id och en class med olika värden

Visa signatur

Intel i7 6700K @ 4,4 Ghz | MSI Z170 KRAIT GAMING 3X | be quiet! Dark Rock 4 | 16 GB Kingston HyperX Fury 2133 Mhz | Asus RTX 3060 OC | PNY XLR8 CS3030 500 GB | Samsung 860 QVO 1 TB

Redigera
Citera flera Citera
Permalänk
Medlem
●

Precis så gör jag... Men varför funkar det inte nu då?

Visa signatur

Swec @ 2001 / Chalmerist - Javisst!
'Den som har flest prylar när han dör vinner!'

Redigera
Citera flera Citera
Permalänk
Medlem
●

.class

#id

skrivs ut:

<span class="class">

<div id="id">

Jo precis, id är unikt och kan inte användas fler gånger. I alla fall inte om du ska validera skiten. Nu yrar jag säkert.... Trött tröttare tröttast

Visa signatur

MSI B650 Tomahawk, 7800X3D, RTX 3080, 32GB DDR5 6000MHz, MSI MPG A850G

Redigera
Citera flera Citera
Permalänk
Medlem
●

samurai har rätt - det går inte att validera en sida om man använder samma ID på flera ställen (då skall man använda class)

jag har iallafal fått de felen när jag jobbat med en sida där jag blandade ihop mina namn lite

Visa signatur

Har varit på detta forum på tok för länge...

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag har letat förgäves efter detta på w3schools.com. Kan man få se någon källa?

Visa signatur

Swec @ 2001 / Chalmerist - Javisst!
'Den som har flest prylar när han dör vinner!'

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Zapher
Jag har letat förgäves efter detta på w3schools.com. Kan man få se någon källa?

Duger rekomendationen?

Visa signatur

Python-IRC på svenska: #python.se

Redigera
Citera flera Citera
Permalänk
Medlem
●

Du borde inte få olika renderingar. Det är med all säkerhet något du gjort fel. Någon annan överlappande stilregel som ligger och skräpar eller så. Lägg upp ett exempel så att vi kan kolla.

Visa signatur

10 RTFM
20 RTFAQ
30 STFW

Redigera
Citera flera Citera
Permalänk
Medlem
●

Nja, såg inget om det där iaf.

Visa signatur

Swec @ 2001 / Chalmerist - Javisst!
'Den som har flest prylar när han dör vinner!'

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Zapher
Nja, såg inget om det där iaf.

Citat:

id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.

?

Visa signatur

Python-IRC på svenska: #python.se

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av PointMan
Sen kan man ju alltid jävlas med browsern och lägga in ett id och en class med olika värden

Det är inte att jävlas. Det finns en hierarki i CSS, där det mer specifika får företräde. Om det för ett element förordas en viss färg som default, en annan utifrån taggen, en tredje utifrån dess class och en fjärde utifrån dess id, så får den id-färgen. I övrigt gissar jag att hierarkin är i den ordningen jag skrev.

Om jag inte missförstått, är det ungefär detta som är kaskaden i "Cascading Style Sheets".

Visa signatur

Personlig webbplats Talman2Batmanizer Slänko Remindera
Greasemonkey-script Artwork of Johanna Öst

Redigera
Citera flera Citera
Permalänk
Medlem
●

Det hadnalr ju om ifall det renderas olika.

Edit: Renderas lika
Jag hade kollat igenom allt jättenoga, men jag missade mina browser-specifika regler i toppen av filen.

Senast redigerat
Visa signatur

Swec @ 2001 / Chalmerist - Javisst!
'Den som har flest prylar när han dör vinner!'

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Malesca
Om jag inte missförstått, är det ungefär detta som är kaskaden i "Cascading Style Sheets".

Exakt. Man brukar tala om a selector's specificity. Man kan bli snurrig
för mindre av att läsa det och blandar du också in inheritance och
börjar fundera på vad man kan göra så brukar det sluta med att man
går ut och köper kaffe

CSS har ju en ganska avancerad uppsättning regler över hur den
prioriterar saker. Id värderas som mycket högre än class.

Reflektera över följande:

HTML:

<body>
	<div>
		<div>
			<div>
				<div>
					<div>
						<div>
							<dl>
								<dt>Lorem</dt>
								<dd>
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque quis lacus. Vestibulum auctor.</p>
									<p>Donec <span class="Quam">quam</span> enim, aliquet et, lobortis eu, nonummy at, lacus.</p>
								</dd>
							</dl>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

CSS:

.Quam
{
	/* Regel 1: specificity = 10 */
	color: red;
}

body > div > div > div > div > div > div > dl > dd > p > span
{
	/* Regel 2: specificity = 11 */
	color: blue;
}

och

HTML:

<body>
	<div>
		<div>
			<div>
				<div>
					<div>
						<div>
							<dl>
								<dt>Lorem</dt>
								<dd>
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque quis lacus. Vestibulum auctor.</p>
									<p>Donec <span id="Quam">quam</span> enim, aliquet et, lobortis eu, nonummy at, lacus.</p>
								</dd>
							</dl>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

CSS:

#Quam
{
	/* Regel 1: specificity = 100 */
	color: red;
}

body > div > div > div > div > div > div > dl > dd > p > span
{
	/* Regel 2: specificity = 11 */
	color: blue;
}

Med lite mer avancerade sidor är det lätt att få en djup struktur på
sin HTML. Det är då det börjar bli svårt att hitta alla 'oväntade' saker
CSS bjuder en på.

Senast redigerat
Visa signatur

10 RTFM
20 RTFAQ
30 STFW

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Zapher
Det hadnalr ju om ifall det renderas olika.

Ah det, det ska självklart inte skilja, har du nåt exempel?

Visa signatur

Python-IRC på svenska: #python.se

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Zapher
Edit: Renderas lika
Jag hade kollat igenom allt jättenoga, men jag missade mina browser-specifika regler i toppen av filen.

Case closed.

Visa signatur

10 RTFM
20 RTFAQ
30 STFW

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara