CSS-Selektor für das erste Element mit Klasse

Ich habe eine Reihe von Elementen mit einem Klassennamen red, aber ich kann das erste Element nicht mit class="red"der folgenden CSS-Regel auswählen :

.red:first-child {
    border: 5px solid red;
}

<p class="red"></p>
<div class="red"></div>

Was ist an diesem Selektor falsch und wie korrigiere ich ihn?

Dank der Kommentare habe ich herausgefunden, dass das Element das erste Kind seines Elternteils sein muss, um ausgewählt zu werden, was bei mir nicht der Fall ist. Ich habe die folgende Struktur und diese Regel schlägt fehl, wie in den Kommentaren erwähnt:

.home .red:first-child {
    border: 1px solid red;
}

<div class="home">
    <span>blah</span>
    <p class="red">first</p>
    <p class="red">second</p>
    <p class="red">third</p>
    <p class="red">fourth</p>
</div>

Wie kann ich das erste Kind mit Klasse ansprechen red?

Dies ist eines der bekanntesten Beispiele für Autoren, die falsch verstehen, wie es :first-childfunktioniert. Eingeführt in CSS2 , die :first-childdarstellt , pseudo-Klasse das erste Kind seiner Eltern . Das ist es. Es gibt ein sehr häufiges Missverständnis, dass es jedes untergeordnete Element aufgreift, das als erstes den Bedingungen entspricht, die vom Rest des zusammengesetzten Selektors angegeben werden. Aufgrund der Arbeit Selektoren Art und Weise (siehe hier für eine Erklärung), die einfach nicht wahr ist.

Selektorebene 3 führt eine :first-of-typePseudoklasse ein , die das erste Element unter den Geschwistern seines Elementtyps darstellt. Diese Antwort erklärt anhand von Abbildungen den Unterschied zwischen :first-childund :first-of-type. Wie :first-childbei werden jedoch keine anderen Bedingungen oder Attribute berücksichtigt. In HTML wird der Elementtyp durch den Tag-Namen dargestellt. In der Frage ist dieser Typ p.

Leider gibt es keine ähnliche :first-of-classPseudoklasse zum Abgleichen des ersten untergeordneten Elements einer bestimmten Klasse. Eine Problemumgehung , die Lea Verou und ich uns dafür ausgedacht haben (wenn auch völlig unabhängig), besteht darin, zuerst Ihre gewünschten Stile auf alle Ihre Elemente mit dieser Klasse anzuwenden :

/* 
 * Select all .red children of .home, including the first one,
 * and give them a border.
 */
.home > .red {
    border: 1px solid red;
}

... dann "rückgängig machen" Sie die Stile für Elemente mit der Klasse, die nach der ersten kommen , unter Verwendung des allgemeinen Geschwisterkombinators~ in einer übergeordneten Regel:

/* 
 * Select all but the first .red child of .home,
 * and remove the border from the previous rule.
 */
.home > .red ~ .red {
    border: none;
}

Jetzt hat nur das erste Element mit class="red"einen Rand.

Hier ist eine Illustration, wie die Regeln angewendet werden:

<div class="home">
  <span>blah</span>         <!-- [1] -->
  <p class="red">first</p>  <!-- [2] -->
  <p class="red">second</p> <!-- [3] -->
  <p class="red">third</p>  <!-- [3] -->
  <p class="red">fourth</p> <!-- [3] -->
</div>

1. Es werden keine Regeln angewendet. Es wird kein Rand gerendert.
   Dieses Element hat keine Klasse red, daher wird es übersprungen.

2. Es wird nur die erste Regel angewendet. Ein roter Rand wird gerendert.
   Dieses Element hat die Klasse red, aber es werden keine Elemente mit der Klasse redim übergeordneten Element vorangestellt . Somit wird nicht die zweite Regel angewendet, sondern nur die erste, und das Element behält seinen Rand.

3. Beide Regeln werden angewendet; Es wird kein Rand gerendert.
   Dieses Element hat die Klasse red. Es wird auch mindestens ein weiteres Element mit der Klasse vorangestellt red. Somit werden beide Regeln angewendet, und die zweite borderDeklaration überschreibt die erste, wodurch sie sozusagen "rückgängig gemacht" wird.

Als Bonus wird der allgemeine Geschwisterkombinator, obwohl er in Selectors 3 eingeführt wurde, von IE7 und neueren Versionen im Gegensatz zu :first-of-typeund ziemlich gut unterstützt:nth-of-type() die nur weiter mit dem IE9 unterstützt werden. Wenn Sie gute Browserunterstützung benötigen, haben Sie Glück.

Die Tatsache, dass der Geschwisterkombinator die einzige wichtige Komponente in dieser Technik ist und eine so erstaunliche Browserunterstützung bietet, macht diese Technik sehr vielseitig - Sie können sie neben den Klassenselektoren auch zum Filtern von Elementen durch andere Dinge anpassen:

• Sie können dies verwenden, um :first-of-typein IE7 und IE8 zu umgehen, indem Sie einfach einen Typ-Selektor anstelle eines Klassen-Selektors angeben (mehr zu seiner falschen Verwendung hier in einem späteren Abschnitt):

  article > p {
      /* Apply styles to article > p:first-of-type, which may or may not be :first-child */
  }
  
  article > p ~ p {
      /* Undo the above styles for every subsequent article > p */
  }

• Sie können anstelle von Klassen nach Attributselektoren oder anderen einfachen Selektoren filtern .

• Sie können diese übergeordnete Technik auch mit Pseudoelementen kombinieren , obwohl Pseudoelemente technisch gesehen keine einfachen Selektoren sind.

Beachten Sie, dass Sie im Voraus wissen müssen, welche Standardstile für Ihre anderen Geschwisterelemente verwendet werden, damit Sie die erste Regel überschreiben können. Da dies das Überschreiben von Regeln in CSS beinhaltet, können Sie mit einem einzelnen Selektor zur Verwendung mit der Selectors-API oder Selenium nicht dasselbe erreichen den CSS-Locators von .

Es ist erwähnenswert, dass Selectors 4 eine Erweiterung der :nth-child()Notation einführt (ursprünglich eine völlig neue Pseudoklasse namens :nth-match()), mit der Sie so etwas wie :nth-child(1 of .red)anstelle einer Hypothese verwenden können .red:first-of-class. Da es sich um einen relativ neuen Vorschlag handelt, gibt es noch nicht genügend interoperable Implementierungen, um ihn in Produktionsstätten verwenden zu können. Hoffentlich ändert sich das bald. In der Zwischenzeit sollte die von mir vorgeschlagene Problemumgehung in den meisten Fällen funktionieren.

Beachten Sie, dass diese Antwort davon ausgeht, dass die Frage nach jedem ersten untergeordneten Element sucht, das eine bestimmte Klasse hat. Es gibt weder eine Pseudoklasse noch eine generische CSS-Lösung für die n-te Übereinstimmung eines komplexen Selektors im gesamten Dokument - ob eine Lösung vorhanden ist, hängt stark von der Dokumentstruktur ab. jQuery bietet :eq(), :first, :lastund zu diesem Zweck, aber beachten Sie wieder , dass sie funktionieren ganz anders :nth-child()et al . Mit der Selectors-API können Sie entweder document.querySelector()die allererste Übereinstimmung erzielen:

var first = document.querySelector('.home > .red');

Oder verwenden Sie document.querySelectorAll()einen Indexer, um eine bestimmte Übereinstimmung auszuwählen:

var redElements = document.querySelectorAll('.home > .red');
var first = redElements[0];
var second = redElements[1];
// etc

Obwohl die .red:nth-of-type(1)Lösung in der ursprünglich akzeptierten Antwort von Philip Daubmeier funktioniert (die ursprünglich von Martyn geschrieben, aber seitdem gelöscht wurde), verhält sie sich nicht so, wie Sie es erwarten würden.

Wenn Sie beispielsweise nur das pin Ihrem ursprünglichen Markup auswählen möchten:

<p class="red"></p>
<div class="red"></div>

... dann zu verwenden , kann man nicht .red:first-of-type(entspricht .red:nth-of-type(1)), da jedes Element der ersten (und einzigen) einer ihrer Art (ist pund divjeweils), so dass beide werden durch den Selektor angepasst werden.

Wenn das erste Element einer bestimmten Klasse auch das erste seiner Art ist , funktioniert die Pseudoklasse, dies geschieht jedoch nur durch Zufall . Dieses Verhalten wird in Philipps Antwort demonstriert. Sobald Sie ein Element des gleichen Typs vor diesem Element einfügen, schlägt die Auswahl fehl. Nehmen Sie das aktualisierte Markup:

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

Das Anwenden einer Regel mit .red:first-of-typefunktioniert, aber sobald Sie eine andere pohne die Klasse hinzufügen :

<div class="home">
  <span>blah</span>
  <p>dummy</p>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

... der Selektor schlägt sofort fehl, da das erste .redElement jetzt das zweite p Element ist.

Der :first-childSelektor soll, wie der Name schon sagt, das erste untergeordnete Element eines übergeordneten Tags auswählen. Die Kinder müssen in dasselbe übergeordnete Tag eingebettet sein. Ihr genaues Beispiel wird funktionieren (habe es gerade hier ausprobiert ):

<body>
    <p class="red">first</p>
    <div class="red">second</div>
</body>

Vielleicht haben Sie Ihre Tags in verschiedenen übergeordneten Tags verschachtelt? Sind Ihre Klassen-Tags redwirklich die ersten Tags unter dem übergeordneten Element?

Beachten Sie auch, dass dies nicht nur für das erste derartige Tag im gesamten Dokument gilt, sondern jedes Mal, wenn ein neues übergeordnetes Element darum gewickelt wird, wie z.

<div>
    <p class="red">first</p>
    <div class="red">second</div>
</div>
<div>
    <p class="red">third</p>
    <div class="red">fourth</div>
</div>

firstund thirdwird dann rot sein.

Aktualisieren:

Ich weiß nicht, warum Martyn seine Antwort gelöscht hat, aber er hatte die Lösung, den :nth-of-typeSelektor:

.red:nth-of-type(1)
{
    border:5px solid red;
} 

<div class="home">
    <span>blah</span>
    <p class="red">first</p>
    <p class="red">second</p>
    <p class="red">third</p>
    <p class="red">fourth</p>
</div>

Dank an Martyn . Weitere Infos zum Beispiel hier . Beachten Sie, dass dies ein CSS 3-Selektor ist, daher werden ihn nicht alle Browser erkennen (z. B. IE8 oder älter).

Die richtige Antwort ist:

.red:first-child, :not(.red) + .red { border:5px solid red }

Teil I: Wenn das Element das erste übergeordnete Element ist und die Klasse "rot" hat, erhält es einen Rand.
Teil II: Wenn das Element ".red" nicht das erste Element seines Elternteils ist, sondern unmittelbar einem Element ohne Klasse ".red" folgt, verdient es auch die Ehre dieser Grenze.

Geige oder es ist nicht passiert.

Die Antwort von Philip Daubmeier ist zwar akzeptiert, aber nicht korrekt - siehe beigefügte Geige.
Die Antwort von BoltClock würde funktionieren, definiert aber unnötig Stile und überschreibt sie
(insbesondere ein Problem, bei dem es sonst einen anderen Rand erben würde - Sie möchten keinen anderen zum Rand deklarieren: keinen).

BEARBEITEN: Für den Fall, dass Sie mehrmals "Rot" nach Nicht-Rot haben, erhält jedes "erste" Rot den Rand. Um dies zu verhindern, müsste man die Antwort von BoltClock verwenden. Siehe Geige

Sie könnten first-of-typeoder verwendennth-of-type(1)

.red {
  color: green;  
}

/* .red:nth-of-type(1) */
.red:first-of-type {
  color: red;  
}

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

Die obigen Antworten sind zu komplex.

.class:first-of-type { }

Dadurch wird der erste Klassentyp ausgewählt. MDN-Quelle

Um mit Ihrem Selektor übereinzustimmen, muss das Element den Klassennamen haben redund das erste untergeordnete Element seines übergeordneten Elements sein.

<div>
    <span class="red"> <!-- MATCH -->
</div>

<div>
    <span>Blah</span>
    <p class="red"> <!-- NO MATCH -->
</div>

<div>
    <span>Blah</span>
    <div><p class="red"></div> <!-- MATCH -->
</div>

Da die anderen Antworten abdecken, was daran falsch ist, werde ich die andere Hälfte versuchen, wie man es behebt. Leider weiß ich nicht, dass Sie hier nur eine CSS- Lösung haben, zumindest nicht, an die ich denken kann . Es gibt aber noch einige andere Möglichkeiten ....

1. Weisen firstSie dem Element beim Generieren eine Klasse zu:

   <p class="red first"></p>
   <div class="red"></div>

   CSS:

   .first.red {
     border:5px solid red;
   }

   Dieses CSS vergleicht nur Elemente mit beiden first und redKlassen.

2. Alternativ können Sie dasselbe in JavaScript tun. Beispiel: Mit welcher jQuery würden Sie dies tun, indem Sie dasselbe CSS wie oben verwenden:

   $(".red:first").addClass("first");

Ich habe diesen in meinem Projekt.

div > .b ~ .b:not(:first-child) {
	background: none;
}
div > .b {
    background: red;
}

<div>
      <p class="a">The first paragraph.</p>
      <p class="a">The second paragraph.</p>
      <p class="b">The third paragraph.</p>
      <p class="b">The fourth paragraph.</p>
  </div>

Entsprechend Ihrem aktualisierten Problem

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

wie wäre es mit

.home span + .red{
      border:1px solid red;
    }

Diese wählt Klasse nach Hause , dann das Element Spannweite und schließlich alle .red Elemente , die unmittelbar nach Spannweite Elemente platziert werden.

Referenz: http://www.w3schools.com/cssref/css_selectors.asp

Sie könnten nth-of-type (1) verwenden, aber stellen Sie sicher, dass die Site IE7 usw. nicht unterstützen muss. Wenn dies der Fall ist, verwenden Sie jQuery, um eine Körperklasse hinzuzufügen, und suchen Sie das Element über die IE7-Körperklasse, dann den Elementnamen und fügen Sie es hinzu im n-ten Kind Styling dazu.

Sie können Ihren Code in so etwas ändern, damit er funktioniert

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

Dies erledigt den Job für Sie

.home span + .red{
      border:3px solid green;
    }

Hier ist eine CSS-Referenz von SnoopCode dazu .

Ich benutze unten CSS, um ein Hintergrundbild für die Liste ul li zu haben

#footer .module:nth-of-type(1)>.menu>li:nth-of-type(1){
  background-position: center;
  background-image: url(http://monagentvoyagessuperprix.j3.voyagesendirect.com/images/stories/images_monagentvoyagessuperprix/layout/icon-home.png);
  background-repeat: no-repeat;
}

<footer id="footer">
  <div class="module">
    <ul class="menu ">
      <li class="level1 item308 active current"></li>
      <li> </li>
    </ul> 
  </div>
  <div class="module">
    <ul class="menu "><li></li>
      <li></li> 
    </ul>
  </div>
  <div class="module">
    <ul class="menu ">
      <li></li>
      <li></li>
    </ul>
  </div>
</footer>

Versuche dies :

    .class_name > *:first-child {
        border: 1px solid red;
    }

Aus irgendeinem Grund schien keine der obigen Antworten den Fall des wirklichen ersten und einzigen ersten Kindes des Elternteils anzusprechen .

#element_id > .class_name:first-child

Alle oben genannten Antworten schlagen fehl, wenn Sie den Stil nur auf das Kind der ersten Klasse in diesem Code anwenden möchten.

<aside id="element_id">
  Content
  <div class="class_name">First content that need to be styled</div>
  <div class="class_name">
    Second content that don't need to be styled
    <div>
      <div>
        <div class="class_name">deep content - no style</div>
        <div class="class_name">deep content - no style</div>
        <div>
          <div class="class_name">deep content - no style</div>
        </div>
      </div>
    </div>
  </div>
</aside>

Versuchen Sie dies einfach und effektiv

 .home > span + .red{
      border:1px solid red;
    }

Ich glaube, dass mit relativen Selektor + zur Auswahl von Elementen, die unmittelbar danach platziert werden, hier am besten funktioniert (wie nur wenige zuvor vorgeschlagen haben).

In diesem Fall kann dieser Selektor auch verwendet werden

.home p:first-of-type

Dies ist jedoch die Elementauswahl, nicht die Klasse eins.

Hier haben Sie eine schöne Liste von CSS-Selektoren: https://kolosek.com/css-selectors/

Versuchen Sie diese Lösung:

 .home p:first-of-type {
  border:5px solid red;
  width:100%;
  display:block;
}

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

CodePen-Link