Tout petit souci avec les class

Bonjour,
je ne comprends pas très bien comment fonctionnent les classes!

Dans un formulaire de contact, j'ai la même classe pour les balise <label for "xxx"> mais je voudrais mettre un format différent pour la <label for "message"> par exemple.

Comment je fais dans le CSS?
label{
........
}

et pour *label message*?
label message{
.....
}

Merci pour vos explications.

Bonsoir,

Il y a deux choses distincte dans ce que tu décris.

1/ La relation entre la classe dans le html

<label class="toto">Label</label>

et le code CSS

.toto {
  /* style */
}

2/ la relation entre 2 élément html (un label et un input) qui relit l’attribut "for" d'un label à l'ID d'un champ :

<label for="message">Label</label>
<input id="message" type="text"/>

Et les deux ne sont pas incompatibles :

<label class="toto" for="message">Label</label>
<input id="message" type="text"/>

Par soucis de cohérence on pourrait avoir tendance à mettre le même nom partout :

<label class="message" for="message">Label</label>
<input name="message" id="message" type="text"/>

mais ca peut prêter à confusion.

:) Bonne soiree
Modifié par _laurent (06 Apr 2016 - 21:36)

adio _Laurent, merci pour ta réponse, mais c'est pas exactement ça que je demandais.
Voici un bout de code d'une page formulaire:

<div>
	<label for "nom">Votre nom: </label> 
	<input type="text" name="nom" id="nom"/>
</div>

<div>
         <label for "email">Votre mail: </label>
         <input type="email" name="email"id="email"/>
</div>

<div>
          <label for "message">Message: </label>
          <textarea name="message"id="message" ></textarea>
</div>

Le Css est

input, textarea {
		font-family: tahoma; 
		font: 1em sans-serif;
		width: 1000px;
		}
  
input:focus, textarea:focus {
		border: 4px solid red;
		}

textarea {
		vertical-align: top;
		height: 5em;
		resize: vertical;
}

Avec ce Css, tous les champs ont les mêmes caractéristiques sur la page affichée (largeur, hauteur, background)
Or je voudrais pouvoir mettre une classe différente sur *email*
Et je ne sais pas comment on fait en Css pour mettre une classe différente.

Merci pour tes explications.
Modifié par abeille (06 Apr 2016 - 22:31)

Salut,

_laurent répond exactement à ta question et en plus sa réponse est très détaillée avec presque tous les cas de figure...

abeille, il faut que tu lises avec une grande attention les réponses qui te sont apportées pour que tu puisses trouver ta solution, on ne t'apportera pas forcément TA solution, mais bien souvent des éléments te permettant d'adapter ta solution.

Dans ton cas actuel, il faut que tu ajoutes une "class" dans la balise que tu veux spécifiquement styler. Mais comme au final on ne sait pas ce que tu veux styler, on ne peut pas te donner de réponse exacte : dans ton premier post tu parles de styler un <label> et dans ton deuxième post, tu indiques un CSS qui ne style que des <input> et <texarea>.

Donc si tu veux styler un label ça sera :

<label for="email" class="label-email">Votre email</label>

.label-email{
  font-weight: bold;
}

Si tu veux styler un input, ça sera :

<input id="email" name="email" type="email" class="input-email" />

.input-email{
  line-height: 30px;
}

On pourra pas vraiment être plus précis et si tu n'arrives pas à assimiler ce concept TRES simple, il faudra vraiment que tu reprennes la base de la base en suivant une formation ou bien en suivant des cours en ligne.

Bonjour,

(et grillé parce que j'avais ouvert 4 onglets et que je répond 10min plus tard sans recharger, ça faisait longtemps )

il n'y a pas de classe sur ton label, il y a un attribut for ayant pour valeur message.
De là, 2 possibilités :
- dans le code HTML, tu ajoutes une classe tartempion et le label devient :

<label for="message" class="tartempion">texte du label</label>

Maintenant tu peux dans tes CSS cibler cette classe :

.tartempion {
  color: slateblue;
  font-weight: bold;
}

- tu cibles en CSS l'attribut for et sa valeur avec un sélecteur... d'attribut (compatibilité IE7+, d'mon temps on pouvait pas utiliser ça ^^)

[for="message"] {
  color: slateblue;
  font-weight: bold;
}

Ou préciser l'élément en plus (c'est un poil plus lisible et infinitésimalement plus performant mais c'est tout) :

label[for="message"] {
  color: slateblue;
  font-weight: bold;
}

C'est la seule solution si tu ne peux pas modifier le code HTML (shit happens)
Ca casse dès que la valeur de l'attribut change (à la prochaine refonte du site) mais si c'est pour l'unique formulaire de contact de ton site et qu'à part la recherche il n'y a pas d'autre formulaire, on est d'accord que ça va pas cibler d'autres champs de formulaire par erreur
Modifié par Felipe (06 Apr 2016 - 22:57)

Felipe a écrit :
et grillé parce que j'avais ouvert 4 onglets et que je répond 10min plus tard sans recharger, ça faisait longtemps

Felipe a écrit :
grillé parce que j'avais ouvert 4 onglets [...]

Seulement quatre ?

Felipe a écrit :

Ou préciser l'élément en plus (c'est un poil plus lisible et infinitésimalement plus performant mais c'est tout) :

label[for="message"] {
  color: slateblue;
  font-weight: bold;
}

Adio Felipe, malgré tes 4 onglets de retard, tu as répondu à ma question.
Si par exemple j'ai plusieurs <label...> différents, je peux dans le CSS, avoir un
label{...} qui sera général pour tous les <label....>

puis pour chaque <label class="XX"> un label [for="XX"]{...}

Est ce que je suis juste là?

Oui pour le label général avec le sélecteur dans ton CSS :

label{
  /*ton style pour TOUS les labels*/
}

Ensuite, non, si tu as une balise label comme ça :

<label class="XX">Email</label>

Ton sélecteur label[for="XX"] n'aura aucun effet, il faut un sélecteur de ce type :

label.XX{
  /*ton style pour le seul label portant la classe "XX"*/
}

Modifié par MatthieuR (07 Apr 2016 - 11:29)

MatthieuR a écrit :

Ton sélecteur label[for="XX"] n'aura aucun effet, il faut un sélecteur de ce type :

label.XX{
  /*ton style pour le seul label portant la classe "XX"*/
}

Ok merci Matthieu, c'est exactement ce que je voulais savoir.
merci, à plus.

abeille a écrit :
puis pour chaque &lt;label class="XX"&gt; un label [for="XX"]{...}
Est ce que je suis juste là?

Comme Matthieu : Nop.
Et pour dire tout ça d'une autre façon au cas ou...

Il y a une différence entre l'attribut for (qui ne sert pas à styler mais a relier un label à un champs):
Qu'on peut cependant chopper en CSS mais il n'est pas fait pour ça et en plus ça fait un sélecteur compliqué.

<label for="message"></label>

label[for="message"] {
}

et les classe comme partout ailleurs qui sont faites pour style un élément

<label class="toto" for="message"></label>

.toto {
}

Depuis le début tu mélange les deux. tu ne peux pas relier

<label for="message"></label>

avec

.message {
}

car message n'est pas une classe.