CSS :target pseudo-class

Définition et utilisation

CSS :target Les pseudo-classes sont utilisées pour définir les styles de l'élément cible actif.

Conseil :Une URL avec # suivi du nom de l'ancrage, pointant vers un élément spécifique du document. L'élément pointé par le lien est l'élément cible.

Exemple

Exemple 1

Définir les styles de l'élément cible actif :

:target {
  border: 2px solid darkorange;
  background-color: beige;
}

Essayer par vous-même

Exemple 2

Créer un menu d'onglets :

.tab div {
  display: none;
}
.tab div:target {
  display: block;
}

Essayer par vous-même

Exemple 3

Créer une boîte de dialogue modale (fenêtre contextuelle) :

/* Fond de la boîte de dialogue modale */
.modal {
  display: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}
/* Afficher la boîte de dialogue modale lorsque c'est le cas */
.modal:target {
  display: table;
  position: absolute;
}
/* Boîte de dialogue modale */
.modal-dialog {
  display: table-cell;
  vertical-align: middle;
}
/* Contenu de la boîte de dialogue modale */
.modal-dialog .modal-content {
  margin: auto;
  background-color: #f3f3f3;
  position: relative;
  padding: 0;
  outline: 0;
  border: 1px #777 solid;
  text-align: justify;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

Essayer par vous-même

Syntaxe CSS

:target {
  déclarations css;
}

Détails techniques

Support du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge cette pseudo-classe en totalité.