Sélectionner uniquement le premier élément d'une certaine classe

Hello,

Imaginez le code suivant

<div class="wrapper">
		<div>blabla</div>
[... divers éléments HTML ajoutés ici...]
		<div class="bar">bar</div>
		<div class="foo">foo</div>
		<div class="bar">bar</div>
		<div class="foo">foo</div>
</div>

Comment feriez-vous pour styler uniquement le premier div.foo ? Sans tenir compte de sa place dans le code, car elle varie en fonction des éléments ajoutés avant.

Je pensais ce problème assez simple, mais finalement je ne parviens pas à trouver de sélecteur permettant de faire cela, même en CSS3.

J'ai naturellement essayé div.wrapper div.foo:first-of-type, mais cela ne fonctionne pas. En fait, cela se traduit pas "selectionner le premier child de div.wrapper uniquement si c'est un div.foo" et non pas "selectionner le premier div.foo de div.wrapper" comme je l'imaginais.

Bon, j'ai la chance d'avoir d'autres classes sur lesquelles me raccrocher, mais il doit y avoir quelque chose qui m'a échappé.

Edit : En jQuery, j'aurais fait $('div.wrapper div.foo:first') mais un tel sélecteur n'existe pas en CSS
Modifié par Tymlis (20 Apr 2010 - 18:02)

Hello,

div.wrapper div.foo:first-child { ... }

?

Nope, cela selectionnerai le premier child de div.wrapper uniquement si c'est un div.foo (en l'occurence ici c'est juste un div, donc il ne le selectionnera pas)

Exact, j'ai pas l'habitude d'utiliser :first-child dans ces conditions.

EDIT : Ce n'est pas le même problème qu'ici ?
Modifié par BeliG (20 Apr 2010 - 19:50)

Tymlis a écrit :
J'ai naturellement essayé div.wrapper div.foo:first-of-type, mais cela ne fonctionne pas. En fait, cela se traduit pas "selectionner le premier child de div.wrapper uniquement si c'est un div.foo"

Non, pas tout à fait. Ça se traduit par: «sélectionner le premier DIV parmi les enfants de de div.wrapper uniquement s'il porte la classe "foo".»

Je me suis déjà penché sur le problème ce matin, et la seule solution que j'ai trouvé pour l'instant c'est de définir des styles pour tous les div.foo puis de surcharger pour les suivants:

.wrapper > .foo {
  color: red;
}
.wrapper > .foo ~ .foo {
  color: inherit;
}

Edit: ah tiens, j'ai cru que c'était toi qui avait posé la question vers laquelle renvoie BeliG, mais en fait non. Et puis c'était pas le matin non plus.
Modifié par Florent V. (20 Apr 2010 - 19:54)

Pour ma part j'ai crée un script vérifiant mon formulaire et en cas d'erreur ça va faire un focus sur mon premier <input class="error">.

Le formulaire en question : http://tetsumaki.free.fr/form/contact.html
Les sources sont disponibles ici : http://tetsumaki.free.fr/form/form.zip

De mon côté ça marche donc je ne vois pas pourquoi pour toi ça ne fonctionne pas, à moins d'avoir mal saisi ton soucis.

J'utilise simplement :

$(".error:first").focus();

.error étant donc le nom de ma classe qui pour info est dynamiquement ajouté ou supprimé grâce à, exemple :

var theClass = "error";
var obj = $("#email");
obj.addClass(theClass);

et :

obj.removeClass(theClass);

Si je fais un simple $(".error").focus(); au lieu d'un $(".error:first").focus(); ça va me focus le dernier input .error.

Bref j'espère que ça pourra t'aider ou aider quelqu'un qui passe par ici

Petite question : Il n y a pas de suivit par email sur ce forum ?

Liens :
http://jquery.developpeur-web2.com/documentation/selecteurs/first.php
http://api.jquery.com/first-selector/
Modifié par Tetsumaki (24 Apr 2010 - 06:23)

Tymlis a écrit :
En jQuery, j'aurais fait $('div.wrapper div.foo:first') mais un tel sélecteur n'existe pas en CSS

Tetsumaki a écrit :
De mon côté ça marche donc je ne vois pas pourquoi pour toi ça ne fonctionne pas, à moins d'avoir mal saisi ton soucis.

Tu as mal saisi. Tymlis sait déjà viser l'élément voulu en jQuery. Il cherche un équivalent avec des sélecteurs CSS3, qui apparemment n'existe pas.

Ok je vois.
Heureusement que jQuery fait des merveilles.
Au fait personne a répondu, il n y a aucun moyen d'avoir un suivit par email sur ce forum ?
Modifié par Tetsumaki (25 Apr 2010 - 01:54)

Tetsumaki a écrit :
Au fait personne a répondu, il n y a aucun moyen d'avoir un suivit par email sur ce forum ?

Personne n'a répondu parce que ce n'était pas le sujet, peut-être? La réponse est non.

Tiens, j'étais persuadé d'avoir répondu, en rajoutant quelques tests que j'avais fais avec :not() (sans succès, :not() n'accepte que des selecteurs simples), mais en fait non...

En tout cas, merci pour ta réponse Florent, c'est assez malin comme façon de faire, je la garde dans un coin de ma tête, comme théorie, mais bien trop compliqué à utiliser en situation réelle (d'abord écrire le cas particulier puis overwriter pour les cas généraux).

Merci aussi d'avoir répondu Testumaki, même si je savais déjà le faire en jQuery . Pour info, si ça te focus seulement le dernier élément quand tu fais $('input').focus() c'est parce qu'il ne peut pas y avoir plusieurs éléments "focusés" en même temps. Ton script va tous les focus les uns après les autres, et s'arretera sur le dernier.