Discussion :

[doudou34]

Bonjour,
je pense avoir un petit soucis d'héritage dans ma feuille de style... Peut etre n'ai-je pas bien compris toutes les subtilités de CSS.
Est ce que quelqu'un pourrait m'expliquer ?

Voici mon cas....
Dans mon CSS j'ai le code suivant (dans l'ordre) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
#bloc_central ul
{
	font-size: 13px;
	text-align: justify;
	line-height: 20px;
	margin: 5px 0px 5px 0px;
	padding: 0px 0px 0px 40px;
	list-style-type: disc;
}
 
.generic_form ul
{
	padding: 0px;
	margin: 0px 0px 20px 0px;
}

Le code de ma page ressemble à ceci

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<div id="bloc_central">
		<form id="my_form" class="generic_form" method="post" action="">
		<ul>
		<li>
			blabla
		</li>
		</ul>
		</form>
</div>

Les marges et le padding définis "#bloc_central ul" sont conservés à l'affichage alors que je pensais que ce qui est défini dans ".generic_form ul" le surchargerait....
Pourquoi ce n'est pas le cas ?
Merci par avance pour votre réponse.

[guidelaplace]

Ce n'est pas le cas car le form n'est pas prioritaire sur le div.

Pour contrer cela, soit tu met une class directement dans le ul, soit tu recréer un div dans le formulaire.

[doudou34]

J'ai réglé mon soucis en mettant :

Code :

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

1
2
3
4
5
#bloc_central .generic_form ul
{
	padding: 0px;
	margin: 0px 0px 20px 0px;
}

Par contre, pourrais-tu m'expliquer pourquoi le DIV est prioritaire ?
Aurais-tu un site à me donner où cette histoire de priorité est expliqué (car je n'ai pas trouvé) ?
Merci encore pour ta réponse.

[Bisûnûrs]

Rien à voir avec une histoire de balise. Il s'agit d'une histoire de sélecteur. Le sélecteur d'identifiant étant plus précis que le sélecteur de classe, le premier a la priorité sur le dernier.

Exemple :

Code html :

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

<p id="texte" class="verte">Du texte</p>

Code :

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

1
2
3
4
5
6
#texte {
   color:red;
}
.verte {
   color:green;
}

Le texte sera écrit en rouge et non en vert.

[doudou34]

Merci Bisûnûrs,
je crois avoir trouvé la solution.

Je raisonnais en fait avec une "vue DOM". Dans cette vue, ".generic_form ul
" apparait en effet comme plus précis par rapport à "#bloc_central ul" ce qui est différent vis à vis de la précision/priorité mise en œuvre dans CSS.

Merci encore.