28172 sujets

CSS et mise en forme, CSS3

Bonjour,

je suis en train d'essayer de comprendre le fonctionnement d'un thème Wordpress, et je butte sur une propriété dans la feuille CSS :

#access ul li.current-menu-parent > a {
background: url(images/ss-menu.png) center bottom no-repeat;
}

Je sais que c'est en relation avec l'activation du lien et que cela provoque l'apparition d'une image sous le lien correspondant à la page active (il s'agit d'un menu), mais à quoi correspond l'utilisation de ">" ?
Est-ce en relation avec les pseudo éléments ?
D'accord, merci beaucoup !

Donc ce serait un "combinateur filial"...
Je comprends l'exemple donné dans le doc du W3C, mais je ne comprends pas bien ici en quoi

#menu ul li.page_active > a {
    background: url("../images/ss-menu.png") no-repeat scroll center bottom transparent;
} 

serait différent de :

#menu ul li.page_active a {
    background: url("../images/ss-menu.png") no-repeat scroll center bottom transparent;
}


d'ailleurs, à l'essai, cela ne change rien. Mais la formule avec ">" est peut être plus "correcte" dans la rédaction du CSS ? Ou c'est simplement un choix de l'auteur...
Avec le premier code, on aurait :

<div id="menu">
    <ul>
        <li class="page_active"><a href="#">[#blue][b]Ce lien est concerné[/b][/#]</a></li>
        <li class="page_active">
            <span><a href="#">[#red][b]Ce lien n'est pas concerné[/b][/#]</a></span>
        </li>
    </ul>
</div>


Avec le second, on aurait :

<div id="menu">
    <ul>
        <li class="page_active"><a href="#">[#blue][b]Ce lien est concerné[/b][/#]</a></li>
        <li class="page_active">
            <span><a href="#">[#blue][b]Ce lien est concerné[/b][/#]</a></span>
        </li>
    </ul>
</div>


> est un sélecteur d'enfant et l'espace est un sélecteur de descendant. Dans le premier cas, a n'est pas un enfant de li mais un descendant (il y a span entre les deux), donc le style ne lui sera pas appliqué.
Modérateur
nicopitt34 a écrit :

d'ailleurs, à l'essai, cela ne change rien. Mais la formule avec ">"; est peut être plus "correcte" dans la rédaction du CSS ? Ou c'est simplement un choix de l'auteur...

Attention, l'auteur a sûrement fait pas pour les cas pouvant exister mais qui n'est pas représenté dans votre utilisation/configuration de Wordpress, ou juste sur la page avec laquelle vous testez.
(dans ce cas je pencherais que c'est pour éviter de donner ce style au liens d'un éventuel sous-menu)
Modifié par kustolovic (31 Jan 2012 - 13:58)