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