Question 165235 in Wordpress Question posted in
The official Wordpress documentation can be found here.

in the HTML Can two classes be applied to a element in CSS without being specified in the HTML? #WordPress

On my Wordress blog, I frequently use <hr> in blog posts. In other posts I use two <hr> per post – and in others I use no <hr>.

So right now this is in my CSS:

.entry-content hr {
  overflow: visible;  
  padding: 0;
  border: none;
  border: 10px solid #74eda7;
  border-radius: 8px;
  color: green;
  text-align: center;
  }

.entry-content hr:after {
   content: "↓ INSPIRE ↓"; 
    display: inline-block;
    position: relative;
    top: -0.8em;
    font-size: 1.2em;
    padding: 0 0.25em;
    background: white;

which works fine unless I add another <hr> to a blog post and then I want a new set of attributes to be applied.

Is there anything I can please add so that a second instance of <hr> within any one blog post takes on a whole new set of attributes.

Something like this works:

.entry-content hr:nth-child(odd):after {
content: "↓ inspire 2X ↓";
}

.entry-content hr:nth-child(even):after {
content: "↓ INSPIRE ↓";
}

except when I have multiple blog posts per page, the odd and even makes it inconsistent across posts. The first <hr> should say "Inspire" and the 2nd on any blog post should say "inspire 2x" and a web page can have up to 7 blog posts in total.

I don’t want to manually start adding class names into each blog post.

Any assistance would be greatly appreciated.

Tags:

3

Answers


  1. 0

    Try this way

    .entry-content hr:after {
  content: "↓ inspire 2X ↓";
}

.entry-content hr + hr:after {
  content: "↓ INSPIRE ↓";
}
    Login or Signup to reply.
  2. 0

    You can select an element in CSS by an attribute, and in this case you can select by an attribute starting with a particular string.

    This snippet selects by article with ids starting with post-

    .entry-content article hr:nth-child(odd)::after {
  content: "↓ inspire 2X ↓";
  z-index: 1;
}

.entry-content article[id^="post-"] hr:nth-child(even)::after {
  content: "↓ INSPIRE ↓";
}
    <div class="entry-content">
  POST 19324:<br>
  <article id="post-19324" class="post-19324 post type-post status-publish format-standard">
    <hr>post 19324 has two hrs
    <hr>
  </article>
  <br>
  <br>POST 19325:<br>
  <article id="post-19325" class="post-19325 post type-post status-publish format-standard">
    <hr>post 19325 has one hr</article>
  <br>
  <br>POST 19326:<br>
  <article id="post-19326" class="post-19326 post type-post status-publish format-standard">
    <hr>post 19326 has one hr</article>
</div>
    Login or Signup to reply.
  3. 0

    Just replace nth-child with nth-of-type:

    .entry-content hr:nth-of-type(even):after {
content: "↓ inspire 2X ↓";
}

.entry-content hr:nth-of-type(odd):after {
content: "↓ INSPIRE ↓";
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search