CODEWITHSUNDEEP
csscss-selectors
Arete
Arete

Reputation: 1004

Multiple CSS content for markup with multiple classes

I am trying to add icons with CSS content value to different classes. Some markup might have multiple classes, in which case I want multiple icons after the text. Problem is, I am not sure if I can add multiple content values to the same class.

Example:

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

In the case where a class is e.g. .status-private a logo will be displayed, but what if the markup has two classes? Such as .status-private .format-standard? How can I then display two icons?

If possible, I would avoid having to make CSS for every possible combination of these three classes.

My current markup:

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

I want to display the icons after Private: This is a video post

Upvotes: 2

Views: 1706

Answers (2)

Meligy
Meligy

Reputation: 36594

You cannot have multiple pseudo elements on the same element. Even if you could, as mentioned in original answer, just having ::after::after will not help you avoid duplication.

This is where I'd prefer practicality over purity. I'd just add an empty span for each status with each of the CSS classes, and target these in the CSS still with ::after etc.

Update 1: Example:

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

Note: You can change the .icon in the first CSS line to [class=*'icon-'], and remove the redundant icon class from the spans.

If you are using some programming language (Serverside or JavaScript), you can use some programming checks to decide to write each span in the HTML.

Update 2: Avoiding HTML Changes

If you really have to keep the HTML as-is. You'll have to duplicate the selectors I'm afraid.

In your particular situation, it's not too bad actually. Here's the full example from your updated question 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>

Upvotes: 5

Alberto Rubio
Alberto Rubio

Reputation: 424

Can Add multiple content like this too.

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>

Upvotes: 0

Related Questions