Navigation first-child stylen

[Centershock]

Hallo zusammen,

die Navigation möchte ich gerne etwas feintunen. Ich möchte gern die linken Ecken des ersten Elements <li>, wenn es aktiv ist, abrunden.
Habe schon einiges Versucht, doch nichts will wie ich will. Habt ihr eine Idee? Das war einer meiner Ansätze:

.panel-pagination .pagination > li:first-child > .active {
border-radius: 9px 0 0 9px;
}

1. Bild = Ist-Stand
2. Bild = Soll-Stand
3. Bild = nicht abrunden, wenn nicht first-child


<div class="panel-pagination text-right">
<nav>
<ul class="pagination">
<li>
<span class="active">1</span>
</li>
<li>
<a href="/?page=2" title="Seite 1">2</a>
</li>
<li>
<a href="/?page=3" title="Seite 1">3</a>
</li>
<li>
<a href="/?page=4" title="Seite 1">4</a>
</li>
<li>
<a href="/?page=2" title="nächste Seite">»</a>
</li>
</ul>
</nav>
</div>

 

[Sempervivum]

Du postet nicht alles CSS aber Da Du schreibst:

Ich möchte gern die linken Ecken des ersten Elements <li>

vermute ich, dass Du den Rand auf die li-Elemente angewendet hast. Die Klasse liegt jedoch beim span darin. Da gibt es jetzt das Problem, dass Du mit CSS nicht im Baum aufwärts gehen kannst, d. h. von dem span.active kannst Du nicht das li steuern. Wenn irgend möglich, weise die Klasse dem li zu, dann dürftest Du keine Problem haben.

 

[Centershock]

Hallo,

danke für die Info, das dachte ich mir schon. Aktuell komme ich leider nicht an den Code, dachte es gäbe eine Möglichkeit.

Falls sonst noch jemand eine Idee hat, gerne her damit.

 

[Sempervivum]

Wenn Du die Klasse nicht auf das li legen kannst und nur Zugriff auf das CSS hast, könntest Du den Rahmen beim li löschen und statt dessen um das span legen.

 

[Centershock]

Das klingt sehr gut, bei solchen Verschachtelungen mit first-child tue ich mir immer etwas schwer.
Könntest Du mir vielleicht zeigen, wie die CSS-Line aussehen sollte um das umzusetzen?

 

[Sempervivum]

Das wird mehrere Codezeilen erfordern. Poste am besten zunächst auch das CSS für die lis und das ul oder einen Link zu der Seite.

 

[DesignDude]

Ich würde das so machen:

li:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

Und das gleiche noch für last child.

 

[Centershock]

Das wird mehrere Codezeilen erfordern. Poste am besten zunächst auch das CSS für die lis und das ul oder einen Link zu der Seite.

Hallo,

das sollten die wichtigsten Klassen sein.
Kannst Du damit arbeiten?

.productlisting-filter-container .panel-pagination > nav > ul {
  margin-top: 0;
  float: right;
}
.productlisting-filter-container .panel-pagination > nav > ul {
  margin: 10px 0 0;
    margin-top: 10px;
  float: left;
}
.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 18px 0;
  border-radius: 9px;
}



.panel-pagination .pagination > li > .active,
.panel-pagination .pagination > li > .active:hover {
    color: #333;
}
.panel-pagination .pagination > li > .active {
    background-color: #eee;
}



.pagination > li > a,
.pagination > li > span {
    border: 2px solid #ddd;
}

.pagination > li > a,
.pagination > li > span {
    color: #333;
}
.pagination > li > a,
.pagination > li > span {
    position: relative;
    float: left;
    padding: 9px 12px;
    margin-left: -1px;
    line-height: 1.42857;
    color: #007ea2;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}

 

[Centershock]

Ich würde das so machen:

li:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

Und das gleiche noch für last child.

So einfach ist das nicht...
Anscheinend kann man ein first-child nur ans Ende einer Kette setzen.
Wir brauchen hier ein first child li, aber nur wenn darin ein span mit der Klasse active sitzt.
Ja, klingt so kompliziert wie es ist.

 

[Sempervivum]

Ja, das CSS ist schon ausreichend, allerdings wurden die Listenpunkte in meiner Testdatei nicht nebeneinander angeordnet, ich musste beim ul noch ein display:flex anbringen:

        .productlisting-filter-container .panel-pagination>nav>ul {
            display: flex;
            /* usw. wie schon vorhanden */

Anders als ich angenommen hatte, hast Du den Rand schon bei span und a hinzu gefügt, so dass sich das zusätzliche CSS doch stark reduziert:

        .pagination>li:first-child>span.active {
            border-radius: 9px 0 0 9px;
        }

Übrigens: Code besser in Code-Tags posten, das kleine Menüsymbol rechts neben dem Landschafts-Icon und dann </>

 

[Centershock]

Ok, das CSS ist jetzt Code. Merke ich mir.

Umbauen kann ich in CSS alles was ich möchte, nur ans Template komme ich noch nicht ran.

Nur nicht so viel Zeit da reinstecken, ist für mich eher ein Learning, als das es genau so aussehen muss.

 

[DesignDude]

So einfach ist das nicht...
Anscheinend kann man ein first-child nur ans Ende einer Kette setzen.
Wir brauchen hier ein first child li, aber nur wenn darin ein span mit der Klasse active sitzt.
Ja, klingt so kompliziert wie es ist.

Nö, also am Ende der Kette wäre es das last-child. Das first-child wählt immer das erste Element.

Und das erste muss ja immer abgerundet sein. Und genau das macht das first-child. Dabei ist es egal ob es darin ein « oder eine 1 oder irgend eine Klasse enthalten ist.

 

[Sempervivum]

Und das erste muss ja immer abgerundet sein

Da hast Du etwas überlesen, der Fragesteller schrieb:

Wir brauchen hier ein first child li, aber nur wenn darin ein span mit der Klasse active sitzt.

 

[DesignDude]

Da hast Du etwas überlesen, der Fragesteller schrieb:

Aha, ok, das geht glaub nicht.