18041 sujets

Questions générales et questions de débutants

[Résolu] CSS multi definition quelle regle s'applique

Bonjour,
La question est certainement enfantine, mais voici un exemple de syntaxe CSS
dans une page que je reprend, comment devons nous lire ces définitions multiples Smiley rolleyes
Par exemple

.mean-container .mean-nav ul li li li li li a{width:50%;padding:1em 25%;}

J'aurais tendance à dire tout élément ayant pour class="mean-container" et class=".mean-nav ul"
j’applique la définition {....}
Mais les trois "li" ?? et le "a" Smiley decu

Je sais que par exemple sur un anchor de class="LesA"
j'ais 

A.LesA {
FONT-FAMILY: "Courier New", Courier, monospace; COLOR: #ffffff; FONT-SIZE: 22px; TEXT-DECORATION: none}
a.LesA:link {}
A.LesA:hover {	COLOR: #ff9999}

mais la il y a les ":" alors comment comprendre la premiére syntaxe de ma question,merci d'avance
Modérateur
bonjour

dans un sélecteur css, l'espace entre deux sélecteur est appelé «sélecteur descendant» et ne ciblera que les éléments contenus dans le premier sélecteur.
Comme ce n'est pas forcément très clair:
- ul li : ciblera les li contenus dans un ul
- #content p.super : ciblera les paragraphes p avec la classe super contenus dans un élément avec un id content.

donc ".mean-container .mean-nav ul li li li li li a" cible tous les liens contenus dans 5 listes imbriquées contenu dans un élément .mean-nav contenu dans un élément .mean-container.

Les : ciblent une pseudo-classe ou un pseudo-élément. Une pseudo classe est une classe ajoutée automatiquement (par exemple :hover sur un lien au passe de la souris par-dessus).
Mille mercis à toi, c'est ultra clair, et je vais pouvoir mettre résolu Smiley smile

Juste un détail lorsque je vois des 


address, caption, cite, code, dfn, em, strong, th, var { 
font-style :normal; 
font-weight :normal; }


Est-ce parce-que la "," sépare les noms qu'il s'agit d'éléments distinct aux-quels nous appliquons le même paramètre ? contrairement au cas de ma question ou il n'y a aucune virgule ?

Encore merci à toi, c'est limpide. Smiley baiser Smiley confused
Modérateur
Christele a écrit :
Est-ce parce-que la "," sépare les noms qu'il s'agit d'éléments distinct aux-quels nous appliquons le même paramètre ? contrairement au cas de ma question ou il n'y a aucune virgule ?

Effectivement, la virgule permet de grouper différent sélecteurs et leur appliquer la même déclaration de style.

p, a {
  color: red;
}

applique la couleur rouge à tous les <p> et tous les <a> de la page, alors que:
p a {
  color: red;
}

applique la couleur rouge à tous les <a> contenus dans un <p> de la page.
Une dernière chose. Cet exemple est un cas d'école :
.mean-container .mean-nav ul li li li li li a{width:50%;padding:1em 25%;}

C'est un exemple bien sûr. Mais ce type de code ne doit jamais être utilisé pour des raisons de performance d'affichage : le navigateur va devoir remonter tous les sélecteurs pour arriver à calculer le style.

On ne devrait jamais descendre au-delà de trois sélecteurs. En dessous il vaux mieux ajouter une classe. Mais ce n'est pas toujours facile à mettre en œuvre, comme dans le cas d'un tableau par exemple...
Sujet clos
Aller à