28172 sujets

CSS et mise en forme, CSS3

[Résolu] Styliser ::before

Bonjour,
Ci-dessous mon code simplifié.
Quelque soit le choix retenu (blockgroup::before code,::before code,.blockgroup code,), le code ne s'affiche pas en rouge dans la div blockgroup alors qu'il apparaît bien en rouge dans la div col-body.
Cordialement

<div class="col-body"><p><code>Un peu de texte</code></p></div>	
<div class="blockgroup">....</div>



.blockgroup::before { 
    content: "Du texte";
}
blockgroup::before code,
::before code,
.blockgroup code,
.col-body code {
      color: red;
 }

Modifié par cpalo (03 Dec 2021 - 11:31)
Modérateur
Salut,


Il faut refaire un petit point sur les sélecteur je pense Smiley smile 

blockgroup::before code,

Les balise <code> a l'intérieur d'un before d'un élément avec la classe blockgroup : NOP (impossible)

::before cod

Les balise <code> a l'intérieur d'un before : NOP (impossible)

.blockgroup code

Les balise <code> a l'intérieur d'un élément avec la classe blockgroup : NOP (il est pas là)

.col-body code

Les balise <code> a l'intérieur d'un élément avec la classe col-body : YOU WIN


Le soucis ici c'est que comme ils sont tous empilé les premier font buguer l'interprétation et foire les suivant. 

.blockgroup::before { 
    content: "Du texte";
}
.col-body code {
      color: red;
 }

fonctionne bien. Voir juste "code" si jamais tu n'a pas d'autres balises code ailleurs...

bonne journée !
Modifié par _laurent (03 Dec 2021 - 11:47)
Meilleure solution
Merci car j'avais zappé qu'on ne pouvait pas mettre la balise <code> dans ::before.
j'ai trouvé l'astuce.
Je personnalise .blockgroup:: before avec les mêmes styles que .col-body code.

.blockgroup::before,
.col-body code {
...
}

Modifié par cpalo (03 Dec 2021 - 13:00)
Sujet clos
Aller à