Nur die Zahl einer geordneten Liste formatieren (in Verbindung mit Nested List)

[Maliko]

Hey,

ich verzweifle hier gerade etwas an einem kleinen Problem. Und zwar habe ich eine geordnete Liste, welche jeweils auch noch Unterpunkte hat (sprich 1, 1.1, etc). Die Darstellung funktioniert auch einwandfrei, allerdings würde ich jetzt gerne noch die Aufzählung der Hauptliste (also der einzelnen Zahlen nicht der x.x) formatieren. Ich hab schon einiges versucht bekomme es aber nicht hin. Hier schon einmal das CSS was ich derzeit verwende:

.imprint_data ol {
    counter-reset: item;
    list-style: decimal;
    padding-left: 20px;
}

.imprint_data > ol:before {
    color: #bf8a3a !important;
    font-size: 18px !important;
    line-height: 24px !important;
}

.imprint_data ul {
    list-style: circle;
    padding-left: 40px;
}

.imprint_data ol > ol {
    padding-left: 0px
}

.imprint_data ol > li {
    counter-increment: item;
    margin-bottom: 10px;
}

.imprint_data ol ol > li {
    display: block;
}

.imprint_data ul ul > li {
    display: block;
}

.imprint_data ol ol > li:before {
    content: counters(item, ".") ". ";
    margin-left: -20px;
}

.imprint_data > ol:before macht allerdings leider gar nichts. nehm ich den li noch rein werden lediglich die unterlisten formatiert, die Hauptliste aber weiterhin nicht.

Hat vielleicht jemand eine Idee was ich da machen kann? CSS ist nicht gerade meine Stärke, da ich es mir selbst beigebracht habe (bin Programmierer, kein Designer).

Vielen Dank schon einmal im Vorraus.

Viele Grüße
Maliko

 

[Maliko]

Huhu,

ich hab das Problem jetzt selbst gelöst. War auch eigentlich gar nicht so schwer, nachdem ich mal auf "Element untersuchen" im Browser geklickt habe. Da sieht man dann nämlich das im <li>-Segment das Pseudoelement ::marker existiert. Wenn man das formatiert dann wird auch nur die Zahl formatiert.

Also statt

.imprint_data > ol:before {
    color: #bf8a3a !important;
    font-size: 18px !important;
    line-height: 24px !important;
}

einfach dem li Element ein class-Attribut verpassen und dann folgenden Code verwenden.

.class_name::marker {
    color: #bf8a3a;
    font-size: 18px;
    line-height: 24px;
}

und schon funktioniert es