CSS 3.0 : parce que c’est mieux !
Voici plusieurs modifications de [uri=http://www.w3.org/TR/css3-selectors/#changesFromCSS2]CSS3[/url]
Attention :
si CSS2 ne fonctionnait pas totalement sous IE6, CSS3 ne risque même pas de fonctionner !
Par contre Mozilla ;)))
Possibilité de spécifier un nom d’espace par exemple pour les feuilles de style XSLT il s’agit de xsl.
On peut donc n’appliquer nos propriétés CSS qu’aux éléments XSLT :
[fixed]
<xsl:for-each select="/">
…
</xsl:for-each>
[/fixed]
Ce qui s’écrirai :
[fixed]
@namespace xsl url(http://www.w3.org/TR/1999/Transform);
xsl|for-each {
…
}
[/fixed]
Autre syntaxe :
xsl|* : tout élément avec non d’espace xsl (xsl:element)
|element : tout élément sans nom d’espace
|element : tout élément avec nom d’espace
| : n’importe quel élément avec nom d’espace
| : n’importe quel élément sans nom d’espace
- : identique à | si aucun nom d’espace n’a été déclaré, sinon identiqiue à nomespace|*.
Ici : xsl doit être déclaré d’abord avec la syntaxe @namespace…
Un exemple bon à voir, ce sont les fichiers *.css dans /Mozilla/res.
Sélecteur d’attributs (supplémentaires)
attribut^=“valeur” : attribut commence par ‘valeur’.
attribut$=“valeur” : attribut finit par ‘valeur’.
attribut*=“valeur” : attribut contient ‘valeur’.
La syntaxe des noms d’espaces est la même :
xsl|attribut : tout attribut ayant pour nom d’espace xsl.
|attribut, xsl|, |attribut, attribut : etc
attribut et |attribut sont équivalents (pas de nom d’espaces présents donc)
Pseudo-Classes supplémentaires :
:target
Pas trop compris le truc, mais me semble que c’est pour indiquer qu’un lien pointe vers quelque chose d’interne dans le document ? (uri#truc)
ex:
[uri]
p:target {
font-weight: bold;
}
[/uri]
lien[/url]
paragraphe mais pas en gras
Si on clique sur le lien, hé bien le contenu de
est en gras.
nb: après test, j’affirme que c’est ça et que c’est bien sympa :>
:disabled
:enabled
:checked
Ces trois pseudo classes permettent de customiser l’apparence d’un élément quand il est désactivé (genre ex: ), activé ou coché.
:checked s’applique aussi aux éléments sélectionnés tels que les listes déroulantes.
:indeterminate
Etat indéterminé, ex: une liste de radio box et aucune d’elle n’est cochée.
Plus généralement : c’est un élément qui n’est ni coché ni décoché (si si!).
:root
Ceci s’applique à la racine d’un document XML : html en XHTML, etc.
:nth-child(an+b)
Ce truc bizarre permet de sélectionner le an+b-ième élément enfant d’un élément. (a, b appartenant aux entiers relatifs)
ex :
[fixed]
1
2
3
4
5
[/fixed]
Par exemple :
[fixed]
truc:nth-child(2n) {
display: none;
}
truc:nth-child(2n+1) {
display: inline;
}
[/fixed]
Ceci aura pour effet de n’afficher que les 2n+1 ième éléments de truc, en gros ? Ca affichera “135”. Marrant non?
A noter que : 2n est équivalent à even et 2n+1 à even.
Si a = 0, le n n’est pas obligatoire. Dans ce cas :
[fixed]
truc:nth-child(3) {
display: inline;
}
[/fixed]
N’affichera que “3”.
id. si a = 1 : on peut mettre n au lieu de 1n
id. si b = 0 : on peut mettre an au lieu de an+0
A noter que :
element:nth-child(n) et element sont équivalents, mais element:nth-child(n) est plus spécifique.
Quand a et/ou b sont négatifs, bah…
:nth-last-child()
Pareil que nth-child si j’ai bien compris, sauf qu’on compte à partir du dernier élément.
Ex de la doc:
[fixed]
tr:nth-last-child(-n+2) /* represents the two last rows of a HTML table */
[/fixed]
:nth-of-type(an+b)
pour an+b voir plus haut
Sinon :
ceci a pour effet de choisir les an+b élément de même type.
Par exemple (de la doc!)
[fixed]
img:nth-of-type(2n+1) { float: right; }
img:nth-of-type(2n) { float: left; }
[/fixed]
Alterne dans les positions d’image.
:nth-last-of-type(an+b)
théoriquement : commence par le dernier element de même type dans le document.
:first-child
Equivalent à : :nth-child(1);
:last-child
Equivalent à : :nth-last-child(1);
:first-of-type <=> :nth-of-type(1)
Premier élément de type
Ex de la doc :
dl dt:first-of-type
[fixed]
- gigogne
- fusée
- multistage rocket
- table
- nest of tables
[/fixed]
Cela s’appliquera aux deux premiers
:last-of-type <=> nth-last-of-type(1)
Voir nth-last-of-type
element:only-child
Identique à :first-child:last-child.
Cela veut dire "enfant unique de "
element:only-of-type
identique à :first-of-type:last-of-type
Cela veut dire “seul élément”
:empty
S’applique aux eléments vides, ie: ![]()
en XHTML (par exemple)
:contains( “foo” )
Ca c’est du fort !
Par exemple, dans vos moteurs de recherche, vous auriez plus qu’à appliquer une feuille de style du genre :
*:contains(“mot-clef”) {
background-color: black;
color: white;
}
Tout ce qui contient “mot-clef” (en jartant tout tag XML !! ie : “mot-clef” est bon !) sera mise en blanc sur noir (et pas seulement “mot-clef”)
:not(sélecteur)
Négation d’un sélecteur
Ex:
:not(:link)
Prend tous sauf les liens non visités.
id: pour les boutons non désactivés :
button:not([DISABLED])
Pseudo-Eléments supplémentaires :
Déjà, on écrit plus les pseudo éléments de CSS2 et 1 pareillement : on doit metre ::
Attention : sous Mozilla 1.4 la syntaxe :: n’est pas supporté… et aussi, tous les pseudo éléments ne sont pas supportés.
ex: element::after
Rassurez-vous, les navigateurs DOIVENT toujours repérer les pseudo-éléments de CSS 2 et 1 avec un “:”.
::selection
Pseudo élément très très intéressant puisqu’il représente la sélection (de texte) en cours !
Normalement, seules les propriétés suivantes peuvent être utilisées : color, cursor, background, outline
(donc pas de bordure merdique je pense)
Sélecteur adjacents :
Ajout d’un nouveau sélecteur tilde (~) (Alt Gr + 2)
Celui-ci permet de sélectionner tout élément suivant un autre élément :
truc ~ *
Ceci affectera tout élément qui suivent .
De tout cela je noterai :
- Mozilla supporte partiellement CSS3.0
Supportés :
:target
:last-child
:root
:empty
:checked
:not
sélecteur d’attributs avancé (^=, $=, *=)
Le reste n’a pas l’air de fonctionné… dommage:/
hover {
bien que ce soit un peu dans le désordre.
