Existe-t-il un moyen de cibler uniquement le texte direct dans un tag <h1>?

Voici un exemple de ce que je veux faire:

<h1>I want to select this text with a css selector <small>but not this text</small></h1>

Ça n'a pas l'air de fonctionner:

h1:not(small)

Est-ce même possible?

6
JiiB 27 nov. 2017 à 20:03

3 réponses

Meilleure réponse

h1:not(small)

Votre sélecteur h1:not(small) ne fonctionne pas car il indique ceci:

Ciblez tous les h1 éléments qui ne sont pas des éléments small.

C'est la même chose que d'utiliser le sélecteur h1 seul.


h1 :not(small)

Vous auriez été plus proche avec h1 :not(small), qui dit:

Ciblez tous les descendants d'un élément h1 sauf small.

Boom! Exactement ce que vous voulez.

Sauf que le texte contenu directement à l'intérieur d'un élément (c'est-à-dire du texte sans balises autour) devient un élément anonyme . Et les éléments anonymes ne peuvent pas être sélectionnés par CSS.

h1 :not(small) {
  color: orange;
}
<h1>This text is contained directly inside the container. It is not selectable by CSS. It is an anonymous element. <small>This text is inside a small element</small></h1>

<hr>

<h1><span>This text is contained in a span. It is selectable by CSS</span> <small>This text is inside a small element</small></h1>

Sélecteur de parent CSS

Pour que l'élément small soit exclu, il devrait s'identifier en tant qu'enfant de h1.

Mais il n'y a aucun sélecteur parent dans CSS.


Solution: deux sélecteurs

Vous avez besoin de deux sélecteurs pour que cela fonctionne:

  • Le premier définit le style sur le parent.
  • Le second l'emporte sur le premier sur l'enfant.
h1 {
  color: orange;
}

h1 > small {
  color: black;
}
<h1>I want to select this text with a css selector <small>but not this text</small></h1>

Plus d'information

3
Michael Benjamin 27 nov. 2017 à 18:02

C'est ce qui se rapproche le plus de la conservation du style sans css implémenté par le div parent. Cette fonctionnalité n'a pas été entièrement intégrée dans tous les navigateurs, mais elle devrait fonctionner pour certains. J'espère que ça aide.

Prise en charge du navigateur -

enter image description here

Que fait-on ici?

La petite balise conserve son CSS d'origine sans être affectée par les autres styles. Vous pouvez l'appliquer à n'importe quel élément enfant dont vous souhaitez conserver le style.

small {
  all: initial;
  * {
    all: unset;
  }
}
h1 {
    color: #ff0000;
}
<h1>I want to select this tex with a css selector <small>but not this text</small></h1>
1
27 nov. 2017 à 17:49

Appliquez des styles à h1 comme vous le souhaitez, puis annulez ces modifications dans small, par exemple, si vous souhaitez uniquement changer la couleur, vous utiliserez ce code;

h1 { color: red; }
h1 small { color: initial; }

Ou, si vous avez plusieurs changements de style;

h1 {
    color: red;
    font-weight: italic;
    text-transform: uppercase;
}

h1 small {
    color: initial;
    font-weight: initial;
    text-transform: initial;
}

Veuillez noter que la valeur CSS initial peut être utilisée sur tous les navigateurs, sauf pour IE et Opera Mini. Consultez cette page pour plus d'informations.

0
zvava 27 nov. 2017 à 17:36
47516230