Steggie Steggie - 2 months ago 5
HTML Question

Show div when post has class

Let me first explain what I'm trying to do. I'm trying to give some post some extra attention by making a little circle with some call-to-action text in it.

But I only want this to trigger when a div has a specific class.

So if the div the class

I would like to have a little circle show up on that post. This script what I am using right now.


And this HTML:

<div class="populair-div" style="display:none;">
<div class="sale-div" style="display:none;">

But this only show's the
and not the other one. I'm guessing my script is wrong. Should I use
for all the other call-to-action classes?

} // and so on

Is there someone that could help me out? Also is it possible to
the div so I don't have to write a whole div for every call-to-action div?


For something like this, where the displayed text is explicitly linked to the class-name of the element it's easiest to use CSS and the generated content available, effectively hiding the elements you don't wish to show by default and then explicitly allowing elements you want to show, along with the generated content of those elements (using the ::before and ::after pseudo-elements:

div {
  /* preventing <div> elements
     from showing by default: */
  display: none;
div.populair-div, {
  /* ensuring that elements matching
     the selectors above (<div>
     elements with either the 'sale-div'
     or 'populair-div' class-names
     are shown: */
  display: block;
div.populair-div::before, {
  /* setting the default styles for
     the generated content: */
  display: block;
  width: 4em;
  height: 4em;
  line-height: 4em;
  text-align: center;
  border: 3px solid transparent;
  border-radius: 50%;
div.populair-div::before {
  /* setting the text with the
     "content" property: */
  content: "Popular";
  /* providing a specific colour
     for the generated contents'
     border: */
  border-color: #0c0;
} {
  content: "Sale";
  border-color: #f90;
/* entirely irrelevant, just so you can
   see a (slightly prettified) difference
   should you remove the default display
   property for the <div> elements: */

code {
  background-color: #ddd;
em {
  font-style: italic;
<div class="neither-popular-nor-sale">
    This element should not be shown, it has neither a class of <code>"populair-div"</code>  <em>or</em>  <code>"sale-div"</code>.
<div class="populair-div">
<div>Also not to be shown.</div>
<div class="sale-div">