probleme enfant parent

driven78
Les bases HTML/CSS

slt a tous et merci d'avance pour vos lanternes

En partant de ca:

<section id="1" class="whiteTheme">
    <a href="index">link</a>
    <div class="sectionTitle">
        <a href="index">link</a>
    </div>
</section>

impossible styliser l'enfant sans toucher au sytle général

.whiteTheme a{
    color: red;
}
//ne marche pas
.sectionTitle a{
    color:green;
}

je pige pas, l'enfant a la priorite sur le parent normalement
un truc m'échappe

7 réponses

ThibaultJ
Réponse acceptée

Slt, tu as plusieurs solutions :

  1. tu ajoute !important a la fin de la régle et avant le ;

  2. tu ajouter une class sur ton eélément ce qui te donne : 

    .whiteTheme a{
color: red;
}
.sectionTitle > a{
color: green !important;
}

    ou 

    <section id="1" class="whiteTheme">
<a href="index">link</a>
<div class="sectionTitle">
    <a class="stgl" href="index">link</a>
</div>
</section>

    avec en style 

    .whiteTheme a{
color: red;
}
.stgl{
color: green !important;
}

    voilà
    j'esperer que cela t'aura aider

Benjamin Derepas

Tu peux utiliser le select d'enfant direct :

.whiteTheme a{
    color: red;
}
.sectionTitle > a{
    color:green;
}
driven78
Auteur

merci mais ca ne marche pas, ".whiteTheme a" est toujours prioritaire à ".sectionTitle > a"

driven78
Auteur

Merci, tu m'as mis sur la voie, du coup j'ai fait un mix, car le !important marchait, mais du coup elle emboitait le pas sur la propriete hover qui du coup ne marchais plus.
J'ai mis une classe sur ma balise a, et cela a resolu mon problème

otakodes

en fait ton code fonctionne, tu as juste fait buggé le css avec "// ne marche pas" car ce n'est pas un commentaire CSS mais JS et PHP en CSS on fait "/* */"

tiens le js fiddle le prouve, sans ton commentaire, ça fonctionne bien http://jsfiddle.net/xbdh003w/

PS : surcharger le html de class n'est jamais bon sauf quand il y a une vraie raison.

driven78
Auteur

le quote etait ici juste pour l'exemple, mais pour une raison qui m'echappe, dans le code initial et dans l'inspecteur d'element, je vois bien que le parent a la priorité, malgré que sur js fiddle, ca marche.
je ne voulais pas a la base surcharger par une classe comme tu le dis, mais c'est la seule solution qui marche pour moi pour l'instant donc, a moins de me prendre la tête, vais laisser comme ca lol

otakodes

@driven78 je pense que si le parent prenait l'ascendant c'est qu'il y avait un pb de syntaxe à cet endroit là ou que tu ne l'a peut être pas vu mais que un autre parent prenait encore plus l'ascendant. Si j'avais ton code sur un fiddle je pourrais te dire le pourquoi du comment mais juste regarde bien ta syntaxe.

Dans la console, dans STYLES sur la droite, quand tu descend tu peux voir les règles décroître, donc en théorie dans cette liste tu devrais voir la règle de l'enfant, si elle n'y ai pas, c'est bien que la règle n'a pas été prise en compte et que donc y'a eu un pb de syntaxe qq part.

enfin je te dis ça pour le futur :) là si ça marche tant mieux.