Discussion :

[LeCab]

Bonjour,

Je voudrais modifier un fichier css dans un plugin pour SPIP.

Il est entièrement rédigé sous la forme suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

body > ul > li.classX

Le code n'utilise aucun id et j'ai du mal à m'y retrouver dans la cascade pour créer d'autres classes. Je n'ai pas trouvé d'explications sur cette notation que je trouve assez pénible à lire car il me semble qu'on n'a pas de vue d'ensemble.

Si vous avez un lien vers une doc, ou un site.

Merci

[Bisûnûrs]

Une doc, oui, il s'agit de la traduction des spécifications CSS du W3C :

On appelle ça le sélecteur d'enfants.

5.6 Les sélecteurs d'enfant

Un sélecteur d'enfant se vérifie quand un élément est l'enfant d'un autre élément. Celui-ci se compose de deux sélecteurs, ou plus, séparés par le caractère ">".

La règle suivante applique un style à tous les enfants P de l'élément BODY :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
BODY > P { line-height: 1.3 }

Dans cet exemple-ci, on a combiné un sélecteur descendant et un sélecteur d'enfant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

DIV OL>LI P

Cette règle concerne tout élément P qui est un descendant d'un élément LI, celui-ci devant être l'enfant d'un élément OL qui, à son tour, doit être un descendant de l'élément DIV. Noter l'absence de caractères blancs, facultatifs, autour de la combinateur ">".

Pour des renseignements sur la façon de sélectionner le premier enfant d'un élément, voir le chapitre sur la pseudo-classe :first-child plus loin.
5.7 Les sélecteurs d'enfants adjacents

Les sélecteurs d'enfants adjacents suivent une syntaxe de cette forme : E1 + E2, où E2 est le sujet du sélecteur. Celui-ci est vérifié quand E1 et E2 ont le même parent dans l'arbre du document et quand E1 y précède immédiatement E2.

Selon le contexte, les éléments adjacents génèrent un formatage des objets dont la mise en forme est gérée automatiquement (ex. les marges verticales des boîtes adjacentes qui fusionnent). Avec le combinateur "+", les auteurs peuvent ajouter des styles aux éléments adjacents.

En exemple, cette règle précise qu'un élément P qui suit un élément MATH ne devrait pas avoir d'alinéa :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

MATH + P { text-indent: 0 }

Le suivant produit une réduction de l'espace vertical entre un élément H1 et l'élément H2 qui le suit juste après :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

H1 + H2 { margin-top: -5mm }

Ici, la règle est similaire à la précédente, à la différence qu'elle comporte un sélecteur d'attribut en plus. Ainsi, une mise en forme particulière s'applique aux éléments H1 avec un attribut class="opener" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
H1.opener + H2 { margin-top: -5mm }

[LeCab]

Merci beaucoup.
C'est avec meilleur que soi qu'on apprend !