Element : méthode pseudo()

Syntaxe

pseudo(type)

Paramètres

type

Une chaîne de caractères représentant le type de pseudo-élément dont on souhaite obtenir une représentation. Les valeurs valides sont :

• ::after
• ::before
• ::marker

Valeur de retour

Un objet CSSPseudoElement, ou null si type n'est pas égal à un type de pseudo-élément valide.

Exemples

Utilisation simple

Dans cet exemple, nous démontrons l'utilisation de base de la méthode pseudo().

HTML

Nous incluons un élément HTML <p> contenant du texte, et un élément HTML <output> pour consigner la sortie de JavaScript.

<p>Le club le plus en vogue de New York est…</p>
<output></output>

CSS

Nous donnons au pseudo-élément ::after de l'élément <p> un content et appliquons quelques styles de base aux deux.

body {
  width: 80%;
  margin: 0 auto;
}

p {
  background-color: violet;
  padding: 20px;
}

p::after {
  content: "Crease";
  background-color: cadetblue;
  padding: 20px;
}

JavaScript

Dans notre script, nous récupérons des références à nos éléments <p> et <output>, et récupérons un CSSPseudoElement représentant le pseudo-élément ::after de l'élément <p> avec la méthode pseudo(). Nous consignons ensuite quelques détails du pseudo-élément dans notre élément <output>. Nous incluons également une gestion rudimentaire des erreurs avec une structure try...catch, pour afficher un message d'erreur dans les navigateurs ne supportant pas cette fonctionnalité.

const pElem = document.querySelector("p");
const output = document.querySelector("output");

try {
  const pseudoElem = pElem.pseudo("::after");
  output.textContent = `Pseudo-élément ${pseudoElem.type}. Parent : <${pseudoElem.parent.tagName.toLowerCase()}>`;
} catch (e) {
  output.textContent = `Votre navigateur ne prend pas en charge CSSPseudoElement et/ou la méthode pseudo() : ${e}`;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• La méthode CSSPseudoElement.pseudo()