web-dev-qa-db-fra.com

définition de classe CSS avec plusieurs identificateurs

Je viens de commencer à apprendre le CSS et je suis tombé sur un exemple que je ne comprends pas bien. Je ne peux pas bien le décrire, ce qui a rendu difficile la recherche d'une réponse (je m'excuse donc s'il existe déjà une réponse que j'ai oubliée).

Ma question concerne l'exemple suivant:

.theme-light.slider-wrapper {
  background: #fff;
  padding: 10px;
}

Je comprends que les classes en CSS sont définies en utilisant la syntaxe .name qui peut ensuite être utilisée dans des balises telles que:

<div class="name"></div>

Je ne comprends pas comment fonctionne la "double" déclaration de .name1.name2 et comment cela serait utilisé dans une balise.

Sur une note connexe, l'exemple de site Web qui m'a été attribué utilise un identifiant dans une balise qui n'existe pas dans la feuille de style. Où cela aurait-il pu être défini?

htmlcssclass
23
Raj

Peut-être que cet exemple d'utilisation éclaircira les choses pour vous.

Imaginez le scénario suivant.

Tu aurais:

<div class="general-div">some stuff</div>
<div class="general-div special">some stuff</div>
<div class="general-div">some stuff</div>
<div class="extra-div">some stuff</div>
<div class="extra-div special">some stuff</div>

Et disons que vous voulez que les divs aient les mêmes attributs, comme suit:

.general-div {width: 300px; height: 300px; border: 1px solid #000;}

.extra-div {width: 200px; height: 200px; border: 1px solid #666;}

Mais vous voulez que la classe .general-div avec .special ait un fond rouge et que extra-div avec une classe .special ait un fond bleu.

Vous écririez:

.general-div.special {background-color: red;}

.extra-div.special {background-color: blue;}

J'espère que cela clarifie l'utilisation de la situation en question.

33
Marko Francekovic

En CSS avec le sélecteur .className, vous pouvez définir les propriétés de chaque élément avec la classe "className". Chaque élément pourrait avoir plus de classes. La signification d'un sélecteur avec plus de classes dépend de la façon dont vous les combinez dans vos déclarations:

  • .class1.class2 ne fera correspondre que les éléments pour lesquels les deux classes sont définies.

    .class1.class2 { background: red; }
<div class="class1 class2"></div>

  • .class1, .class2 fera correspondre les éléments avec .class1 ou .class2

    .class1, .class2 { background: yellow; }
<div class="class1"></div>
<div class="class2"></div>

  • .class1 .class2 ne fera correspondre que les éléments avec class2 dans les éléments avec class1.

    .class1 .class2 { background: blue; }
<div class="class1">
    <div class="class2"></div>
</div>
46
diegocstn

Comment utiliser les classes doubles, comme<div class="name1 name2"></div>?

div a pour classes name1 et name2 ( voir démo en direct ).

Qu'en est-il de.theme-light.slider-wrapper?

Cela signifie que votre élément doit avoir à la fois les classes theme-light et slide-wrapper ( voir démonstration en direct ).

C'est bon pour plus d'éléments. Vous voulez que certains éléments aient un fond gris. Aucun problème! Ajoutez-les à la classe gray et définissez css:

.gray {
   background: #ddd;
}

Aussi vous avez besoin de certains éléments ont du texte rouge. Définissez la classe red-text avec css:

.red-text {
   color: red;
}

Et la fin de votre paragraphe a un fond gris et du texte rouge. Ajoutez simplement les deux classes gray et red-text comme ceci <p class="gray red-text">Lorem ipsum</p>.

1
Vukašin Manojlović

.theme-light.slider-wrapper signifie simplement qu'il a les deux classes. Dans le HTML, cela pourrait ressembler à ceci:

<div class="theme-light slider-wrapper"></div>

En ce qui concerne l'ID, il n'y a aucune raison pour qu'un identifiant dans le HTML doive être référencé dans CSS

1
Sean Redmond

Voici une explication détaillée de votre question.

 color-coded class illustration

De: Www.itsmesharath.in

0
Sharath

vous devez utiliser 

<div class="class1 class2">

appliquer plusieurs classes à un objet.

0
Victor