28172 sujets

CSS et mise en forme, CSS3

First of type/last-of-type

Bonjour

si j'écris ce code:

 <div class="blockgroup bg2">
</div>
 <div class="blockgroup bg2">
</div>


la mise en forme suivante fonctionne:
[code=css
.bg2:first-of-type {width: 66%}
.bg2:last-of-type { width: 32%; }
][/code]

Comment pourrai-je faire pour que cela fonctionne également si j'ai ce code:

<main class="blockgroup bg2">
</main>
 <aside class="blockgroup bg2">
</aside>

Merci
Tout d'abord, en as-tu besoin ?

L'élément main inclut le contenu principal d'une page web. Il n'y en a donc qu'un par page, et il est donc inuitle de le cibler via des classes et des :first-of-type. C'est peut-être également le cas pour ton aside, je ne sais pas...

Il me semble que des pseudo-classes comme :first-of-type, :last-of-type, :nth-of-type, :first-child, :last-child, :nth-child ont vocation à permettre de cibler des éléments dans devoir leur appliquer de class ou d'id.

Les utiliser pour cibler des classes ou des ids me semble aller à contresens de leur finalité.
@jencal
effectivement ça marche parce que tu as 2 main comme moi si j'ai 2 div
Par contre si j'ai main et aside ça ne marche plus

@thierry
c'est ce que je faisais auparavant
mais comme j'ai fait mon systeme de grille fluide je voulais la réutiser
Tant pis je vais comme avant faire deux classes . content et .sidebar
Alors le problème c'est pas que ce soit un main et aside.. le problème c'est que tu applique un coup 63% et après 32%, le navigateur retiens le dernier.. c'est a dire 32%, le css 63% est écrasé par la ligne suivante.
Sujet clos
Aller à