Cours par Webcam

Cours par Webcam

Formateur Web pour adultes depuis plus 11 ans, je vous propose des COURS collectifs par WEBCAM en LIVE pour booster vos connaissances et être autonome dans la création de site.

En savoir plus

CSS - texte

CSS - police

CSS - arrière-plan

CSS - boîte

CSS - mise en page

CSS - liste

CSS - tableau

CSS - animation

CSS - pseudo-class

CSS - pseudo-élément

CSS - les sélecteurs

Facebook
Twitter
LinkedIn

Sélecteur CLASS

Rôle

Le sélecteur class, désigné par le point . permet de cibler les éléments de la page par le nom de leur class

En HTML, la class est défini par l’attribut class. Contrairement à l’attribut id, des éléments HTML différents peuvent avoir le même nom de class.

Une class est souvent utilisée pour créer une caractèristique graphique qu’on pourra appliquer à des objets differents. Si, par exemple, on fait une comparaison avec les êtres humains, la caractèristique « yeux bleus » serait définie par une class puisqu’elle peut se retrouver sur plusieurs personnes différentes

Le code ci dessous montre deux éléments HTML identifiés différemment ayant la même valeur de class.

<input type="text" id="pseudo" class="sansBordure">
<textarea id="message" class="sansBordure"></textarea>

Utilisation du sélecteur CLASS

.sansBordure {
    border: none;
}

Note : un élément HTML peut être associé à plusieurs class CSS. Il suffit de séparer, dans la valeur de l’attribut class en HTML, le nom de chaque class CSS par un espace.

Les class en CSS

.fondBleu {
    backgound-color: blue;
}
.sansMarge {
    margin: 0;
}

Appel de plusieurs class.

<p class="fondBleu sansMarge"> lorem ipsum </p>

Testez vous-même ce sélecteur

Utilisez Codepen.

– Le code CSS

.sansBordure{
  border: none;
  background-color: silver;
}

– Le code HTML

<form action="">
  <label for="pseudo">Pseudo : < /label>< br>
  <input type="text" id="pseudo" class="sansBordure" /> < br>
  <label for="message">Message : <br>
  <textarea name="" id="message" class="sansBordure">< /textarea> < br>
  <input type="button" value='ok' />
  <input type="reset" />
</form>

Résultat

Dans cet exemple, on supprime les bordures des éléments HTML contenant la class ‘sansBordure’.

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera

Le sélecteur class est pris en charge par tous les principaux navigateurs

A voir aussi

#id (sélecteur id)
(sélecteur balise)
#head p>em (sélecteur contextuel)
p,h1 (sélecteur multiple)
(sélecteur universel)
p a (sélecteur descendant)
p>a (sélecteur enfant)
[] (sélecteur d’attribut)
[attribut=valeur]
[attribut~=valeur]
[attribut|=valeur]
[attribut^=valeur]
[attribut$=valeur]
[attribut*=valeur]
h1+p (sélecteur adjacent)
h1~p (sélecteur de proximité)

A lire aussi

tutowebdesign

Afficher du contenu au scroll

Afficher du contenu au scroll Voici un effet impressionnant et pourtant très facile à mettre en place sur vos pages. Le principe consiste à faire

Lire »