複数のクラスを含むマークアップ用の複数のCSSコンテンツ

Question

CSS コンテンツの値を持つアイコンを別のクラスに追加しようとしています。マークアップの中には複数のクラスがあるものもあります。この場合、テキストの後ろに複数のアイコンが必要です。問題は、複数のコンテンツを同じクラスに追加することができるかどうかはわかりません。

例：クラスは、例えば、ある場合には

.entry-header::after {font-family: FontAwesome; font-size: 15px; /*float: right;*/} 

.status-private > .entry-header::after { 
    content: " \f023" 
} 
.format-standard > .entry-header::after { 
    content: " \f040" 
} 
.format-video > .entry-header::after { 
    content: " \f03d" 
} 

.status-privateロゴが表示されますが、マークアップにの2つのクラスがある場合はどうなりますか？のような.status-private .format-standard？どうすれば2つのアイコンを表示できますか？

可能であれば、私はこれらの3つのクラスのすべての可能な組み合わせに対してCSSを作成する必要はありません。

私の現在のマークアップ：

<article id="post-1713" class="post-1713 post type-post status-private format-video hentry category-uncategorized post_format-post-format-video"> 
    <header class="entry-header"> 

     <div class="entry-date"> 
      May 20, 2016 
     </div> 

     <div class="entry-title post-1713 post type-post status-private format-video hentry category-uncategorized post_format-post-format-video"> 
      Private: Private: This is a video post 
     </div> 

    </header><!-- .entry-header --> 

    <div class="entry-content" data-did-load="true" style="display: none;"> 
     <p> 
      The format of this post is video, but the video has not yet been added 
     </p> 
    </div><!-- .entry-content --> 
</article> 

は、私がプライベート後にアイコンを表示したい：これは、あなたが同じ要素に複数の擬似要素を持つことができませんビデオのポスト

Answer 1

です。可能であれば、元の回答に記載されているように、ちょうど::after::afterを持っていても、重複を避けることはできません。

これは私が純度よりも実用性を好む場所です。例：私はちょうど::afterなど

アップデート1でまだCSSでこれらをCSS class ESのそれぞれと各ステータスの空spanを追加し、ターゲットにしたい

.entry-header > .icon::after {font-family: FontAwesome; font-size: 15px; /*float: right;*/} 
 

 
.entry-header > .icon-status-private::after { 
 
    content: " \f023" 
 
} 
 

 
.entry-header > .icon-format-standard::after { 
 
    content: " \f040" 
 
} 
 
.entry-header > .icon-format-video::after { 
 
    content: " \f03d" 
 
}

<!-- To show icons --> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> 
 

 

 
<div class="status-private"> 
 
    <div class="entry-header"> 
 
    <span class="icon icon-status-private"></span> 
 
    Private 
 
    </div> 
 
</div> 
 

 
<div class="status-private"> 
 
    <div class="entry-header"> 
 
    <span class="icon icon-status-private"></span> 
 
    <span class="icon icon-format-standard"></span> 
 
    Private Article 
 
    </div> 
 
</div> 
 

 
<div class="status-private"> 
 
    <div class="entry-header"> 
 
    <span class="icon icon-status-private"></span> 
 
    <span class="icon icon-format-standard"></span> 
 
    <span class="icon icon-format-video"></span> 
 
    Private Video Article 
 
    </div> 
 
</div>

注：[class=*'icon-']に最初のCSSラインの.iconを変更し、冗長を削除することができますのクラス。

プログラミング言語（ServersideまたはJavaScript）を使用している場合は、プログラミングチェックを使用して、それぞれspanをHTMLに書き込むことができます。

アップデート2：あなたは本当に-があるとしてHTMLを維持する必要がある場合は、HTMLの変更

を回避します。私は恐れているセレクタを複製する必要があります。

あなたの特定の状況では、実際にはそれほど悪くはありません。ここにあなたの更新の質問HTMLからの完全な例です：

.entry-header::after { 
 
    font-family: FontAwesome; 
 
    font-size: 15px; 
 
    float: right; 
 
} 
 

 
.format-standard > .entry-header::after { 
 
    content: " \f040"; 
 
} 
 
.status-private.format-standard > .entry-header::after { 
 
    /*Had to put 2 spaces to make the icons separate */ 
 
    content: " \f023 \f040"; 
 
} 
 

 
.format-video > .entry-header::after { 
 
    content: " \f03d"; 
 
} 
 
.status-private.format-video > .entry-header::after { 
 
    /*Had to put 2 spaces to make the icons separate */ 
 
    content: " \f023 \f03d"; 
 
} 
 

 
/* Might not be needed now */ 
 
.status-private > .entry-header::after { 
 
    content: " \f023"; 
 
}

<!-- To show icons --> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> 
 

 

 
<article id="post-1713" class="post-1713 post type-post status-private format-video hentry category-uncategorized post_format-post-format-video"> 
 
    <header class="entry-header"> 
 

 
     <div class="entry-date"> 
 
      May 20, 2016 
 
     </div> 
 

 
     <div class="entry-title post-1713 post type-post status-private format-video hentry category-uncategorized post_format-post-format-video"> 
 
      Private: Private: This is a video post 
 
     </div> 
 

 
    </header><!-- .entry-header --> 
 

 
    <div class="entry-content" data-did-load="true" style="display: none;"> 
 
     <p> 
 
      The format of this post is video, but the video has not yet been added 
 
     </p> 
 
    </div><!-- .entry-content --> 
 
</article>

Answer 2

も、このように複数のコンテンツを追加することができます。

div::after{ 
 
    font-family: FontAwesome; 
 
} 
 
.icon::after{ 
 
    content: "\f03d"; 
 
    font-size: 30px; 
 
} 
 
.icon.icon2::after{ 
 
    content: "\f023 \f03d \f023"; 
 
    font-size: 30px; 
 
}

<head> 
 
    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 
 
</head> 
 

 
<div class="icon"></div> 
 
<div class="icon icon2"></div>