CSS - Unterschied zwischen id- und class-Selektoren

Computer: Software & Programmierung HTML & CSS
1

Guten Morgen!

Ich kenne das so, und so ist es z. B. auch [hier][1] oder auch [hier][2] (wobei das hier relativiert wird. „The id of an element should be unique within a page“) oder [hier][3] beschrieben, dass ich class-Selektoren mehrfach auf einer Seite verwenden darf, während id-Selektoren nur ein Mal pro Seite verwendet werden dürfen.

ABER: in der Praxis (ich hab’s einfach ausprobiert, und mir die Datei mit Firefox und IE +Edge angeschaut) sieht das so aus, dass die Datei auch dann richtig angezeigt wird, wenn ich dieselbe id 2x auf der Seite/im Dokument benutze.

Sehe ich das richtig, dass es dann einfach nur ein „logischer“ Fehler ist, wenn man denselben id-Selektor mehrfach auf einer Seite benutzt, dies aber in der Praxis keinerlei Auswirkung hat? Oder ist mir irgendwas entgangen?

Viele Grüße
Christa
[1]: http://www.html-seminar.de/class_und_id.htm
[2]: http://www.w3schools.com/css/css_syntax.asp
[3]: https://wiki.selfhtml.org/wiki/CSS/Selektoren/ID-Selektor

2

IDs können ja auch im Zusammenhang mit Ankerlinks oder JS verwendet werden.
Also selbst wenn man sie mehrfach verwenden kann, denke ich, dass es „Best Practice“ ist, das nicht zu tun :smiley:

3

Hallo,

ich sehe es ähnlich wie IchWeissDassIchNichtsWeiss.

HTML und alle angeschlossenen Methoden (JS, CSS) sind sehr Fehlertollerant.

ich verwende sehr oft eine ID in Kombination mit einem Tag
zlB.

header#logo {
…
}

Damit kan ich den selben ID Namen (der sollte ja beschreibend sein) mehrfach aber doch eindeutig qualifizert verwenden.

Folgendes Beispiel verdeutlicht das Prinzip
Der text in <header> und <article> wird unterschiedlich dargestellt.

Getestet mit Firefox

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<style>
  header p#text-1 {
    color:red;
    }
  article p#text-1{
     color:blue;
     }
</style>
</head>
<body>
<header>
 <p id="text-1">header text</p>
</header>
<menu>
</menu>
<article>
 <p id="text-1">Artikel text</p>
</article>
<footer>
</footer>
</body>

</html>