28172 sujets

CSS et mise en forme, CSS3

CSS 3 : logique de :nth-child et :nth-of-type

Bonjour,

J'ai le bout de HTML suivant : 


<div>
    <p>texte</p>
    <div>000</div>
    <div class="toto">111</div>
    <p>texte</p>
    <div class="toto">222</div>
    <div>333</div>
    <div class="toto">444</div>
</div>


Je veux sélectionner le premier div[class="toto"].


.toto:first-child {
    font-weight: bold;
}

Ca ne marche pas.


.toto:nth-child(1) {
    font-weight: bold;
}

Ca ne marche pas.


.toto:first-of-type{
    font-weight: bold;
}

Ca ne marche pas.


.toto:nth-of-type(2) {
    font-weight: bold;
}

Ca marche.


.toto:nth-child(3) {
    font-weight: bold;
}

Ca marche.

Peut-on m'expliquer la logique de :nth-child et :first-of-type ? le ".toto" n'a pas l'air de servir à grand chose puisque les résultats sont les mêmes sans...

Merci Smiley cligne
Modifié par ALkyD (01 Apr 2010 - 18:18)
Hello,
http://www.javascriptkit.com/dhtmltutors/structuralcss.shtml a écrit :
E:first-of-type

Sélectionne le premier élément E de son type parmi la liste d'enfants directs de son conteneur

Quelle que soit la classe de ton élément, ça n'a guère d'importance : la pseudo-classe :first-of-type ne regarde que le type d'élément, c'est à dire la balise de base.
:first-of-type fera en revanche la différence entre input[type="text"] et input[type="checkbox"], car ce sont deux éléments de type distinct.

Il est normal que :nth-of-type(2) et :nth-child(3) fonctionnent : ils choisissent respectivement le 2è enfant de type "div" et 3è enfant direct (tous types confondus) de ton conteneur Smiley cligne
Modifié par Ladytron (01 Apr 2010 - 21:50)
Bonsoir,

.toto:first-child {}
Vise tout élément portant la classe "toto" qui serait le premier enfant de son conteneur.
Ne correspond à aucun élément dans ton code HTML (le premier div.toto est le troisième enfant de son parent).

.toto:nth-child(1) {}
Comme le précédent.

.toto:first-of-type {}
Vise tout élément portant la classe "toto" et qui est le premier élément de son propre type (par exemple DIV) parmi les enfants de son parent.
Ne correspond à aucun élément dans ton code HTML (le premier div.toto est précédé par un autre DIV).

.toto:nth-of-type(2) {}
Sélectionne tout élément portant la classe "toto" et qui est le deuxième élément de son propre type parmi les enfants de son parent.
Ça devrait viser le premier div.toto de ton code HTML d'exemple.

ALkyD a écrit :
Peut-on m'expliquer la logique de :nth-child et :first-of-type ?

En anglais:
http://reference.sitepoint.com/css/pseudoclass-nthchild
http://reference.sitepoint.com/css/pseudoclass-firstoftype
http://reference.sitepoint.com/css/understandingnthchildexpressions

ALkyD a écrit :
le ".toto" n'a pas l'air de servir à grand chose puisque les résultats sont les mêmes sans...

Il restreint la portée du sélecteur. Enlève les class="toto" dans ton code HTML et tu verras la différence.
Modifié par Florent V. (01 Apr 2010 - 20:04)
C'est plus clair merci Smiley cligne

Dans ce cas-là, comment on fait pour sélectionner par exemple le deuxième div[class=toto], indépendamment du nombre de div/p avant et après l'élément ? Un peu comme la fonction eq(n) en jQuery : $("div[class=toto]").eq(2)...
Modifié par ALkyD (02 Apr 2010 - 10:49)
Le seul truc que j'ai trouvé c'est ça:
.toto ~ .toto { /* Deuxième et suivants */
  color: red;
}
.toto ~ .toto ~ .toto { /* Troisième et suivants */
  color: inherit;
}


nth-child et -nth-of-type ne conviennent à priori pas car:
- nth-child permet de viser le Nième élément frère, sans filtre sur le type d'élément ou ses attributs;
- nth-of-type permet de viser le Nième élément de type X, mais pas de filtrer sur les attributs des éléments.
Sujet clos
Aller à