Kann ich mehrere: vor Pseudoelementen für dasselbe Element haben?

115

Ist es möglich, mehrere :beforePseudos für dasselbe Element zu haben?

.circle:before {
    content: "\25CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

Ich versuche, die obigen Stile mit jQuery auf dasselbe Element anzuwenden, aber es wird nur der neueste angewendet, niemals beide.

ChrisOdney
quelle

Antworten:

94

In CSS2.1 kann ein Element zu jeder Zeit höchstens eines Pseudoelements enthalten. (Dies bedeutet, dass ein Element sowohl ein :beforeals auch ein :afterPseudoelement haben kann - es kann einfach nicht mehr als eines von jeder Art haben.)

Wenn Sie mehrere :beforeRegeln haben, die mit demselben Element übereinstimmen, werden alle :beforewie bei einem normalen Element kaskadiert und auf ein einzelnes Pseudoelement angewendet. In Ihrem Beispiel sieht das Endergebnis folgendermaßen aus:

.circle.now:before {
    content: "Now";
    font-size: 19px;
    color: black;
}

Wie Sie sehen, wird nur die contentDeklaration mit der höchsten Priorität (wie bereits erwähnt, die letzte) wirksam. Der Rest der Deklarationen wird verworfen, wie dies bei jeder anderen CSS-Eigenschaft der Fall ist.

Dieses Verhalten wird im Abschnitt Selektoren von CSS2.1 beschrieben :

Pseudoelemente verhalten sich wie echte Elemente in CSS, mit den unten und anderswo beschriebenen Ausnahmen .

Dies impliziert, dass Selektoren mit Pseudoelementen genauso funktionieren wie Selektoren für normale Elemente. Dies bedeutet auch, dass die Kaskade auf die gleiche Weise funktionieren sollte. Seltsamerweise scheint CSS2.1 die einzige Referenz zu sein. Weder CSS3-Selektoren noch CSS3-Kaskade erwähnen dies überhaupt, und es bleibt abzuwarten, ob dies in einer zukünftigen Spezifikation geklärt wird.

Wenn ein Element mehr als einem Selektor mit demselben Pseudoelement entsprechen kann und Sie möchten, dass alle Elemente irgendwie angewendet werden, müssen Sie zusätzliche CSS-Regeln mit kombinierten Selektoren erstellen, damit Sie genau angeben können, was der Browser in diesen Selektoren tun soll Fälle. Ich kann hier kein vollständiges Beispiel einschließlich der contentEigenschaft angeben, da beispielsweise nicht klar ist, ob das Symbol oder der Text an erster Stelle stehen soll. Der Selektor, den Sie für diese kombinierte Regel benötigen, ist entweder .circle.now:beforeoder .now.circle:before- je nachdem, welchen Selektor Sie auswählen, ist dies eine persönliche Präferenz, da beide Selektoren gleichwertig sind. Es ist nur der Wert der contentEigenschaft, den Sie selbst definieren müssen.

Wenn Sie noch ein konkretes Beispiel benötigen, lesen Sie meine Antwort auf diese ähnliche Frage .

Das Erbe css3-Inhalt - Spezifikation enthält einen Abschnitt zum Einfügen von mehrere ::beforeund ::afterpseudo-Elementen einer Notation , die mit der CSS2.1 Kaskade kompatibel ist, aber beachten Sie, dass dieses bestimmte Dokument ist veraltet - es wird nicht seit 2003 aktualisiert, und niemand hat hat diese Funktion im letzten Jahrzehnt implementiert. Die gute Nachricht ist, dass das verlassene Dokument unter dem Deckmantel von CSS-Content-3 und CSS-Pseudo-4 aktiv umgeschrieben wird . Die schlechte Nachricht ist, dass das Merkmal mit mehreren Pseudoelementen in keiner der beiden Spezifikationen zu finden ist, was vermutlich wiederum auf das mangelnde Interesse des Implementierers zurückzuführen ist.

BoltClock
quelle
12
Im gegebenen Fall, wenn ein Element sowohl zur Klasse circleals auch zur Klasse gehört now, gelten beide Regeln für das Pseudoelement des :beforeElements. Normales CSS impliziert jedoch, dass nur eine der contentEinstellungen wirksam werden kann (durch normale Kaskadenregeln). Der Punkt ist, dass contentsich nicht ansammelt.
Jukka K. Korpela
Es stellt sich heraus , dass diese Frage , die ich einige Monate später beantwortet habe, ein Duplikat dieser Frage ist. Seitdem habe ich die meisten Informationen aus der anderen Antwort, die im Grunde alles, was @Jukka oben gesagt hat, erweitert, in diese zusammengeführt, da es viel mehr Verkehr gibt, als zuerst.
BoltClock
1
Nach 13 Jahren wurde der CSS-Content-3-Entwurf endlich aktualisiert . Der Abschnitt mit den Pseudoelementen wurde definitiv zugunsten von css-pseudo-4 entfernt, was weder Mehrfach- ::beforenoch ::afterPseudoelemente zulässt .
Oriol
@Oriol: Eigentlich 12 Jahre. Das FPWD von css-pseudo-4 wurde letztes Jahr eingeführt. Zu diesem Zeitpunkt war css-content-3 bereits aktualisiert worden, um auf die neue Spezifikation hinzuweisen.
BoltClock
@BoltClock Der Entwurf des css-content-3-Editors auf Drafts.csswg.org wurde vor einiger Zeit aktualisiert, aber der Arbeitsentwurf auf w3.org war bis vor kurzem noch der Entwurf von 2003. Ich hatte noch einige Hoffnungen ...
Oriol
31

Wenn Ihr Hauptelement einige untergeordnete Elemente oder Texte enthält, können Sie diese verwenden.

Positionieren Sie Ihr Hauptelement relativ (oder absolut / fest) und verwenden Sie beide: vor und: nach absolut positioniert (in meiner Situation musste es absolut sein, ich weiß nichts über Ihr Element).

Wenn Sie nun ein weiteres Pseudoelement möchten, hängen Sie ein Absolut: Vorher an eines der untergeordneten Elemente des Hauptelements an (wenn Sie nur Text haben, setzen Sie ihn in einen Bereich, jetzt haben Sie ein Element), das nicht relativ / absolut / fest ist .

Dieses Element verhält sich so, als wäre sein Besitzer Ihr Hauptelement.

HTML

<div class="circle">
    <span>Some text</span>
</div>

CSS

.circle {
    position: relative; /* or absolute/fixed */
}

.circle:before {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

.circle:after {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

.circle span {
    /* not relative/absolute/fixed */
}

.circle span:before {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}
HydraOrc
quelle
2
Obwohl die ausgewählte Antwort korrekt ist, war dies für meinen Fall eine praktikable Lösung. Ich konnte simulieren, dass mehrere Pseudo-Elemente vorhanden waren, ohne dass dem DOM weitere Knoten hinzugefügt werden mussten!
matt.kauffman23
@ matt.kauffman23 also, kannst du bitte sagen, wie du simuliert hast?
BbIKTOP
1
@BbIKTOP Entschuldigung, habe gerade Ihren Kommentar gesehen. In meinem Fall arbeitete ich an einem Modal, das immer Kinder hatte, also bekam ich so etwas wie:.modal:first-child:before { …
matt.kauffman23
@ matt.kauffman23 Um sich nach mehr als 6 Jahren an ein solches Detail zu erinnern, haben Sie ein tolles Gedächtnis!
ChrisOdney
1

Ich habe dies behoben mit:

.element:before {
    font-family: "Font Awesome 5 Free" , "CircularStd";
    content: "\f017" " Date";
}

Verwenden Sie die Schriftfamilie "font awesome 5 free" für das Symbol. Anschließend müssen Sie die Schriftart angeben, die wir erneut verwenden. Wenn wir dies nicht tun, verwendet der Navigator die Standardschriftart (mal neue römische Schrift oder ähnliches) Dies).

Keko Perera
quelle