Css imbriqué

Bonjour
J'ai une question bête que je n'arrive pas à comprendre.

J'ai un style qui s'appelle ".titre" pour l'ensemble de mes titres (de type class)
J'ai par ailleurs un fichier Debug qui me sert à afficher mes variables.

Là aussi j'ai un titre sous forme de classe, mais je n'arrive pas à isoler le CSS ...
Voici ce que j'ai dans mon fichier debug
<div id="debug">
<div class="bloc">
<span class="titre">
.....
Coté Css :
#debug .titre afin de spécifier le style pour le titre du bloc debug

Mais j'ai le style global .titre qui s'applique ....

c'est tout bête, mais pas moyen !

en ecrivant

#debug .titre

c'est normal que ca soit le style de .titre qui s'applique puisque tu cibles le .titre dans #debug.

et bien c'est justement ce que je veux faire ! ... mais malgré c'est le style ".titre" qui s'applique et non pas celui de #debug .titre ... d'où mon message ici pour tenter de comprendre pourquoi.

J'ai bien tenté de mettre à jour Apache, Php and Co. puisque c'est une install' tte neuve au cas où. mais tjrs pareil.

La feuille CSS où se trouve .titre est insérée en second.
Celle de Debug de trouve ensuite.

<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/mes_styles.css">
<link rel="stylesheet" href="../css/style_debug.css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">

Salut,

Tu as un exemple en ligne ?
Dans ta console le style donné par "#debug .titre" apparaît en barré ou n’apparaît pas du tout ? La feuille css est bien chargée et présente ? Tout est bien écrit (sans faute de frappe) ?

Coté PHP (HTML) voici le code que j'ai dans mon fichier Debug.php

<div id="debug">
    <div class="bloc">  <span class="titre">Variables</span>  <hr />
    <pre>
        HOSTbyName : <?=gethostbyname($_SERVER['SERVER_NAME']);?>
       <br />SERVER_ADDR : <?=$_SERVER['SERVER_ADDR'];?>
       <br />SERVER_NAME : <?=$_SERVER['SERVER_NAME'];?>
       <br />path : <?=$path;?>
       <br />uri : <?=$uri;?>
       <br />pathimg : <?=$pathimg;?>
       <br />pathico : <?=$pathimg;?>
    </pre>
   </div>
   <div class="bloc">  <span class="titre">Var $_POST</span>  <hr />
  .....

Dans l'inspecteur de code de Chrome il m'affiche ceci :
https://goopics.net/i/gZ7Vy

Coté CSS (debug.css) :

#debug {
  background-color:#000;
  margin:0 auto;
  width:100%;
  padding-top:20px;
  padding:10px;
}

#debug .bloc {
  padding:10px;
  border: #AA0000 2px dotted;
  border-radius:7px;
  background-color:#262626;
}

#debug .titre {
  font-size:20px;
  padding:20px;
  text-transform : uppercase;
  font-weight:bold;
  color:#FFF;
}

Edit : Mauvais copié-collé.
Modifié par shewy (26 Mar 2018 - 10:56)

Et y'a rien qui te choque ?

.debug .titre 

Si si j'ai fait un mauvais copié collé. Je travaille sur le fichier ce n'était pas le bon.
je viens de corriger mon post.

Bah du coup c'est bon #debug .titre s'affiche bien en priorité d'apres ta capture de la fenetre de débug

mais il s'affiche aussi .titre de "mes-styles.css" : je pensais que dans le cas d'une définition de type "#debug .titre" seul ce CSS serait pris en compte et non pas l'addition des deux.

Je comprend pas trop.

Les propriétés définies par #debug .titre prennent l'avantage (c'est pourquoi il y en a des barrées et d'autres non) mais les autres propriétés non surchargées restent en place. C'est juste une surcharge, une réécriture partielle des propriété CSS, pas un remplacement de la classe. c'est tout ce qui fait la force du CSS et c'est la base

#debug .titre {
    color: red;
}
#debug .titre {
    color: blue;
}
#debug .titre {
    font-weight: bold;
}

au final tu auras du bold et du bleu. Seul le rouge est écrasé, le reste s'ajoute.

hum ... d'accord je ne m'en étais jamais rendu compte.
Probablement parceque j'utilise rarement les mêmes noms.

donc aucune solution (syntaxe) pour empêcher ce fonctionnement, sauf à soit tout surcharger, soit utiliser un autre nom ?

Changer de nom ne servira à rien, ça restera un cumul de toutes les sélecteurs appliqués, le nom changera juste l'ordre d'application (ou alors j'ai pas compris ce que tu voulais faire).

Il faut tout surcharger effectivement.

Ok merci beaucoup Laurent !

(si je change de nom : je le fais partout et du coup je créé une class unique de type ".debug_titre" ... d'où l'erreur tout à l'heure de copié-collé, puisque c'est l'astuce que j'ai mise en oeuvre le temps d'avoir ta confirmation.)

Bonjour,

Sinon vous pouvez tout réinitialiser pour les titres inclus dans #debug puis personnaliser à votre gré.

#debug.titre {
  all: initial;
  font-size: 20px;
  padding: 20px;
  text-transform : uppercase;
  font-weight: bold;
  color: #FFF;
}

Edit: bien sûr dans le cas où vos déclarations sur .titre précèdent celles sur #debug.titre
Modifié par Greg_Lumiere (26 Mar 2018 - 11:21)

Greg_Lumiere a écrit :

#debug.titre {
  all: initial;
}

Je ne connaissais pas "all" et je trouve ça pas mal (à première vue) mais je ne suis pas sur de suivre comment il fonctionne...

Est-ce que je devrais faire un post pour que l'on puisse en discuter sans polluer ce post-ci ? Ou c'est très simple à expliquer ?


Edit : pourquoi la couleur ne change pas ? Pourquoi le background ne change pas ? (Sauf si on supprime les commentaires). Je sais, j'ai joué avec des !importants, mais c'est pour voir comment il se comporte. Aussi, à en voir le background, le paragraphe à l'air de devenir un élément inline... ?
Modifié par Yordi (26 Mar 2018 - 14:17)

Salut


Personnellement, all unset/initial ne fonctionne pas pour moi. même pire : il supprime le CSS venant juste après.

En faite, je pense qu'il unset mais pas TOUT les éléments.... par que le width et ou la couleur sont bien unsétés mais pas le background color....
Modifié par JENCAL (26 Mar 2018 - 14:38)

JENCAL a écrit :
Salut


Personnellement, all unset/initial ne fonctionne pas pour moi. même pire : il supprime le CSS venant juste après.

En faite, je pense qu'il unset mais pas TOUT les éléments.... par que le width et ou la couleur sont bien unsétés mais pas le background color....

Retour d'expérience intéressant car je n'ai jamais nécessité de son usage.

En effet, et ce n'est que mon avis, un reset en milieu de code démontre qu'il y a un problème dans la façon dont le style a été pensé. Et je suis ne suis pas très partisan du reset, je l'utilise à minima de façon chirurgicale

Pour en revenir à la problématique de base, une solution paliative serait, si on ne souhaite pas se lancer dans trop de modification, de reprendre les déclaration sur .titre (les déclarations globales, pas celles de debug) et de les modifier comme suit

// Actuellement
.titre {
...
}
#debug.titre {
...
}


// Transformé en
.titre:not(#debug) {
...
}
#debug.titre {
...
}

Sinon on peut aussi modifier les classes dans le html ainsi #debug.titre peut devenir .debugTitre.

Ou encore changer la classe sans toucher à l'id et mettre #debug.unTitreSpecial

Bonjour,

ça fonctionne et ah nan c'est pas un coup de transparent par dessus le div de couleur salmon comme je le pensais (c'est bien p qui est ciblé par cette couleur de fond) mais les !important

div p {
  background-color: salmon !important;
}

p {
  all: initial !important;
}

La dernière propriété revient à p { background-color: transparent !important; }
Sa spécificité (poids du sélecteur) est inférieure à div p (1 élément contre 2) donc c'est la 1ère déclaration qui s'applique (la ligne commentée sur le Codepen est la bonne piste )

Note : un all: initial avec le modifieur !important est ma foi bien embêtant si on veut l'écraser. C'est parti pour une cascade d'!important et je déconseille fortement : les CSS sont pourries à partir de là
Plutôt :

#debug * { all: initial; }

(les id sont presque aussi embêtants mais bon là c'est #debug, pas #article) ou si on se limite systématiquement à des sélecteurs de 2-3 classes genre .composant .composant-detail { }, l'astuce d'ajouter artificiellement de la spécificité :

.debug.debug.debug * { all: initial; }

mais n'importe quel id a plus de poids (c'est pour ça que ce sont de mauvais sélecteurs dans les vrais projets )

@Felipe, effectivement c'est bien le poids des sélecteurs qui l'emporte pour le background, je suis d'accord avec toi. Par contre, en décommentant la ligne, je m'attendais à ce que le texte ne soit plus aquamarine...

Je suis vraiment d'accord que ce n'est pas super sexy d'avoir un !important à cet endroit là ou de faire un reset de ce genre en plein milieu du code mais ce sont plus des essais pour comprendre le fonctionnement

Et une idée pour le display de l'élément ?
Modifié par Yordi (26 Mar 2018 - 15:54)