Kann CSS Klasse nicht finden...

[RWarnecke]

Hallo zusammen,

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

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> ?

[Ghostwalker]

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 :)

[RWarnecke]

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 ?

[Ghostwalker]

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.

[RWarnecke]

Hallo Uwe,

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

[Ghostwalker]

Keine Ursache :) Hab lange genug mit dem Zeug gearbeitet :)

[Namenloser]

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.

[jaenicke]

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