Twee CSS-klassen gebruiken op één element

Wat doe ik hier verkeerd?

Ik heb een .socialdiv, maar op de eerste wil ik geen opvulling aan de bovenkant, en op de tweede wil ik geen onderrand.

p>

Ik heb geprobeerd om klassen voor deze eerste en laatste aan te maken, maar ik denk dat ik het ergens fout heb:

.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;}

En de 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>

Ik vermoed dat het niet mogelijk is om twee verschillende klassen te hebben? Zo ja, hoe kan ik dit doen?

Antwoord 1, autoriteit 100%

Als je twee klassen op één element wilt, doe het dan op deze manier:

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

Refereer ernaar in css als volgt:

.social.first {}

Voorbeeld:

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

Antwoord 2, autoriteit 6%

Je kunt dit proberen:

HTML

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

CSS-code

.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;
}

Om meerdere klasse in hetzelfde element toe te voegen, kunt u het volgende formaat gebruiken:

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

Demo

Antwoord 3, Autoriteit 3%

Vergeet niet dat u meerdere klassen op een element kunt toepassen door elke klasse te scheiden met een ruimte in zijn klaskenmerk. Bijvoorbeeld:

<img class="class1 class2">

Antwoord 4, Autoriteit 3%

Als u 2 klassen hebt, d.w.z. .indentEN .font, class="indent font"WERKEN.

U hoeft niet een .indent.font{}in CSS te hebben.

U kunt de klassen in CSS laten scheiden en nog steeds bellen met alleen de class="class1 class2"in de HTML. Je hebt gewoon een ruimte nodig tussen een of meer klasnamen.

Antwoord 5, Autoriteit 2%

Als u slechts twee items hebt, kunt u dit doen:

.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;
}

Antwoord 6

Als u Styles alleen aan een element wilt toepassen, is het het eerste kind van de ouders, is het beter om :first-childPseudo-Klasse

te gebruiken

.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;
}

Dan, de regel .socialheeft zowel gemeenschappelijke stijlen als de stijlen van het laatste element.

en .social:first-childoverschrijft ze met de stijlen van het eerste element.

U kunt ook gebruiken :last-childselector, maar :first-childwordt meer ondersteund door oude browsers: zie
https://developer.mozilla.org/en-us/ DOCS / CSS /: First-Child # Browser_Compatibility en https : //Developer.mozilla.org/es/docs/css/: laatste kind # browser_compatibiliteit .

Antwoord 7

Ik weet dat dit bericht verouderd wordt, maar hier vroegen ze.
In uw stijlblad:

.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;
}

Maar het kan een slechte manier zijn om selectors te gebruiken. Als u meerdere “First” -extensie nodig heeft, moet u zeker een andere naam instellen of om uw selector te verfijnen.

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

Ik hoop dat dit iemand zal helpen, het kan in sommige situaties best handig zijn.

Als je bijvoorbeeld een klein stukje css hebt dat aan veel verschillende componenten moet worden gekoppeld, en je wilt niet honderd keer dezelfde code schrijven.

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;}

Wordt:

div.myClass1 {font-weight:bold;}
div.myClass2 {font-style:italic;}
...
div.myClassN {text-shadow:silver 1px 1px 1px;}
[class~=red] {color:red;}

Antwoord 8

Een andere optie is om Descendant selectors

HTML:

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

Refereer als eerste in CSS: .social .first { color: blue; }

Referentie laatste in CSS: .social .last { color: green; }

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

Antwoord 9

In plaats van meerdere CSS-klassen te gebruiken, kunt u de :focuspseudo-selector gebruiken om uw onderliggende probleem aan te pakken:

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