web-dev-qa-db-ja.com

1つの要素で2つの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>

私は2つの異なるクラスを持つことは不可能だと思いますか？もしそうなら私はこれをどのように行うことができますか？

cssclass
230
Francesca

1つの要素に2つのクラスが必要な場合は、次のようにしてください。

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

そのようにCSSでそれを参照してください。

.social.first {}

例：

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

404
tybro0103

これを試すことができます：

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

同じ要素に複数のクラスを追加するには、次の形式を使用できます。

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

_ demo _

21
Codegiant

アイテムが2つしかない場合は、これを実行できます。

.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

各クラスをそのクラス属性内のスペースで区切ることによって、要素に複数のクラスを適用できることを忘れないでください。例えば：

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

親の最初の子である要素にのみスタイルを適用したい場合は、: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
Oriol

私はこの記事が古くなっているのを知っています、しかしここに彼らが尋ねたものがあります。あなたのスタイルシートでは：

.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があり、同じコードを100回記述したくない場合などです。

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
Daratrix

.indentと.fontの2つのクラスがある場合、class="indent font"は機能します。

あなたはCSSで.indent.font{}を持つ必要はありません。

あなたは、cssでクラスを分離しても、HTMLのclass="class1 class2"を使って両方を呼び出すことができます。 1つ以上のクラス名の間にスペースが必要です。

5
Joseph Colbert

子孫セレクタを使用することもできます

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
Razan Paul

根本的な問題に対処するために複数のCSSクラスを使用する代わりに、: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