✔ Welche Methode ist die bessere?

[SpiceLab]

Können denn Pseudoklassen zu Fehlern führen?

Nicht, dass ich wüsste.

Aber mein Gefühl sagt das nicht jeder Browser damit umgehen kann. Muss ein Browser CSS3-Fähig sein?

Selbstverständlich Beispielsweise CSS3 :nth-child() Selector nennt sie beim Namen.

Und mit dem empfohlenen IE-Script bist du auf der sicheren Seite, was die Vorgänger von IE8 betrifft.

Ich denke, dass wir das Thema nun ausreichend erörtert und geklärt haben, und du es an dieser Stelle als erledigt markieren kannst.

 

[Alice]

Ich hätte zu einem Problem noch eine Frage. Wollte jetzt kein extra Thread starten.

#Search > form
{
	...
}

#Search > form > div:nth-child(1)
{
	...
}

#Search > form > div:nth-child(1) > input:nth-child(1)
{
	...
}

#Search > form > div:nth-child(1) > input:nth-child(2)
{
	...
}

Funktioniert überhaupt nicht. Der Browser verknüft den HTML-Part nicht mit dem CSS-Part. Hab alle Varianten ausprobiert, die mir eingefallen sind. Auch bei Google konnte ich - für mich - nichts brauchbares finden.

 

[SpiceLab]

Das funktioniert bei mir tadellos.

Wie lautet denn der HTML-Code?

 

[Alice]

<div id="Search">
   <div>
      <div>Suche</div>
      <form action="search.php?do=process" method="post">
         <input type="hidden" name="do" value="process" />
         <input type="hidden" name="quicksearch" value="1" />
         <input type="hidden" name="childforums" value="1" />
         <input type="hidden" name="exactname" value="1" />
         <input type="hidden" name="s" value="$session[sessionhash]" />
         <input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
         <input type="hidden" name="showposts" value="0" />
         <div>
            <input type="text" name="query"  />
            <input type="image" src="go.png" name="submit" />
            <div></div>
         </div>
         <div><a href="search.php">Erweiterte Suche</a></div>
      </form>
   </div>
</div>

Die ersten 7 Input-Felder gehören zur Forensoftware. Hab es nur der Vollständigkeits halber nicht ausgeblendet.

 

[SpiceLab]

Die Selektoren müssten demnach so lauten:

#Search > div > form
{
    ...
}
 
#Search > div > form > div:nth-child(8)
{
   ...
}
 
#Search > div > form > div:nth-child(8) > input:nth-child(1)
{
    ...
}
 
#Search > div > form > div:nth-child(8) > input:nth-child(2)
{
    ...
}

 

[Alice]

Ich verneige mich vor dem CSS-Gott.

Danke noch einmal! Vorallem für Deine Geduld mit mir.

 

[SpiceLab]

Keine Ursache

Und Geduld ist eine meiner Stärken ;-)

 

[Alice]

Habe zu diesem Thema noch eine Frage.

.ForumsL1A1 > li > div > div > div > div:nth-child(3) > div:nth-child(1),
.ForumsL1A1 > li > div > div > div > div:nth-child(3) > div:nth-child(1) a:link,
.ForumsL1A1 > li > div > div > div > div:nth-child(3) > div:nth-child(1) a:visited,
.ForumsL1A1 > li > div > div > div > div:nth-child(3) > div:nth-child(1) a:active,
.ForumsL1A1 > li > div > div > div > div:nth-child(3) > div:nth-child(1) a:focus
{
   color: #1D3B57;
   text-decoration: none;
   font: 12px 'OpenSans600';
}

Bewege ich mich mit so einem Code (Kindselektor) noch im Bereich des "normalen" oder ist das doch etwas zu heavy? Der CSS-Validator spuckt zwar keine Fehler/Warnungen aus, aber die länge "der Pfade" ist noch nicht einmal "ausgeschöpft". Wird also noch länger. Kann ich so bedenkenlos weitermachen?

 

[SpiceLab]

Prinzipiell ja. Aber ohne jetzt den HTML-Code zu kennen, um beurteilen zu können, ob der Kindselektor und :nth-child() hier überhaupt angebracht/begründet/praktikabel/sinnvoll sind, um das n-te Kindelement zu selektieren, wäre der Nachfahrenselektor in Kombination mit einem Klassenbezeichner für die Links nicht effektiver? Besonders, wenn sich zukünftig an der verschachtelten HTML-Struktur etwas ändern sollte.

.ForumsL1A1 a.className:link,
.ForumsL1A1 a.className:visited,
.ForumsL1A1 a.className:focus,
.ForumsL1A1 a.className:active {...}

... und je nachdem, wie sich der HTML-Code an dieser Stelle im Detail darstellt, könnte hier sogar auf den Klassenbezeichner verzichtet werden:

.ForumsL1A1 a:link,
.ForumsL1A1 a:visited,
.ForumsL1A1 a:focus,
.ForumsL1A1 a:active {...}

Übrigens hast du die letzten beiden Pseudoklassen :focus & :active in der falschen Reihenfolge benannt - siehe http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active

Beachten Sie:

Um die meist gewünschte Darstellung dieser Pseudoklassen zu erreichen, müssen Sie bei der Notierung die Reihenfolge des Beispiels einhalten.

[edit]Tipp-Ex[/edit]​

 

[Alice]

Danke für deine Aufmerksamtkeit mit der Reihenfolge. Der wäre mir niemals aufgefallen. Wieder etwas gelernt.