Frank Hoppe: Länge von ID-Bezeichnern

Gibt es eine vorgeschriebene Maximallänge von ID-Bezeichnern? Ich habe die Vermutung das im Beispiel, nur alles bis vor die 3 berücksichtigt wird:

#wp-table-reloaded-id-13-no-1

Der Style vermischt sich dann mit dem der ID

#wp-table-reloaded-id-1

  1. @@Frank Hoppe:

    nuqneH

    Gibt es eine vorgeschriebene Maximallänge von ID-Bezeichnern?

    AFAIK nein. Könnte aber in manchen UAs so implementiert sein Allerdings …

    Ich habe die Vermutung das im Beispiel, nur alles bis vor die 3 berücksichtigt wird:
    #wp-table-reloaded-id-13-no-1

    … würde ich die Länge weit jenseits dessen erwarten.

    Der Style vermischt sich dann mit dem der ID
    #wp-table-reloaded-id-1

    Dafür wird es einen anderen Grund geben.

    Qapla'

    --
    Bildung lässt sich nicht downloaden. (Günther Jauch)
    1. O.k., dann werde ich trotzdem erstmal die Bezeichner verkürzen.

      1. @@Frank Hoppe:

        nuqneH

        O.k., dann werde ich trotzdem erstmal die Bezeichner verkürzen.

        Tu, was du nicht lassen kannst. Es wird nichts bringen.

        Qapla'

        --
        Bildung lässt sich nicht downloaden. (Günther Jauch)
        1. Wie recht Du hast...
          Ich werde weitergrübeln.

          nuqneH

          O.k., dann werde ich trotzdem erstmal die Bezeichner verkürzen.

          Tu, was du nicht lassen kannst. Es wird nichts bringen.

          Qapla'

          1. Moin Moin!

            Ich werde weitergrübeln.

            Zeig uns Code, dann zeigen wir Dir den Fehler. Links bevorzugt!

            Oder bau einen Testcase: Minimales HTML mit zwei IDs, minimales CSS mit zwei IDs, die sich optisch deutlich unterscheiden (z.B. kurze ID mit rotem Hintergrund, lange ID mit grünem Hintergrund).

            Alexander

            --
            Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so".
            1. Zeig uns Code, dann zeigen wir Dir den Fehler. Links bevorzugt!

              Oder bau einen Testcase: Minimales HTML mit zwei IDs, minimales CSS mit zwei IDs, die sich optisch deutlich unterscheiden (z.B. kurze ID mit rotem Hintergrund, lange ID mit grünem Hintergrund).

              Alexander

              Das Grübeln hat ein Ende. Folgender Code war fehlerhaft, wurde aber von diversen CSS-Validatoren nicht bemängelt:

                
              #wp-table-reloaded-id-1 .column-5, .column-6 {  
                width:         20px;  
                text-align:    center;  
                border-bottom: 1px solid #C8D5F0;  
                border-right:  1px solid #C8D5F0;  
              }  
              #wp-table-reloaded-id-2 .column-5, .column-6 {  
                text-align:    left;  
                width:         210px;  
                border-bottom: 1px solid #C8D5F0;  
                border-right:  1px solid #C8D5F0;  
              }  
              
              

              Die zweite Zuweisung (ID ...-2) hat die erste überschrieben (ID ...-1). Die Tabelle mit der ID wp-table-reloaded-id-1 und den Spalten mit der Klasse column-5 und column-6 bekam die Formatierungen der ID wp-table-reloaded-id-2.

              Ich habe dann aus der ID eine Klasse gemacht und

                
              table.wp-table-reloaded-id-1 .column-5, .column-6 {  
              
              

              usw. geschrieben. Das gleiche Ergebnis.

              Ein letzter Versuch war dann die Trennung der Klassen für die Spalten, also z.B.:

                
              table.wp-table-reloaded-id-2 column-5 {  
                text-align:    left;  
                width:         210px;  
                border-bottom: 1px solid #C8D5F0;  
                border-right:  1px solid #C8D5F0;  
              }  
              table.wp-table-reloaded-id-2 .column-6 {  
                text-align:    left;  
                width:         210px;  
                border-bottom: 1px solid #C8D5F0;  
                border-right:  1px solid #C8D5F0;  
              }  
              
              

              Und das funktioniert jetzt!

              Ich habe lange gekämpft, aber es hat sich gelohnt. Jetzt fehlt nur noch, das ich irgendwo eine vernünftige Dokumentation zum Aufbau von CSS-Dateien finde, wo alle Varianten die erlaubt sind, aufgelistet werden. In Selfhtml wurde ich nicht fündig.
              Die Definition mit dem Aufbau "Element.Oberklasse Unterklasse, Unterklasse" funktioniert zwar irgendwie, aber führt nur zu fehlerhaften Ergebnissen. Und ich habe gedacht, es läge an der ID-Länge, weil ich die vorhergehenden Fehler schon nicht bemerkt hatte.

              1. Servus,

                #wp-table-reloaded-id-1 .column-5, .column-6 {
                  width:         20px;
                  text-align:    center;
                  border-bottom: 1px solid #C8D5F0;
                  border-right:  1px solid #C8D5F0;
                }
                #wp-table-reloaded-id-2 .column-5, .column-6 {
                  text-align:    left;
                  width:         210px;
                  border-bottom: 1px solid #C8D5F0;
                  border-right:  1px solid #C8D5F0;
                }

                  
                Kein Wunder. Hier steht quasi:  
                #wp-table-reloaded-id-1 .column-5 {  
                  [...]  
                }  
                .column-6 {  
                  [...]  
                }  
                #wp-table-reloaded-id-2 .column-5 {  
                  [...]  
                }  
                .column-6 {  
                  [...]  
                }  
                  
                Das erste .column-6 wird natürlich vom 2. überschrieben.  
                  
                  
                Gruss  
                Patrick
                
                -- 
                sh:( fo:| ch:? rl:( br:> n4:( ie:% mo:) va:} de:> zu:) fl:| ss:| ls:[ js:|
                
                1. Ich danke allen für die Informationen!

              2. Moin!

                Das Grübeln hat ein Ende. Folgender Code war fehlerhaft, wurde aber von diversen CSS-Validatoren nicht bemängelt:

                Weil er korrekt ist.

                #wp-table-reloaded-id-1 .column-5, .column-6 {}

                  
                Das Komma trennt als Aufzählung VOLLSTÄNDIGE Selektoren - nicht nur den letzten Teil eines Selektors.  
                  
                
                > Die Definition mit dem Aufbau "Element.Oberklasse Unterklasse, Unterklasse" funktioniert zwar irgendwie, aber führt nur zu fehlerhaften Ergebnissen. Und ich habe gedacht, es läge an der ID-Länge, weil ich die vorhergehenden Fehler schon nicht bemerkt hatte.  
                  
                Wenn du mehr als einen Selektor aufzählen willst, musst du immer den vollständigen Selektor benennen:  
                  
                `#wp-table-reloaded-id-1 .column-5, #wp-table-reloaded-id-1 .column-6 {}`{:.language-css}  
                  
                 - Sven Rautenberg