web-dev-qa-db-fra.com

Puis-je avoir plusieurs pseudo-éléments: before pour le même élément?

Est-il possible d'avoir plusieurs :before pseudos pour le même élément?

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

J'essaie d'appliquer les styles ci-dessus au même élément à l'aide de jQuery, mais seul le plus récent est appliqué, jamais les deux.

csscss3css-selectorspseudo-elementcss-content
99
ChrisOdney

En CSS2.1, un élément ne peut contenir qu'un seul pseudo-élément, quel qu'il soit, à la fois. (Cela signifie qu'un élément peut avoir à la fois un :before Et un :after pseudo-élément - il ne peut tout simplement pas en avoir plus d’un de chaque type.)

Par conséquent, lorsque vous avez plusieurs :before règles correspondant au même élément, elles seront toutes mises en cascade et appliquées à un seul :before pseudo-élément, comme avec un élément normal. Dans votre exemple, le résultat final ressemble à ceci:

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

Comme vous pouvez le constater, seule la déclaration content ayant la priorité la plus élevée (comme mentionné, celle qui vient en dernier) prend effet. Le reste des déclarations est ignoré, comme dans le cas de toute autre propriété CSS.

Ce comportement est décrit dans le section Selectors de CSS2.1 :

Les pseudo-éléments se comportent comme des éléments réels dans CSS, à l'exception des exceptions décrites ci-dessous et ailleurs.

Cela implique que les sélecteurs avec des pseudo-éléments fonctionnent comme des sélecteurs pour des éléments normaux. Cela signifie également que la cascade devrait fonctionner de la même manière. Étrangement, CSS2.1 semble être la seule référence. ni sélecteurs css ni css3-cascade ne le mentionnent pas du tout, et il reste à voir si cela sera clarifié dans une spécification future.

Si un élément peut correspondre à plusieurs sélecteurs avec le même pseudo-élément et que vous souhaitez que tous les appliquent d'une manière ou d'une autre, vous devez créer des règles CSS supplémentaires avec des sélecteurs combinés afin de pouvoir spécifier exactement ce que le navigateur doit faire dans ces cas. cas. Je ne peux pas fournir un exemple complet incluant la propriété content ici, car il n'est pas clair par exemple si le symbole ou le texte doit venir en premier. Mais le sélecteur dont vous avez besoin pour cette règle combinée est soit .circle.now:before ou .now.circle:before - Quel que soit le sélecteur que vous choisissez, ce sont vos préférences personnelles car les deux sélecteurs sont équivalents, il ne s’agit que de la valeur de la propriété content que vous devrez définir vous-même.

Si vous avez encore besoin d'un exemple concret, consultez ma réponse à cette question similaire .

La spécification legacy css3-content contient une section sur l’insertion de plusieurs ::before et ::after pseudo-éléments en utilisant une notation compatible avec la cascade CSS2.1, mais notez que ce document est obsolète - il n’a pas été mis à jour depuis 2003, et personne n’a implémenté cette fonctionnalité au cours de la dernière décennie. La bonne nouvelle est que le document abandonné fait actuellement l'objet d'une réécriture sous la forme css-content- et css-pseudo-4 . La mauvaise nouvelle est que la fonctionnalité de pseudo-éléments multiples ne figure nulle part dans les spécifications, probablement en raison, encore une fois, du manque d'intérêt de la part des développeurs.

83
BoltClock

Si votre élément principal contient des éléments enfants ou du texte, vous pouvez vous en servir.

Positionnez votre élément principal relatif (ou absolu/fixe) et utilisez les deux: avant et: après positionné absolu (dans ma situation, ce devait être absolu, je ne sais pas pour le vôtre).

Maintenant, si vous voulez un autre pseudo-élément, attachez un absolu: before à l'un des enfants de l'élément principal (si vous n'avez que du texte, mettez-le dans une étendue, vous avez maintenant un élément), qui n'est pas relatif/absolu/fixe .

Cet élément va commencer à agir comme si son propriétaire était votre élément principal.

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 */
}
24
HydraOrc