web-dev-qa-db-fra.com

Utiliser deux classes CSS sur un élément

Qu'est-ce que je fais mal ici?

J'ai un .socialdiv, mais sur le premier, je veux zéro remplissage en haut, et sur le second, je ne veux pas de bordure inférieure.

J'ai essayé de créer des classes pour ce premier et dernier mais je pense que je me suis trompé quelque part:

.social {
    width: 330px;
    height: 75px;
    float: right;
    text-align: left;
    padding: 10px 0;
    border-bottom: dotted 1px #6d6d6d;
}

.social .first{padding-top:0;}

.social .last{border:0;}

Et le HTML

<div class="social" class="first">
    <div class="socialIcon"><img src="images/facebook.png" alt="Facebook" /></div>
    <div class="socialText">Find me on Facebook</div>
</div>

Je suppose qu'il n'est pas possible d'avoir deux classes différentes? Si oui, comment puis-je faire cela?

cssclass
233
Francesca

Si vous voulez deux classes sur un élément, procédez comme suit:

<div class="social first"></div>

Référence en css comme suit:

.social.first {}

Exemple:

https://jsfiddle.net/tybro0103/covbtpaq/

408
tybro0103

Vous pouvez essayer ceci:

HTML

<div class="social">
    <div class="socialIcon"><img src="images/facebook.png" alt="Facebook" /></div>
    <div class="socialText">Find me on Facebook</div>
</div>

CODE CSS 

.social {
  width:330px;
  height:75px;
  float:right;
  text-align:left;
  padding:10px 0;
  border-bottom:dotted 1px #6d6d6d;
}
.social .socialIcon{
  padding-top:0;
}
.social .socialText{
  border:0;
}

Pour ajouter plusieurs classes dans le même élément, vous pouvez utiliser le format suivant:

<div class="class1 class2 class3"></div>

DÉMO

22
Codegiant

Si vous ne disposez que de deux éléments, vous pouvez le faire:

.social {
    width: 330px;
    height: 75px;
    float: right;
    text-align: left;
    padding: 10px 0;
    border: none;
}

.social:first-child { 
    padding-top:0;
    border-bottom: dotted 1px #6d6d6d;
}
8
Šime Vidas

N'oubliez pas que vous pouvez appliquer plusieurs classes à un élément en séparant chaque classe avec un espace dans son attribut de classe. Par exemple:

<img class="class1 class2">
7
Pankaj Juneja

Si vous souhaitez appliquer des styles uniquement à un élément qui est le premier enfant de ses parents, vaut-il mieux utiliser :first-child pseudo-class

.social:first-child{
    border-bottom: dotted 1px #6d6d6d;
    padding-top: 0;
}
.social{
    border: 0;
    width: 330px;
    height: 75px;
    float: right;
    text-align: left;
    padding: 10px 0;
}

Ensuite, la règle .social a les styles communs et les styles du dernier élément.

Et .social:first-child les remplace par les styles du premier élément.

Vous pouvez également utiliser le sélecteur :last-child, mais :first-child est plus compatible avec les anciens navigateurs: voir https://developer.mozilla.org/en-US/docs/CSS/:first-child#Browser_compatibility et - https://developer.mozilla.org/es/docs/CSS/:last-child#Browser_compatibility .

6
Oriol

Je sais que ce post devient obsolète, mais voici ce qu'ils ont demandé. Dans votre feuille de style:

.social {
    width: 330px;
    height: 75px;
    float: right;
    text-align: left;
    padding: 10px 0;
    border-bottom: dotted 1px #6d6d6d;
}
[class~="first"] {
    padding-top:0;
}
[class~="last"] {
    border:0;
}

Mais cela peut être une mauvaise façon d’utiliser les sélecteurs. De plus, si vous avez besoin de plusieurs "premières" extensions, vous devez vous assurer de définir un nom différent ou d'affiner votre sélecteur.

[class="social first"] {...}

J'espère que cela aidera quelqu'un, cela peut être très pratique dans certaines situations.

Par exemple, si vous avez un petit fichier CSS qui doit être lié à de nombreux composants différents et que vous ne voulez pas écrire cent fois le même code.

div.myClass1 {font-weight:bold;}
div.myClass2 {font-style:italic;}
...
div.myClassN {text-shadow:silver 1px 1px 1px;}

div.myClass1.red {color:red;}
div.myClass2.red {color:red;}
...
div.myClassN.red {color:red;}

Devient:

div.myClass1 {font-weight:bold;}
div.myClass2 {font-style:italic;}
...
div.myClassN {text-shadow:silver 1px 1px 1px;}

[class~=red] {color:red;}
6
Daratrix

Si vous avez 2 classes, à savoir .indent et .font, class="indent font" fonctionne.

Vous n'avez pas besoin d'avoir un .indent.font{} en css.

Vous pouvez faire en sorte que les classes se séparent en css et les appeler en utilisant simplement le class="class1 class2" dans le code HTML. Vous avez juste besoin d'un espace entre un ou plusieurs noms de classes.

5
Joseph Colbert

Une autre option consiste à utiliser sélecteurs descendants

HTML:

<div class="social">
<p class="first">burrito</p>
<p class="last">chimichanga</p>
</div>

Référence la première en CSS: .social .first { color: blue; }

Dernière référence en CSS: .social .last { color: green; }

Jsfiddle: https://jsfiddle.net/covbtpaq/153/

4
Razan Paul

Au lieu d'utiliser plusieurs classes CSS, pour résoudre votre problème sous-jacent, vous pouvez utiliser le pseudo-sélecteur :focus:

input[type="text"] {
   border: 1px solid grey;
   width: 40%;
   height: 30px;
   border-radius: 0;
}
input[type="text"]:focus {
   border: 1px solid #5acdff;
}
2
Samuel Chen