Fiche HTML5 & CSS3

HTML

CSS

Sélecteurs CSS2

#a Id a
.a Classe a
a b Pointe tous les enfants b de a
a>b Pointe l’enfant b de a
a+b Le premier b qui suit a
a:first-child Le premier élément de a
a[attr] Tous les a qui ont l’attribut attr
a[attr= »val »] Tous les a qui ont l’attribut attr = val
a[attr|= »val »] Tous les a qui ont la liste d’attributs attr = val

Sélecteurs CSS3

a[attr^= »val »] attribut qui commence par val
a[attr$= »val »] attribut qui se termine par val
a[attr~= »val »] attribut qui contient val
li:nth-child(2) a {} Cible le 2e enfant de li de la balise a
li:first-of-type {} Cible la 1ère balise de type li
li:last-of-type a {} Cible le dernier a dans li
p:target {} Cible tous les p qui sont cible d’un lien
p::first-letter {} Cible le 1er caractère des paragraphes
p::first-line {} Cible la 1ère ligne des paragraphes (un seul : pour anciens navigateurs)

Sélecteurs particuliers

p:after { content: « Fin de… »; } Ajoute le texte de l’option content à chaque fin de p
p:before { content: « Début de… »; } Ajoute le texte de l’option content à chaque début de p

Utiliser un compteur en CSS

//reset le compteur titrecp quand on accède à la classe conteneur
#conteneur {
  counter-reset: titrecp;
}
//reset le compteur cp quand on accède à la balise h1
h1 {
  counter-reset: cp;
}
// sélectionne tous les paragraphes qui ne sont pas de classe conseil
//et rajoute avant “paragraphe X.Y” correspondant aux compteurs.
//Incrémente ensuite le compteur cp.
#conteneur p:not(.conseil):before {
  content: "paragraphe " counter(titrecp) "." counter(cp);
  counter-increment: cp; }
//à chaque début de h1, affiche titrecp et augmente titrecp
#conteneur h1:before {
  content: counter(titrecp);
  counter-increment: titrecp;
}

 

// sélectionne tous les paragraphes qui ne sont pas de classe conseil
//et rajoute avant “paragraphe X.Y” correspondant aux compteurs.
//Incrémente ensuite le compteur cp.
#conteneur p:not(.conseil):before {
     content: "paragraphe " counter(titrecp) "." counter(cp);
     counter-increment: cp;
}
//à chaque début de h1, affiche titrecp et augmente titrecp
#conteneur h1:before {
     content: counter(titrecp);
     counter-increment: titrecp;
}

Laisser un commentaire

 

*