first-child input

Bonjour, je m'explique,

j'ai une liste d'input et je voudrais selectionner le premier input[type="text] de la liste d'input type text.

Ma liste d'input

Code:

---

1 2 3 4 5 6 7 8 9 10

<div class="bloc_fact bloc"> <div> <label class="required" for="fos_user_profile_form_codeadrf">Code postal : </label> <input type="text" value="62580" required="required" name="fos_user_profile_form[codeadrf]"> </div> <div> <label class="required" for="fos_user_profile_form_villeadrf">Ville : </label> <input type="text" value="Arleux en Gohelle" required="required" name="fos_user_profile_form[villeadrf]"> </div> </div>

---

mon css

Code:

---

1 2 3

.bloc div input[type="text"]:first-child{ width:300px; }

---

Mais hélas rien de fonctionne il me prend pas mon premier first, rien ne fontionne.

Une idée peut etre les amis

Bonjour

Code:

---

1 2 3

.bloc:first-child input[type="text"]{ width:300px; }

---

ca ne fonctionne toujours, bizare je suis bien les exemple du net pourtant

Mais c'est pas le premier dans form que tu désires ?

Code:

---

1 2 3

form:first-child input[type="text"]{ width:300px; }

---

car dans ton html tu as 2 fois
.bloc > div > input (1 seul !!)
.bloc > div > input (1 seul ??)

ou alors écrit ca (1 seul div.bloc)

Code:

---

1 2 3 4 5 6 7 8 9 10 11

<div class="bloc_fact bloc"> <div> <label class="required" for="fos_user_profile_form_codeadrf">Code postal : </label> <input type="text" value="62580" required="required" name="fos_user_profile_form[codeadrf]"> </div>   <div> <label class="required" for="fos_user_profile_form_villeadrf">Ville : </label> <input type="text" value="Arleux en Gohelle" required="required" name="fos_user_profile_form[villeadrf]"> </div> </div>

---

oui j'ai réctifier en même temp probleme de copier coller, pardon.
Donc si je suis bien la cascade css

Code:

---

1 2 3

.bloc div input[type="text"]:first-child{ width:300px; }

---

ou et l'erreur

Pour infos j'ai trouvé l'erreur, je te montre avec un exemple

Code:

---

1 2 3 4 5

<div> <input type="radio" name="foo" value="Yes" /> Yes <input type="radio" name="foo" value="No" /> No <input type="radio" name="foo" value="Maybe" /> Maybe </div>

---

Code:

---

1 2 3

input[type=radio]:first-child { margin-left: 10px; }

---

ca marche et quand je fais genre comme mon architecture comme ceci

Code:

---

1 2 3 4 5

<div> <div><input type="radio" name="foo" value="Yes" /></div> <div><input type="radio" name="foo" value="No" /></div> <div><input type="radio" name="foo" value="Maybe" /></div> </div>

---

ca marche plus c'est les div que j'ai rajouter au input qui doivent cassé la collection d'input je pense vu que c'est ca qui bloque

Bonjour,
il faut cibler le 1er <div> : http://codepen.io/jreaux62/pen/bnEay

Code:

---

1 2 3

.bloc div:first-child input { width:300px; }

---

N.B. Sémantiquement, on met plutôt des balises <p> au lieu des <div>.

Sinon, en mettant une class sur l'input concerné !

Merci pour l'idée de la classe sur l'input concerné.

c 'est des div contennant le label et l'input, c'est créer directement par symfony, du code qui ce créer tout seul donc je peut pas revenir dessus donc je vais comme tu dit selectionné l'input concerné.

Merci a tous en tout cas

Citation:

---

Envoyé par chlock62

Code:

---

1 2 3

input[type=radio]:first-child { margin-left: 10px; }

---

---

Tu n'as pas remarqué que j'avais mis :first-child avant input dans le css, toi tu cherches un enfant dans la balise input :aie:

Pour rappel, input[type="text"]:first-child va cibler tous les éléments input de type text qui sont les premiers enfants de leur balise parente.
Donc dans l'exemple de ton premier message, les balises div contiennent une balise label puis une balise input, donc aucun input n'est le premier enfant de sa div parente !