How to CSS style an element, when an other specific element is following?

March 25, 2022

I use the Shariff solution with an statistics backend to provide visitors with an easy way to share content on social media.

Based on the data from the statistics backend, Shariff will dynamically (JavaScript) introduce a <span class="share_count">0</span> element to every share provider (e.g. Facebook, Twitter, …), which has a related share count number in the statistics backend data.

Now, I would like to style every Shariff button, which does not have a share_count element, using only CSS.

This is how an Shariff button with a share count looks like in HTML:

<li class="shariff-button facebook">
  <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2F" data-rel="popup" rel="nofollow" title="Bei Facebook teilen" role="button" aria-label="Bei Facebook teilen">
    <span class="fab fa-facebook-f"></span>
    <span class="share_count">12k</span>
  </a>
</li>

And this is how an Shariff button without a share count looks like:

<li class="shariff-button facebook">
  <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2F" data-rel="popup" rel="nofollow" title="Bei Facebook teilen" role="button" aria-label="Bei Facebook teilen">
    <span class="fab fa-facebook-f"></span>
  </a>
</li>

How do I select an element in CSS only when it has an specific following (not a child) element.

How do I center the Shariff button icons, which Shariff button does not have a share count?

// This is only a dummy to demonstrate the runtime manipulations done by Shariff.
setTimeout( function(){ 
  $(".shariff-container .shariff-button:not(.twitter):not(.whatsapp):not(.telegram):not(.threema):not(.linkedin):not(.tumblr):not(.mail):not(.print):not(.info)").each(function(){ 
    $(this).find("span").after('<span class="share_count">12k</span>')
  });
}, 10 );

.shariff-container { text-align: center; }
.shariff { display: inline-block; text-align: left; }
.shariff-heading { font-size: 1.2em; font-weight: bold; }
.shariff-button a { padding-left: 8px; }
.shariff-button.info a { padding-left: 0; }
@media print { .shariff-container { display: none; } }

<script src="https://cdn.jsdelivr.net/npm/shariff@3.2.1/dist/shariff.complete.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/shariff@3.2.1/dist/shariff.complete.css" rel="stylesheet"/>

<aside class="shariff-container">
  <div class="shariff-heading">Share on social media</div>
  <div class="shariff" data-button-style="icon-count" data-lang="de" data-url="https://example.com/" data-twitter-via="twitter-handle" data-title="Site Title" data-mail-subject="mail subject" data-mail-body="mail body" data-mail-url="mailto:" data-services="[&quot;facebook&quot;,&quot;twitter&quot;,&quot;whatsapp&quot;,&quot;telegram&quot;,&quot;threema&quot;,&quot;linkedin&quot;,&quot;xing&quot;,&quot;reddit&quot;,&quot;tumblr&quot;,&quot;pinterest&quot;,&quot;mail&quot;,&quot;print&quot;,&quot;info&quot;]"></div>
</aside>

>Solution :

You’ve ask a bit of an XY question. I would just tweak your flex layout a bit.

// This is only a dummy to demonstrate the runtime manipulations done by Shariff.
setTimeout(function() {
  $(".shariff-container .shariff-button:not(.twitter):not(.whatsapp):not(.telegram):not(.threema):not(.linkedin):not(.tumblr):not(.mail):not(.print):not(.info)").each(function() {
    $(this).find("span").after('<span class="share_count">12k</span>')
  });
}, 10);

.shariff-container {
  text-align: center;
}

.shariff {
  display: inline-block;
  text-align: left;
}

/* start changes ******************************/
body .shariff li a {
  display: flex;
  justify-content: center;
}

body .shariff li .share_count {
  position: relative;
  right: 0;
}
/* end changes ********************************/

.shariff-heading {
  font-size: 1.2em;
  font-weight: bold;
}

.shariff-button a {
  padding-left: 8px;
}

.shariff-button.info a {
  padding-left: 0;
}

@media print {
  .shariff-container {
    display: none;
  }
}

<script src="https://cdn.jsdelivr.net/npm/shariff@3.2.1/dist/shariff.complete.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/shariff@3.2.1/dist/shariff.complete.css" rel="stylesheet" />

<aside class="shariff-container">
  <div class="shariff-heading">Share on social media</div>
  <div class="shariff" data-button-style="icon-count" data-lang="de" data-url="https://example.com/" data-twitter-via="twitter-handle" data-title="Site Title" data-mail-subject="mail subject" data-mail-body="mail body" data-mail-url="mailto:" data-services="[&quot;facebook&quot;,&quot;twitter&quot;,&quot;whatsapp&quot;,&quot;telegram&quot;,&quot;threema&quot;,&quot;linkedin&quot;,&quot;xing&quot;,&quot;reddit&quot;,&quot;tumblr&quot;,&quot;pinterest&quot;,&quot;mail&quot;,&quot;print&quot;,&quot;info&quot;]"></div>
</aside>