salut à tous,

j'ai plusieurs input type text dans mon formulaire et je voudrais en sélection 1 pour lui donner un style particulier mais comme dans mon fichier css j'ai 

input[type="text"]{

bacground-color : red;
}

<div class="form-control">
  <input type="text name="speudo">
  <input type="text name="nom jeune file">
  <input type="text name="recherche">
  <input type="text name="besoin">
</div>

Du coup ils ont tous la même couleur de fond comment je peux faire pour en sélectionner juste 1 seul ? 

-
Edité par snapzcorp 23 juillet 2017 à 15:49:21

Salut,

Il y a plusieurs manières de faire. Tu peux rajouter un id à chaque élément, mais ça fait beaucoup d'ids.

En css, tu peux faire :

input[name="pseudo"]
{
    background-color: red;
}

input[name="nom_jeune_fille"]
{
    background-color: green;
}

Ou bien

input:first-of-type
{
    background-color: red;
}

input:nth-of-type(2)
{
    background-color: green;
}

Salut,

Déjà, chaque input devrait être lié à un label, ce qui requiert donc de leur attribuer un ID. Mais plutôt que de cibler des IDs en CSS, il est préférable de cibler des classes. Donc, ajoute également des classes sur tes champs de formulaire.

Et aussi, referme correctement l'attribut "type" sur tes input.

tu ajoute une class a l'élément que tu veux appliquer un style diferent tout simplement. 

puis pourquoi 

input [type="text"]{

    background-color :red;

}

de mon point de vue sa serait plutôt 

input {

    background-color :red;

}

ok merci si j'ai bien compris avec 

input:nth-of-type(2) /* le nombre permet de choisir quel input il s'agit ? */ 
{
    background-color: green;
}

oui, et pour le premier "first-of-type", pour le dernier "last-of-type", sans nombre entre parenthèses.

Si ton html vient à changer, le css ne correspondra plus. Mettre une classe est plus safe.

-
Edité par EmmanuelBeziat 23 juillet 2017 à 16:06:19

mais pourquoi chercher aussi compliqué 

.taclasse  {

    background-color :red;

}

-
Edité par NicolasDreux 23 juillet 2017 à 16:07:46

@NicolasDreux, si tu n'as pas bien lu le premier message, il s'agit de cibler un élément en particulier. Dans ce cas, les classes ne sont pas appropriées. Les classes servent à grouper différents éléments pour leur appliquer un ou plusieurs mêmes styles. Ici, il veut cibler un élément précis.

@me_moi les classes permettent parfaitement de cibler un élément en particulier… Il n'y a aucune nécessité de "grouper" les éléments dans l'utilisation des classes.

-
Edité par EmmanuelBeziat 23 juillet 2017 à 16:23:30

rhooManu a écrit:

Si ton html vient à changer, le css ne correspondra plus. Mettre une classe est plus safe.

-
Edité par rhooManu il y a 8 minutes

pas bête du coup je vais voir quelle solution me va le plus. (je vais tester)

rhooManu 

je te rejoins sur sa les classes fon très bien l'affaire

Dans ce cas, autant utiliser des id.

Non, le poids des IDs est beaucoup trop conséquent dans une déclaration. La meilleure pratique adoptée à ce jour reste de limiter les déclarations à une classe autant que faire se peut, avec un maximum de deux classes, ou bien une classe + un élément, une classe + un pseudo-élément, ou une classe + une pseudo-classe, etc.

Au-delà, la maintenabilité devient difficile. Et un ID ne peut pas être surchargé par des classes, donc on évite d'y avoir recours sous peine d'entamer une escalade grossière. Je te renvoie à la méthodologie BEM pour plus d'infos.

À la rigueur, pour utiliser un ID, il conviendrait plus de faire ceci pour conserver un poids léger (les sélecteurs d'attributs valant autant qu'une classe) :

[id="myElement"] { }

Mais là encore, une classe fait très bien l'affaire.

Oui, mais dans ce cas, il faut quatre classes, c'est quoi l'intérêt ? et puis si on parle de poids, les classes font 10 et comme tu dis les sélecteurs d'attributs valent autant que les classes, donc pas besoin d'ajouter des classes, il a déjà ce qu'il faut dans son code html avec les attributs name.

Quel est le problème à avoir quatre classes ? Ce n'est ni sale, ni problématique, ni… Rien. Et c'est modulaire et réutilisable, ce qui n'est pas le cas des IDs ou des attributs name.

-
Edité par EmmanuelBeziat 23 juillet 2017 à 18:39:29

chacun son point de vue.