The :not pseudo-class is used to append an svg icon to all linked elements in a website which link to external sites. I need help disabling the :not pseudo-class declaration on linked social icons generated by a page builder.
The website is comprised of my own HTML, CSS and script for the homepage and the rest of the website is generated by Elementor; a WordPress page builder. The page builder is configured to use my style.css file which contains the :not pseudo-class implementation and I can target whatever the page builder generates using script.
The page builder generates the HTML and CSS for linked social icons. When the page is constructed in the browser the :not pseudo-class appends the svg icon to the linked social icons generated by the page builder and the social icons are visually mangled by the appended svg icon.
Everybody knows Facebook and LinkedIn are external sites and the social icon links do not need the svg iconography which I've been unable to disable hence coming here for help.
I can successfully target the social icons in the page using my CSS and/or my jQuery but the CSS and jQuery I have tried has been unsuccessful to selectivley disable the :not pseudo class.
I have used !important which causes the social icon(s) to disappear in the page.
I have tried to use another transparent svg icon to replace the external link icon but that has not worked out likely because I may be using incorrect CSS.
I've searched stackoverflow and read similar questions as well as having searched the WWW and have not discovered a way to selectively apply the CSS :not pseudo-class declaration.
Noting the proxy href values this snippet is the functioning :not pseudo-class as declared in my style.css file:
/* functional as expected */
a[href ^="https"]:not([href *="the-deployed-website-tld"]):not([href *="the-local-server-tld"]) {
background: transparent url(assets/svg/layout/svg_link-external-11px.svg) no-repeat center right;
padding-right: 16px; }
CSS and the use of attribute selectors can change properties of the social icons but all iterations I have tried have been unsuccessful when attempting to disable or hack the display of the svg icon out of existence:
/* non-functional */
li.eael-team-member-social-link > a[href ^="https://facebook.com"] {
background: none; }
// non-functional
$( "li.eael-team-member-social-link > a[href ^='https://facebook.com']" ).css( "background", "none" );
Can the :not pseudo-class be selectively disabled such that it need not affect the social icons generated by the page builder while still serving its purpose to indicate links in the page go to external websites? If so how?
Sometimes I (we) overthink a problem and the solution is staring me (us) in the face. I realized that this afternoon and now provide an answer to my own question.
The :not pseudo-class supports chaining as my snippet example above shows so what I realized is all one needs to do to prevent the external icons from being appended to social icons linking to external sites (or any other external site) is add those TLDs to the chain as follows:
a[href ^="https"]:not([href *="the-deployed-website-tld"]):not([href *="the-local-server-tld"]):not([href *="facebook.com"]):not([href *="linkedin.com"])
NOTE: I googled and checked the FAQ about marking my own answer to my own question. When my answer was submitted a notification told me I can return tomorrow to mark it as a correct answer. Which I will do.