Discussion :

[bond70]

Salut,

Je suis en train d'apprendre le XHTML ainsi que le CSS à l'IUT ou je suis et j'ai un exo où je ne comprend pas très bien la syntaxe du code CSS, en effet il ne respecte pas les standard que j'ai appris.

Voici le bout de code CSS :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
p#jaune { color : yellow; }
p.bleu { color : blue; }
div { color:olive; }
div b {color:red;fontstyle:
italic;}
div p {color:blue;fontstyle:
italic;}
div i { color:red; }
div > i { color:blue; }
div * i { color:purple; }
div + i { color:yellow; }
div + p { color : green;}
div + p > b { color : black; }
div + p * b { color : grey; }

J'ai repéré par des couleurs les syntaxes que je ne comprends pas :

1) En rouge pourquoi il y a "p.bleu" alors qu'on m'a appris à appeler les class comme çà : ".bleu" et les id comme çà #bleu
Que viens faire le "p" ici ?

2) En bleu, si j'ai bien compris c'est que le style s'applique à toutes les balises "i" qui sont présentes dans les balises "div" c'est çà ? C'est de l'héritage ?

3) Enfin en vert je ne vois pas à quoi sert ce caractère "*"
C'est pareil pour la suite je ne comprends pas à quoi servent les caractère "+" et ">"

MERCI POUR VOTRE AIDE !!!!

[Invité]

Bonjour,
Pour div + i : s'applique que lorsque un élément en italique (i) suit immédiatement un div.

Pour div > i : s'applique que lorsque un élément en italique (i) est directement dans un div. La règle ne s'applique pas si l'élément en italique est compris dans une ou plusieurs autres balises intermédiaires.
Exemple :

Code :

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

<div><i><b>Ok</b></i></div>

Code :

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

<div><b><i>Pas ok</i></b></div>

Pour p . bleu : toutes les class bleu contenues dans les balises p

Je réfléchis pour les autres.

[desert]

Salut,
pour poursuivre ce qu'a dit Adenora :
* est un sélecteur universel, il désigne n'importe quel élément.
En prenant le dernier exemple et raisonnant de manière inverse

Code :

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

div + p * b { color : grey; }

Cela veut dire : on sélectionne n'importe quelle balise b étant à l'intérieur d'une balise quelconque (*) se trouvant elle-même dans une balise p qui est le premier enfant (+) d'une balise div...
En se basant sur du xhtml :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div>
    <p>
        <span>
            <b>Texte en gris</b>
        </span>
    </p>
    <p>
        <span>
            <b>Texte non gris</b>  
        </span>
    </p>
</div>

[bond70]

En gros c'est de l'héritage poussé à son extrême !

Je comprends pourquoi je galérais !

MERCI BEAUCOUP POUR VOTRE AIDE !

[Invité]

Pas besoin de chercher
J'avais pas compris cette partie justement.
Merci pour l'explication desert.

[bond70]

Mon prof avait mis ce cours en ligne, j'ai dû omettre de le regarder :

Remplacer élément1 et élément2 par le nom d'une balise
Les définitions de formats s'appliquent alors pour élément2 dans élément1.
Ou bien noter pour élément1 ou élément2 des caractères de remplacement * ("tous les
éléments").
● Un espace entre élément1 et élément2 signifie: peu importe où est placé élément2
dans la structure d'éléments de élément1.
● > signifie: seulement quand élément2 est situé un niveau sous élément1 dans la
structure d'éléments.
● * signifie: quand élément2 est situé au moins deux niveaux sous élément1 dans la
structure d'éléments.
● + signifie: quand élément2 est situé au même niveau que élément1 et suit
immédiatement élément1 dans la structure d'éléments.

[desert]

Petite erreur de ma part, pour désigner le premier enfant, c'est first-child.
Le +, c'est comme expliqué ci-dessus, il désigne bien le premier élément qui suit (et non le premier enfant).
En gros, mon schéma au dessus est faussé...