Ich muss Stile nur für die erste Zeile Klasse in dieser Struktur anwenden. Gibt es eine Lösung:
.headercontainer .line > *:first-child {
border: 3px solid yellow;
}
<div class="headercontainer">
<div class="header">step1</div>
<div class="line"></div>
<div class="header">step2</div>
<div class="line"></div>
</div>
Alles, was ich hier verpasst habe, schlagen Sie bitte vor.
5 Antworten
Nicht wirklich. Sie können jedoch einen kleinen Trick als Problemumgehung verwenden: Legen Sie den Rahmen für alle diese Elemente fest und setzen Sie den Rahmen für alle Divs nach dem ersten auf den Standardwert zurück.
.headercontainer .line {
border: 3px solid yellow;
}
.headercontainer .line ~ .line {
border: none;
}
<div class="headercontainer">
<div class="header">step1</div>
<div class="line"></div>
<div class="header">step2</div>
<div class="line"></div>
</div>
Hoffe das hilft!
Was ist andererseits der Zweck der .line
Elemente? Wenn ihr einziger Zweck darin besteht, als Linie zu dienen, wäre die Antwort: nicht. Wirf sie weg und setze stattdessen einen unteren Rand auf das erste .header
. Das würde sowohl HTML als auch CSS vereinfachen.
.headercontainer .header:first-child {
border-bottom: 6px solid yellow;
}
<div class="headercontainer">
<div class="header">step1</div>
<div class="header">step2</div>
</div>
Css hat keinen first-of-class
Selektor, um die erste Klasse des angegebenen DOM-Elements auszuwählen. In Ihrem Fall, wenn Klassenaufträge bestehen bleiben. Dann können Sie sich bewerben
.headercontainer .header:first-child + .line {
color:red;
}
.headercontainer .header:first-child + .line {
color: red;
}
/* or:
.headercontainer .header:first-of-type + .line {
color: red;
}
*/
<div class="headercontainer">
<div class="header">step1</div>
<div class="line">red</div>
<div class="header">step2</div>
<div class="line">black</div>
</div>
Nein. Wenn Sie jedoch möglicherweise kein anderes HTML-Element für das Element 'line' verwenden. Sie können :first-of-type
verwenden
.headercontainer p:first-of-type {
border: 3px solid yellow;
}
<div class="headercontainer">
<div class="header">step1</div>
<p class="line">here</p>
<div class="header">step2</div>
<p class="line">there</p>
</div>
first-of-type
hat eine gute Browserunterstützung. Leider bietet CSS keinen :first-of-class
Selektor.
Andere Antworten haben speziell erklärt, wie Sie den gewünschten Selektor schreiben, dies ist jedoch nicht die beste Vorgehensweise.
Um die Wartung von CSS und HTML zu vereinfachen und die Arbeit für Ihre CSS Selector Engine zu vereinfachen, sollten Sie dem Element, das Sie anders gestalten möchten, eine neue Klasse hinzufügen.
Dadurch kann das CSS einfacher geändert werden und der HTML-Code wird deutlicher.
Eine andere Möglichkeit ist die Eigenschaft order
, die mit der Verwendung von Flexbox / Grid geliefert wird:
.headercontainer {
display: flex; /* displays flex-items (children) inline */
flex-direction: column; /* stacks them vertically */
}
.headercontainer .line:first-child {
border: 3px solid yellow;
}
/* or:
.headercontainer .line:first-of-type {
border: 3px solid yellow;
}
*/
.order {
order: -1; /* puts the flex-item back to its desired position or above other siblings, because the default value of the "order" property is "0" */
}
<div class="headercontainer">
<div class="line">border</div> <!-- needs to be positioned above other siblings in the DOM -->
<div class="header order">step1</div>
<div class="header">step2</div>
<div class="line">no border</div>
</div>
Verwandte Fragen
Neue Fragen
html
HTML (HyperText Markup Language) ist die Auszeichnungssprache zum Erstellen von Webseiten und anderen Informationen, die in einem Webbrowser angezeigt werden sollen. Fragen zu HTML sollten ein minimal reproduzierbares Beispiel und eine Vorstellung davon enthalten, was Sie erreichen möchten. Dieses Tag wird selten alleine verwendet und häufig mit [CSS] und [Javascript] gepaart.