Discussion :

[chlock62]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[papajoker]

Bonjour

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[chlock62]

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

[papajoker]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[chlock62]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou et l'erreur

[chlock62]

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Invité]

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

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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é !

[chlock62]

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

[papajoker]

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Bovino]

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 !