Vergabe ID - Wobei kann es hier Konflikte geben?

[däni11]

Frage siehe bitte oben. Also kann die id numerisch sein und wie seiht es mit dem href$="1" aus, wenn die Zahl höher als 10 wird? Bis 9 funktioniert alls super. Ab 10 kommt alles durcheinander.
Danke schonmal ;)

Html-Datei body-Breich:

<span id="1">
<span id="2">
<span id="3">
.
.
<span id="9">
<span id="10">
-----------------------------
<a data-dir=l href=#1></a>
<a data-dir=l href=#2></a>
<a data-dir=l href=#3></a>
.
.
<a data-dir=l href=#9></a>
<a data-dir=l href=#10></a>

CSS-Datei:

[id="1"]:target [data-dir="r"][href$="2"],
[id="2"]:target [data-dir="l"][href$="1"],
[id="2"]:target [data-dir="r"][href$="3"],
[id="3"]:target [data-dir="l"][href$="2"],
[id="3"]:target [data-dir="r"][href$="4"],
.
.
[id="9"]:target [data-dir="r"][href$="10"],
[id="10"]:target [data-dir="l"][href$="9"],

 

[Bennyville]

Laut Google sind numerische ID's sind in HTML4 nicht erlaubt, in HTML5 schon. In HTML4 müssen sie mit einem Buchstaben beginnen.

Deine 2. Frage verstehe ich nicht ganz. „href$="1"“ zeigt doch auf alle Elemente dessen href-Atrribut mit einer „1“ enden. Deswegen verstehe ich nicht, warum bei dir alles bis „9“ funktioniert?

 

[Tronjer]

- Erstens sollten IDs nicht mit einer Ziffer beginnen.
- Zweitens ist das kein valider CSS Code.
- Drittens gibt es href$ nicht.
- Viertens verwendet man das HTML data-Attribut um Daten zu transportieren und nichts als CSS Selector.

 

[däni11]

Deswegen verstehe ich nicht, warum bei dir alles bis „9“ funktioniert?

Danke für deine Antwort!
Das ich die Frage evtl. so umständlich formuliere, liegt daran, dass ich zwar etwas von html verstehe, aber erst so ca. 1 Jahr damit hantiere.
Ich meinte damit, dass bis zu einer Anzahl an 9 Klassen, bei mir span´s, alles funktioniert. Nehme ich nur eine span mehr (also 10 spans, ich vergebe 10 id´s und nummeriere die Anker 1-10), haut es nicht mehr hin.
Ich habe eben vermutet, dass entweder die numerische id oder die Vergabe der Anker #1 #2 ... #9 #10 etwas mit der 2-Stelligkeit zu tun haben könnten. Also, dass Html nicht zwischer der 10, 11, 12 oder eben der 1 unterscheiden kann. Da alle mit einer 1 beginnen.
Können denn die Anker numerisch frei nach Beleiben vergeben werden?

Also ich habe den Code von hier. Ist eine tolle Sliding Image Gallery.
https://developer.mozilla.org/de/demos/detail/css-sliding-image-gallery
Könnte auch für andere interessant sein.
Heißt das, dass der CSS-Teil aus diesem Beispiel falsch geschrieben wurde?

 

[Bennyville]

Klar, die ID's brauchen in deinem Code keine bestimmte Reihenfolge. Wichtig ist, dass du ID's nur einmal vergibst. Ansonsten kannst du Klassen nutzen.

Wie aber @Tronjer schon erwähnt hat, ist dein CSS nicht valide. Da solltest du dich nochmal einlesen.

Als kleiner Tipp:
Ein HTML-Element mit der ID „1“ sprichst du in CSS mit „#1“ an. Bei Klassen läuft das fast genau so nur das du statt einer Raute einen Punkt „.“ verwendest. Dazu brauchst du dann nicht den Attribut-Selektor.

 

[bdt600]

Können denn die Anker numerisch frei nach Beleiben vergeben werden?

Du kannst id1, id2, ... idn nehmen, völlig wurscht. Solange keine Id doppelt vorkommt und nicht mit einer Zahl anfängt, ist alles gut.

 

[däni11]

Ich habe jetzt noch mal viel gegoogelt und herumprobiert.
In dem Beispiel der Sliding Galery aus dem Link wurde es mit den span´s gemacht, die sich selber nacheinander aufrufen und die Id´s deswegen in den span´s numerisch vergeben, damit der numerischer Wert sich immer das passende Bild in der Reihenfolge holt. Klappt leider nur bis zu 10 Bildern. Ab dem 11 Bild, oder der 11.Id bekommt das System das nicht mehr hin. Es hält die 1 dann für die 11 usw... . Mit Buchstaben als Id funktioniert das ganze Gerüst auch nicht.
Ich kann leider nur 10 Id´s vergeben nach dieser Variante.

 

[Tronjer]

Dann suche dir doch einen anderen Slider. Es gibt da etliche jQuery Plugins.

 

[däni11]

Dann suche dir doch einen anderen Slider. Es gibt da etliche jQuery Plugins.

Nee, ich wollte komplett sauber mit reinem CSS bleiben.
Werd ein 2.Untermenü einführen und dort wieder 10 Bilder anlegen.
Aber danke trotzdem für die Idee! Bei der Auswahl zwischen Java und CSS stand ich schon vor paar Wochen und habe mich für CSS entschieden.