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

Что я здесь не так делаю?

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

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

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

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

Источник

9 ответов

Решение

Если вы хотите два класса для одного элемента, сделайте это следующим образом:

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

Ссылка на это в CSS так:

.social.first {}

Пример:

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

Источник

Вы можете попробовать это:

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

Источник

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

<img class="class1 class2">
Источник

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

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

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

Источник

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

.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;
}
Источник

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

.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;}
Источник

Если вы хотите применять стили только к элементу, который является первым дочерним элементом его родителей, лучше использовать :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 и https://developer.mozilla.org/es/docs/CSS/:last-child.

Источник

Другим вариантом является использование потомков селекторов

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/

Источник

Вы можете выразить это по-другому, например, вы можете поместить как фокусы или что-то еще, что я сделал с фокусом...

input[type="text"] {
   border: 1px solid grey;
   width: 40%;
   height: 30px;
   border-radius: 0;
}
input[type="text"]:focus {
   border: 1px solid 5acdff;
}
Источник
Другие вопросы по тегам