Hallo zusammen,

ich brauche mal eure Unterstützung. Ich habe folgenden HTML Seitenquelltext :

markieren

Code:

<ul class="products">
   <li class="product-category product first"> blablabla </li>
   <li class="product-category product"> blablabla </li>
</ul>

Wie finde ich jetzt in den CSS Dateien zu der Seite die entsprechende Klasse für den TAG <li> ?

Beim 1. <li> sind 3 Klassen angegeben beim 2. 2 Klassen

1. Klasse: .product-category

2. Klasse: .product

3. Klasse: .first


Welches Schweinderl hättn's denn gerne ?

Am einfachsten (imho) geht's mit Firefox+Firebug-Addon. Der zeig dir direkt an wo (also in welcher CSS) welche Klasse wie definiert ist

Wie werden denn die Klassen verarbeitet ? Muss ich für das 1. <li> nach li.product-category.product.first suchen ? Oder nach welcher Kombination muss ich in der CSS Datei suchen ?

Das lässt sich global so nicht sagen, das hängt davon ab, in welcher Klasse was definiert wird.


Beispiel:

CSS:

.product-categorie{
font-weight: bold;
}

.product{
font-size: 12pt;
}

.first{
font-color: #ff0000;
}


li.product-categorie.product.first würde hier bold 12pt rot gerendert.
li.product-categorie.product dagegen nur bold 12pt.

Möglich wär aber auch folgende CSS:

.product-categories.product.first{
font-weight:bold;
font-size: 12pt;
font-color: #ff0000;
}

li.product-categories.product.first würde wie oben gerendert
li.product-categories.product aber nicht.

Ausgewertet wird das ganze immer von rechts nach links.

Hallo Uwe,

danke für Deine ausführliche Antwort. Das hilft mir schon mal weiter, ich verstehe das ganze jetzt etwas besser.

Keine Ursache Hab lange genug mit dem Zeug gearbeitet

Ich empfehle dir die Firefox Developer Tools (Öffnen mit Strg-Shift-I) oder vergleichbare Funktionen in anderen Browsern. Dort kannst du einzelne HTML-Elemente selektieren und dir genau anschauen, welche CSS-Regeln angewandt werden.

Oder F12 in Chrome und IE.
Dort gibt es auch direkt einen Link zur CSS Definition.