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