Une question de sélécteur (CSS)

Par tagcash, il y a 13 ans

Les bases HTML/CSS

Voilà mon code :

<div class="span12">
    <div class="header">...</div>
    <div class="span8">... ... ... ...</div>
    <div class="span4">... ...</div>
</div>

Voilà, alors j'aimerais en css atteindre le .span8 ...
en gros j'aimerais atteindre le "premier enfant (span)" par rapport à la span12

j'ai déjà essayer, sans succès : 

[class*="span"] > [class*="span"]:first-child {...}
ou
.span12 > [class*="span"]:first-child {...}

6 réponses

Lotfi Berrahal, il y a 13 ans

pour le coup en css c'est pas vraiment comme ça que tu devrais t'y prendre mais plus comme ça :

.span12 .span8{...}

juste ne les sépare pas par des virgules!
La le langage comprend que tu parle de la div span8 dans la div span12 et ainsi de suite

après visiblement ton soucis est associé a Jquery donc pas vraiment le bon forum!
beaucoup de tuto jquery dont celui des sélecteur jquery sont disponible sur ce site !

Cordialement,

tagcash, il y a 13 ans

Merci, mais ça je le savais déjà, le truc, c'est que la span8 peut devenir span1,span2,span3,span4,span5...span12 ...
ainsi que la span4 peut devenir, enfin on m'à compris XD.
et on pourrais meme avoir ça :

<div class="span12">
    <div class="header">...</div>
    <div class="span6">... ... ... ...</div>
    <div class="span6">... ...</div>
</div>

Oh, et non s'est du pur CSS et non pas du jQuery comme tu semble le croire.

PS : Le problème j'aurais pu facilement le résoudre en jQuery cela dit, mais malheureusement je doit utiliser du CSS.
PS2: Pour résoudre le problème il y aune solution toute bete qui est ma solution temporaire s'est de mettre une deuxième class style : 

<div class="span12">
    <div class="header">...</div>
    <div class="span6 first-span">... ... ... ...</div>
    <div class="span6">... ...</div>
</div>

Mais j'aimerais justement éviter de devoir rajouter une deuxième classe s'est pour cela que je demande si s'est possible d'atteindre la première .spanX à l'intérieur de la .span12

:first-child ne fonctionne pas car la prmière .spanX n'est pas la première il y a .header entre.

coloo, il y a 13 ans

Bonjour c'est pour quoi faire, tu peux modifier le html, si oui :

<div class="span12">
    <div class="header">...</div>
<div class="datspan">
    <div class="span6 ">... ... ... ...</div>
    <div class="span6">... ...</div>
</div>
</div>

A défaut de faire compliqué :p

++

tagcash, il y a 13 ans

ca reviendrais presque au meme que d'ajouter la classe first-span, mais effectivement j'ai l'impression que s'est plus simple que d'ajouter la class first-span. si il n'y a pas d'autre idée jusqu'à demain soir je validerais donc cette possibilité

elRingo, il y a 13 ans

Bonjour

Il sera peut être intéressant de voir du côté du combinateur d'adjacence (CSS3 essentiellement) ou les pseudo-classes

Ces éléments te permettent de sélection ta div, suivant :

Combinateur d’adjacence :

header~div {...} //style qui s'appelle à les div qui suivent

ou

Les pseudo-classes :

header div:nth-child(2n+1) { ... } // dans votre cas n=0 il s'agit du premier élément

pour plus d'info, tu as cette adresse : http://vincent.composieux.fr/article/petit-memento-sur-les-nouveautes-css-3

J’espère que ça pourra t'aider

tagcash, il y a 13 ans 
<div class="span12">
    <div class="header">...</div>
    <div class="span6 first-span">... ... ... ...</div>
    <div class="span6">... ...</div>
</div>

Ajouter une deuxième class, est une solutions temporaire convainquante.
je vais rester la dessus pour le moment.