Использование двух классов 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>

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

212
class css

9 ответов

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

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

ссылка на него в css так:

.social.first {}

пример:

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

366

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

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>

демо

19

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

.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

если вы хотите применять стили только к элементу, который является первым ребенком его родителей, лучше использовать :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.

6

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

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

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

вам не обязательно иметь .indent.font{} в css.

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

5

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

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/

4

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

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