28172 sujets

CSS et mise en forme, CSS3

[Résolu] Nth-child differents éléments

Bonjour,
Je commence à tourner un peu en rond, donc pause..; et recherche d'avis
Ci-dessous la structure html simplifiée.
Je voudrai cibler les blocks par le biais nth-child ou nth-of-type, et ceux différemment des deux grands blocs ( par exemple le Block 1 du SiteHeader est different du Block1 du SiteContent).
J'y arrivai lorsque tous les éléments étaient semblables (des div).
[class|="b"]:nth-of-type(3) { width: 15%; }

<header class="SiteHeader layout">
	<div class="b-Block1"></div>
	<div class="b-Block2"></div>
	<div class="b-Block3"></div>
	<div class="b-Block4"></div>
</header>
<div class="SiteContent layout">
	<section class="b-Block"></section>
	<nav class="b-Nav"></nav>
	<article class="b-Post"></article>
	<ul class="b-List"></ul>
</div>

Modifié par cpalo (18 May 2017 - 16:06)
Salut,
je ne suis pas sur de bien comprendre ta problématique. Est ce que tu peux expliquer plus précisément ce que tu veux faire ?

Un petit exemple de différentes possibilités : https://codepen.io/anon/pen/OmBPQW
(Si j'ai un peu compris ton problème, je pense que c'est les 2 derniers exemples qui t'intéressent le plus)
Les deux derniers exemples correspondent à ce que je veux souvent faire ...
Mais là , ce que je voulais c'était cibler par exemple le 3° enfant d'une section quels que soient son élément (div, nav, section) et sa classe.
"... le troisième enfant d'une section quels que soient son élément et sa classe".

section :nth-child(3){
    ...
   }


Smiley suspect
Oups.. je me suis mal exprimé en utilisant ce terme de section.
Je voulais dire : cibler le 3° enfant d'un des deux groupes (SiteHeader, SiteContent) quel que soit son élément (section, div, nav) ou sa classe.
Je pensais à quelque chose comme ci-dessous, mais par quoi remplacer les ??? Ou certainement une autre méthode.

[class^="SiteHeader"]   ????    nth-child(3){ ...}


[class^=Site]   :nth-child(3){ ...}


Ça, c'est : "le troisième enfant présent dans un élément dont la classe commence par Site". On peut aussi faire :

[class^=Site]  *:nth-child(3){ ...}

Mais ça n'ajoute rien, je trouve...

Remarquez que l'élément dont la classe commence par "Site" n'est pas nécessairement le parent direct. Et que des troisièmes enfants par section, il peut y en avoir plusieurs...

Smiley smile
Modifié par Zelena (18 May 2017 - 22:40)
Sujet clos
Aller à