Fiche HTML5 & CSS3
3 octobre 2011 | 
Auteur Alex
Auteur Alex
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;
}