IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Me confirmer l'équivalence de 2 notations


Sujet :

CSS

  1. #1
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 339
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 339
    Points : 5 723
    Points
    5 723
    Billets dans le blog
    1
    Par défaut Me confirmer l'équivalence de 2 notations
    Bonjour,

    en lisant la documentation que j'ai sur le CSS, j'ai déduit que les 2 notations suivantes : td.menu et .menu td sont équivalentes et désignent les td de la classe menu.
    Est-ce exact ou est-ce que je me trompe ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  2. #2
    Membre confirmé
    Avatar de Jacques Beauregard
    Homme Profil pro
    Développeur Java
    Inscrit en
    Mai 2015
    Messages
    231
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : Conseil

    Informations forums :
    Inscription : Mai 2015
    Messages : 231
    Points : 595
    Points
    595
    Par défaut
    Bonjour,

    Cela m'a pris 40 sec de créer un tableau test avec tes deux CSS sur JSFiddle:

    lien JSfiddle : https://jsfiddle.net/g7pndsuh/
    Tu verras une différence par toi-même.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    .menu td{
    color:red;
    }
    colorie bien tous les td de la classe "menu" en rouge.
    Pour plus de précisions :

    Exemple 1 :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    .menu td {
      propriétés
    }
    <td> sera enfant de la classe .menu. Cela va affecter tous les éléments <td> contenus dans la classe .menu et uniquement ceux-là.

    Cela évite d'écrire <td class="menu"> pour chaque élément de la liste.

    Exemple 2

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    td.menu {
      propriétés
    }
    Ici, cela ne va concerner que les <td> de classe "menu" il s'agit purement et simplement de l'équivalent du "ET" : les deux conditions doivent être réunies pour fonctionner. Il n'y a plus de notion d'héritage.
    Il ne faut jamais prendre les gens pour des cons, mais il ne faut pas oublier qu'ils le sont...

    Le guide du débutant pour apprendre à programmer en Java - N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  3. #3
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 339
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 339
    Points : 5 723
    Points
    5 723
    Billets dans le blog
    1
    Par défaut
    Merci d'avoir pris ces 40 secondes ; même si ce réflexe est logique, je ne l'ai pas eu... Je ne retrouve pas le lien où j'avais fait cette déduction, mais c'était exactement ce que tu précises et même en le relisant, je fais la même déduction et ne comprends pas pourquoi avec td.menu, le "oh un td !!" n'est pas rouge...Peux-tu m'expliquer ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  4. #4
    Membre confirmé
    Avatar de Jacques Beauregard
    Homme Profil pro
    Développeur Java
    Inscrit en
    Mai 2015
    Messages
    231
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : Conseil

    Informations forums :
    Inscription : Mai 2015
    Messages : 231
    Points : 595
    Points
    595
    Par défaut
    Supposons une arborescence HTML de la sorte :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <table>
        <tr class="menu">
            <td>oh un td !!</td>
            <td class="menu">oh un td avec une classe menu</td>
        </tr>
    </table>
    le code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    .menu td{
    color:red;
    }
    coloriera les deux td, car ils ont pour parent <tr> qui a la classe .menu.

    le code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    td.menu{
    color:red;
    }
    coloriera seulement le 2e td. Car cette notation désigne un élément td ayant la classe .menu (équivalent à une condition "ET" : un élément td ET de classe .menu)
    Il ne faut jamais prendre les gens pour des cons, mais il ne faut pas oublier qu'ils le sont...

    Le guide du débutant pour apprendre à programmer en Java - N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  5. #5
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 339
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 339
    Points : 5 723
    Points
    5 723
    Billets dans le blog
    1
    Par défaut
    Merci pour ta claire explication.
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 5
    Dernier message: 03/08/2010, 13h00
  2. Réponses: 2
    Dernier message: 15/03/2009, 22h08
  3. [postgreSQL] équivalent de la function 'instr'
    Par Dra_Gun dans le forum Requêtes
    Réponses: 2
    Dernier message: 17/01/2003, 17h09
  4. [Kylix] Demande de confirmation Kylix Delphi
    Par mailstef dans le forum EDI
    Réponses: 3
    Dernier message: 21/10/2002, 11h17
  5. Équivalent du #IFDEF
    Par agh dans le forum Langage
    Réponses: 4
    Dernier message: 14/10/2002, 19h44

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo