Navigation first-child stylen

Diskutiere Navigation first-child stylen im CSS Forum im Bereich Programmierung; 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...
C

Centershock

Member
Beiträge
6
Punkte Reaktionen
0
Bildschirmfoto 2022-10-23 um 18.43.16.pngBildschirmfoto 2022-10-23 um 18.45.50.pngBildschirmfoto 2022-10-23 um 18.47.48.png
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>
 
S

Sempervivum

Well-known member
Beiträge
280
Punkte Reaktionen
43
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.
 
C

Centershock

Member
Beiträge
6
Punkte Reaktionen
0
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.
 
S

Sempervivum

Well-known member
Beiträge
280
Punkte Reaktionen
43
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.
 
C

Centershock

Member
Beiträge
6
Punkte Reaktionen
0
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?
 
S

Sempervivum

Well-known member
Beiträge
280
Punkte Reaktionen
43
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.
 
Zuletzt bearbeitet:
DesignDude

DesignDude

New member
Beiträge
4
Punkte Reaktionen
0
Ich würde das so machen:

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

Und das gleiche noch für last child.
 
C

Centershock

Member
Beiträge
6
Punkte Reaktionen
0
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?

Code:
.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;
}
 
Zuletzt bearbeitet:
C

Centershock

Member
Beiträge
6
Punkte Reaktionen
0
Ich würde das so machen:

CSS:
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.
 
S

Sempervivum

Well-known member
Beiträge
280
Punkte Reaktionen
43
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:
Code:
        .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:
Code:
        .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 </>
 
C

Centershock

Member
Beiträge
6
Punkte Reaktionen
0
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

DesignDude

New member
Beiträge
4
Punkte Reaktionen
0
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.
 
Thema:

Navigation first-child stylen

Oben Unten