Dimitri Danilov Dimitri Danilov - 1 month ago 5
CSS Question

Why child div modification change all others childs?

I have this html structure :

<div id="guide_rubric" class="col-md-2 anti-padding">
<div id="rubric_1" class="col-md-12 anti-padding rubric-text rubric-focus-other"><span onclick="rubric_click(5)" class="span-rubric">Climat et météo</span></div>
<div id="rubric_2" class="col-md-12 anti-padding rubric-text rubric-focus-other"><span onclick="rubric_click(5)" class="span-rubric">Climat et météo</span></div>
<div id="rubric_3" class="col-md-12 anti-padding rubric-text rubric-focus-other"><span onclick="rubric_click(5)" class="span-rubric">Climat et météo</span></div>
<div class="planificationDescription">
<p>some text</p>
</div>
<button id="guideTripButton" onclick="location.href='/apps/'" class="btn">C'est parti !</button>
</div>


But when I add some style to the class planificationDescription, it changes the style of all guide_rubric.

For exemple if i add a background color, all other divs change.

I add the divs like this :

<div id="rubric_1" class="col-md-12 anti-padding rubric-text rubric-focus-other"><span onclick="rubric_click(5)" class="span-rubric">Climat et météo</span></div>


dynamically.

Website : https://dimitri-dev.facilitatrip.fr/visiter/guide-touristique/Asie/Vietnam/3

It's the menu on the left.

Answer

you need to clear floting of other elements. Pls add clear:both; to planificationDescriptionclass.

.planificationDescription{
     clear:both;
     background-color:red;
}
Comments