2. Pseudo-classes et pseudo-éléments
A. Sélecteur descendant après :hover
Exemple
| a: survol de la durée { couleur : #0f0 ; } |
décrire
Un élément peut être positionné par un sélecteur suivant la pseudo-classe :hover, tout comme les sélecteurs descendants. L'exemple ci-dessus changera la couleur du texte dans l'élément span dans l'élément a lorsque la souris est survolée.
Statut d'assistance
| IE6 Non IE7 Oui IE8 Oui |
B. Pseudo-classe de chaîne
Exemple
| a:premier-enfant:hover { couleur : #0f0 ; } |
décrire
Les pseudo-classes peuvent être chaînées pour restreindre la sélection d'éléments. L'exemple ci-dessus localisera la première balise a sous chaque élément parent et lui appliquera la pseudo-classe de survol P.
Statut d'assistance
| IE6 Non IE7 Oui IE8 Oui |
C. : survoler les éléments non-ancres
Exemple
| div: survoler { couleur : #f00 ; } |
décrire
La pseudo-classe :hover peut être appliquée à l'état de survol de n'importe quel élément, pas seulement à des balises.
Statut d'assistance
| IE6 Non IE7 Oui IE8 Oui |
D. : pseudo-classe du premier enfant
Exemple
| div li:premier enfant { fond : bleu ; } |
décrire
Modifiez la pseudo-classe pour localiser le premier élément enfant de l'élément parent de chaque élément spécifié.
Statut d'assistance
| IE6 Non IE7 Oui IE8 Oui |
Insectes
Dans IE7, s'il y a un commentaire HTML avant le premier élément enfant à positionner, la pseudo-classe du premier enfant ne sera pas valide.
E. : pseudo-classe focus
Exemple
| a: se concentrer { bordure : 1px rouge uni ; } |
décrire
Cette pseudo-classe localise tous les éléments qui ont le focus clavier.
Statut d'assistance
| IE6 Non IE7Non IE8 Oui |
F. :avant et :après les pseudo-classes
Exemple
| #box :avant { contenu : « Ce texte est devant la boîte » ; } #box :après { contenu : "Ce texte est derrière la boîte" ; } |
décrire
Ces deux pseudo-éléments ajoutent du contenu généré respectivement avant et après l'élément spécifié et sont utilisés avec l'attribut content.
Statut d'assistance
| IE6 Non IE7Non IE8 Oui |
3. Prise en charge des attributs
A. La taille réelle générée par la position
Exemple
| #boîte { position : absolue ; haut : 0 ; à droite : 100 px ; gauche : 0 ; en bas : 200 px ; fond : bleu ; } |
décrire
La définition des valeurs haut, droite, bas et gauche pour un élément positionné de manière absolue donnera à l'élément sa taille réelle (largeur et hauteur), bien qu'aucune valeur de largeur et de hauteur ne soit définie.
Statut d'assistance
| IE6 Non IE7 Oui IE8 Oui |
B. Hauteur minimale et largeur minimale
Exemple
| #boîte { hauteur minimale : 500 px ; largeur minimale : 300 px ; } |
décrire
Ces deux propriétés spécifient respectivement la largeur et la hauteur minimales de l'élément, permettant à une boîte d'être plus grande que la valeur minimale spécifiée, mais pas plus petite. Ils peuvent être utilisés ensemble ou séparément.
Statut d'assistance
| IE6 Non IE7 Oui IE8 Oui |
C. Hauteur maximale et largeur maximale
Exemple
| #boîte { hauteur maximale : 500 px ; largeur maximale : 300 px ; } |
décrire
Ces deux propriétés spécifient respectivement la hauteur et la largeur maximales de l'élément. Une boîte peut être plus petite que la valeur maximale spécifiée, mais pas plus grande. Ils peuvent également être utilisés ensemble ou individuellement.
Statut d'assistance
| IE6 Non IE7 Oui IE8 Oui |