Использование двух классов CSS для одного элемента

Что я здесь делаю неправильно?

У меня есть .social div, но на первом я хочу, чтобы нулевое заполнение сверху, а на втором - отсутствие нижней границы.

Я попытался создать классы для этого первого и последнего, но я думаю, что у меня что-то не так:

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

И 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>

Я предполагаю, что невозможно иметь два разных класса? Если да, то как я могу это сделать?

ОТВЕТЫ

Ответ 1

Если вам нужен два класса для одного элемента, сделайте это так:

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

Ссылка в css так:

.social.first {}

Пример:

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

Ответ 2

Вы можете попробовать следующее:

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

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

Чтобы добавить несколько классов в один и тот же элемент, вы можете использовать следующий формат:

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

DEMO

Ответ 3

Если у вас есть только два элемента, вы можете сделать это:

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

Ответ 4

Если вы хотите применять стили только к элементу, являющемуся первым ребенком его родителя, лучше использовать :first-child псевдокласс

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

Затем правило .social имеет как общие стили, так и последние стили элементов.

И .social:first-child переопределяет их с помощью стилей первого элемента.

Вы также можете использовать селектор :last-child, но :first-child больше поддерживается старыми браузерами: см. https://developer.mozilla.org/en-US/docs/CSS/:first-child#Browser_compatibility и https://developer.mozilla.org/es/docs/CSS/:last-child#Browser_compatibility.

Ответ 5

Я знаю, что этот пост устарел, но вот что они спросили. В таблице стилей:

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

Но это может быть плохой способ использования селекторов. Кроме того, если вам нужно несколько "первых" расширений, вам нужно будет установить другое имя или уточнить селектор.

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

Я надеюсь, что это поможет кому-то, в некоторой ситуации это может быть очень удобно.

Например, если у вас есть крошечный кусок css, который должен быть связан со многими различными компонентами, и вы не хотите писать сто раз тот же код.

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

становится:

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

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

Ответ 6

Помните, что вы можете применять несколько классов к элементу, разделяя каждый класс с пространством внутри его атрибута класса. Например:

<img class="class1 class2">

Ответ 7

Если у вас есть 2 класса, т.е. .indent и .font, class="indent font" работает.

Вам не нужно иметь .indent.font{} в css.

Вы можете иметь классы отдельно в css и по-прежнему звонить как с помощью class="class1 class2" в html. Вам просто нужно пространство между одним или несколькими именами классов.

Ответ 8

Другой вариант - использовать Селекторы потомков

HTML:

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

Ссылка сначала в CSS: .social .first { color: blue; }

Ссылка последней в CSS: .social .last { color: green; }

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

Ответ 9

Вместо того, чтобы использовать несколько классов CSS, для решения вашей основной проблемы вы можете использовать псевдо-селектор: :focus:

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