Gibt es einen CSS-Selektor für das folgende Szenario?

Question

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.

html css

0

dhana 18 Apr. 2018 im 10:11

Answer 1

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>

3

Mr Lister 18 Apr. 2018 im 07:52

Answer 2

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>

2

VXp 18 Apr. 2018 im 07:32

Answer 3

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>

Demo

first-of-type hat eine gute Browserunterstützung. Leider bietet CSS keinen :first-of-class Selektor.

1

David Lin 18 Apr. 2018 im 13:54

Answer 4

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.

0

Joseph Reeve 18 Apr. 2018 im 07:52

Answer 5

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>

0

VXp 29 Sept. 2018 im 08:54

Gibt es einen CSS-Selektor für das folgende Szenario?

5 Antworten

Verwandte Fragen

Neue Fragen

html