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 >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 >
<a href="https://www.facebook.com/sharer/sharer.php?u=https://example.com/" data-rel="popup" rel="nofollow" title="Bei Facebook teilen" role="button" aria-label="Bei Facebook teilen">
<span ></span>
<span >12k</span>
</a>
</li>
And this is how an Shariff button without a share count looks like:
<li >
<a href="https://www.facebook.com/sharer/sharer.php?u=https://example.com/" data-rel="popup" rel="nofollow" title="Bei Facebook teilen" role="button" aria-label="Bei Facebook teilen">
<span ></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 >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 >
<div >Share on social media</div>
<div 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="["facebook","twitter","whatsapp","telegram","threema","linkedin","xing","reddit","tumblr","pinterest","mail","print","info"]"></div>
</aside>CodePudding user response：
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 >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 >
<div >Share on social media</div>
<div 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="["facebook","twitter","whatsapp","telegram","threema","linkedin","xing","reddit","tumblr","pinterest","mail","print","info"]"></div>
</aside>CodePudding user response：
Well you could do
.shariff-button:not(:has(.share_count)){}
CodePudding user response：
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