:focus CSS sélecteur

Définition de la CSS :focus.

La pseudo-classe d'action CSS :focus permet d'assigner des propriétés CSS à un élément HTML qui accepte le focus et à ses fils durant le moment où il est sélectionné via la touche de tabulation ou pour certains cas lorsque l'on clique dessus.
La pseudo-classe :focus CSS est utilisée entre autre pour les liens (balise ).

Exemple de syntaxe CSS :focus :
:focus{
  /* propriétés Css pour élément qui a le focus */ 
}
.identifiant:focus{
  /* propriétés Css pour élément qui a le focus */ 
}

La pseudo-classe CSS :focus est associée généralement aux pseudo-classes suivantes CSS quand on parle de lien () :

  • : quand le lien a été visité.
  • : quand le curseur survole le lien.
  • : quand le lien est cliqué.
  • : lien normal et non visité.
Pseudo-classes à utiliser pour charter un lien :
a:link{}
a:visited{}
a:hover{}
a:focus{}
a:active{}
/* L'ordre de déclaration des états doit être respecté, c'est celui du W3C */
/* Voir aussi le chapitre sur le déclenchement et l'héritage des états activés */

Conditions d'application de la CSS :focus.

La pseudo-classe feuille de style :focus CSS est applicable sur toutes les balises HTML ou XHTML acceptant l'attribut HTML ou XHTML TABINDEX.

Problème d'interprétation de :focus en Css.

La pseudo-classe feuille de style :focus CSS peut poser un problème d'interprétation.
La pseudo-classe CSS :focus n'est reconnue sous Internet Explorer qu'à partir de la version 8+.

Conditions d'animation de :focus en CSS3.

La pseudo-classe CSS :focus est un moyen pour déclencher une animation Css ou déclencher une transition Css.

Règles de syntaxes CSS pour :focus.

Info complémentaire sur :focus

Attention, la pseudo-classe CSS :focus a une écriture un peu spéciale,
:focus est toujours précédée de ":".

La pseudo-classe CSS :focus ne peut pas être déclarée dans une balise HTML ou XHTML avec l'attribut HTML ou XHTML STYLE, mais dans une balise HTML ou XHTML ou dans une feuille de style externe.

Exemple d'écriture CSS :focus dans une balise STYLE
<STYLE>
a:focus{}
</STYLE>

Attention à l'écriture de :focus

Si anciennement la pseudo-classe CSS :focus ne concernait que les liens, aujourd'hui ce n'est plus le cas. Il est donc nécessaire de mettre un sélecteur devant, sinon les propriétés seront appliquées à l'ensemble des éléments HTML ou XHTML.

Dans le cas ci-dessous, l'identifiant est collé à ":". Dans ce cas, nous demandons d'appliquer les propriétés sur les éléments HTML ou XHTML qui ont "identifiant".

Code CSS : 
.identifiant:focus{ /* Propriétés css */ }
#identifiant:focus{ /* Propriétés css */ }

Dans le cas ci-dessous, l'identifiant est espacé de ":". Dans ce cas, nous demandons d'appliquer les propriétés sur les éléments HTML ou XHTML dont le parent est "identifiant".

Exemple de code :
.identifiant :focus{ /* Propriétés css */ } #identifiant :focus{ /* Propriétés css */ }

Compatibilités navigateurs du sélecteur :focus

Détails des versions de la CSS :focus
Résumé du support navigateurs de la CSS :focus

Equivalence de la CSS :focus en HTML.

La pseudo-classe CSS :focus n'a pas d'équivalence en HTML.

Exemples et astuces CSS pour utiliser :focus

Supprimer ou ajouter le droit au focus

En règle générale les balises HTML a avec un attribut href, link avec un attribut href, button, input, select, textarea peuvent avoir le focus.
Pour supprimer le focus, vous pouvez mettre l'attribut tabindex à "-1".

Toutes les autres balises HTML à quelques exceptions près, n'ont pas le focus par défaut mais peuvent l'avoir. Pour cela, vous devez mettre un attribut tabindex à "0" ou une valeur > 0 s'il y a un ordre de tabulation très précis.

Votre avis sur la définition :focus en CSS

Votez pour la définition CSS :focus

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

Avis sur la page https://www.zonecss.fr/proprietes-css/focus-css-selector.html Votes: 4.2 / 5 - 32 votes
Cliquez sur une étoile pour voter.