::-webkit-progress-bar CSS sélecteur

Définition de la CSS ::-webkit-progress-bar.

La pseudo-classe CSS ::-webkit-progress-bar permet de cibler le fond de la barre de progression, partie qui se trouve sous la portion qui se remplie () d'un élément HTML PROGRESS.

Exemple de syntaxe CSS ::-webkit-progress-bar :
::-webkit-progress-bar {
  /* Propriétés */
}
identifiant::-webkit-progress-bar {
  /* Propriétés */
}

Conditions d'application de la CSS ::-webkit-progress-bar.

La pseudo-classes feuille de style ::-webkit-progress-bar CSS s'applique sur la balise PROGRESS seulement si elle à une propriété CSS à none.

Problème d'interprétation de ::-webkit-progress-bar en Css.

La pseudo-classes CSS ::-webkit-progress-bar n'est pas reconnue par tous les navigateurs. A ce jour 03/2019, sule Safarie, Opera et chrome reconnaissent la propriété CSS ::-webkit-progress-bar.

Règles de syntaxes CSS pour ::-webkit-progress-bar.

Comprendre l'écriture de ::-webkit-progress-bar

Le pseudo-élément CSS ::-webkit-progress-bar s'applique à l'élément HTML ou XHTML progress. Vous pouvez donc si nécessaire mettre un sélecteur devant pour conditionner la sélection, sinon les propriétés seront appliquées à l'ensemble des éléments HTML ou XHTML qui répondent à ::-webkit-progress-bar.

Pour schématiser, il faut imaginer que par défaut le pseudo-élément CSS ::-webkit-progress-bar s'écrit *::-webkit-progress-bar. "*" représente la condition soit "n'importe quel élément acceptant webkit-progress-bar" (sélectionne tous les balises "progress" sans distinction).
Donc pour conditionner plus précisément la sélection, il faut juste remplacer "*" par un autre sélecteur qui vous permettra de distinguer l'élément que vous voulez sélectionner.
Ce sélecteur doit être unique (classe, id, balise,...) ou multiple à condition de ne pas contenir d'espace entre chaque sélecteur, sinon on passe dans le cas d'un chemin de sélection pour sélectionner le parent (vous comprendrez mieux avec les exemples qui suivent).

Exemple d'écriture CSS de ::-webkit-progress-bar avec règle
progress::-webkit-progress-bar{
  /* Propriétés CSS assignées à l'ensemble des balises PROGRESS */
}
.regle::-webkit-progress-bar{
  /* Propriétés CSS assignées à l'ensemble des balises concernées comme classe "regle" */
}
:disabled::-webkit-progress-bar{
  /* Propriétés CSS assignées à l'ensemble des balises concernées et qui correspondent à la règle  :disabled */
}

Maintenant, vous pouvez être plus précis pour cibler l'élément parent dans lequel vous voulez sélectionner les "progress", en mettant un chemin de sélection devant :

Exemple d'écriture CSS de ::-webkit-progress-bar avec ciblage de parent
.identifant progress::-webkit-progress-bar{
  /* Propriétés CSS assignées à l'ensemble des balises PROGRESS et dont le parent direct ou indirect à la classe "identifant" */
}
.identifant .regle::-webkit-progress-bar{
  /* Propriétés CSS assignées à l'ensemble des balises concernées par ::-webkit-progress-bar ayant comme classe "regle" et dont le parent direct ou indirect à la classe "identifant" */
}
.identifant disabled::-webkit-progress-bar{
  /* Propriétés CSS assignées à l'ensemble  des balises concernées par ::-webkit-progress-bar et qui correspondent à la règle  :disabled et dont le parent direct ou indirect à la classe "identifant" */
}

Compatibilités navigateurs du sélecteur ::-webkit-progress-bar

Sélecteurs CSS préfixées de ::-webkit-progress-bar

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes au sélecteur ::-webkit-progress-bar CSS :

Code CSS pour faire fonctionner la propriété CSS ::-webkit-progress-bar sous un maximum de navigateurs.


Votre avis sur la définition ::-webkit-progress-bar en CSS

Votez pour la définition CSS ::-webkit-progress-bar

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5

Avis sur la page https://www.zonecss.fr/proprietes-css/webkit-progress-bar-css-selector.html Votes: 3.8 / 5 - 4 votes
Cliquez sur une étoile pour voter.