Question 59541 in Telegram API Question posted in
A comprehensive official documentation can be found here.

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

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/[email protected]/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/[email protected]/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>
Tags:

3

Answers


  1. 0

    Well you could do

    .shariff-button:not(:has(.share_count)){}
    Login or Signup to reply.
  2. 0

    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/[email protected]/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/[email protected]/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>
    Login or Signup to reply.
  3. 0

    Did you try to use a system like this:
    .shariff-button:not(.share_count_div) {}

    so just if it has also the class share_count_div it will run the style snippet

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search