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.
Related
I'm editing the CSS of a WordPress theme in order to make it fit my needs better. I've come across what, as far as I can tell, retrieves the favicon for different social media sites.
.social-menu li a[href*="flickr.com"]::before { content: '\f16e'; }
I follow that it looks for flickr.com in the url I provide, but what's the content property doing? How could I change the content field to support another site, such as StackOverflow?
Like #Paulie_D said, icon fonts.
The content property is pointing to a Unicode character in a icon font set. The CSS selector is prependnig the icon (via pseudo element) to an anchor element <a> that has a link that contains flickr.com.
This might be a coincidence but the current version of FontAwesome uses the same unicode character \f16e for Flickr.
As far as "supporting other sites, such as StackOverflow," you'll be at the mercy of the icon font. What ever the icon font provides is what you can use.
If the site is indeed using FontAweseom then you'll have quite a few icon options available to you, including StackOverflow \f16c. Here is a list of all the FontAwesome Icons.
Using bootstrap 3 on a drupal site, how can I change the color and weight of links pointing to the currently active page? I tried using a:active but that does not do what I was expecting.
Drupal is adding an "active" class to the links to the current page. This is different than setting the property of an <a> to "active". Use the selector a.active in your CSS instead of a:active. You should be able to inspect the properties in developer tools to ensure the class being added and how to target it.
On the server-side, you can make it with javascript.
The theory
Make a css class with the styles you want (you can name it .nav-active or whatever you want.
Then append the class to an element with a javascript click function, here's an example using jQuery.
$(".nav-item").click(function(){
$(".nav-item").removeClass("nav-active");
$(this).addClass("nav-active");
});
Here's a pen so you can see how it works:
http://codepen.io/edfreitas/pen/PqbWbP
I'm attempting to use the Stylish extension on the Chrome extensions page.
But for some reason it's not working. I've attempted to Google this, but I only get answers about overriding CSS with an extension not overriding the Chrome extension page.
Any ideas why it's not working? Or how I can force it?
I initially tried this to style a specific extension without !important. Then I tried it with !important to force it.
#fjnbnpbmkenffdnngjfgmeleoegfcffe {
display: none !important;
}
And then I tried on a general class, just in case I got the extension id wrong. But still it wouldn't work.
.extension-list-item-wrapper {
display: none !important;
}
Thanks.
All Chrome extensions, including Stylish, cannot modify content on chrome:// URLs.
If you want to apply a style to chrome://extensions/ (actually, chrome://extensions-frame), edit the user stylesheet located at path/to/chrome profile dir/Default/User StyleSheets/Custom.css.
This style sheet is applied to all pages (including the devtools), so make sure that you choose a sufficiently specific / unique CSS selector.
It's easy enough in Chrome Developer Tools to inspect an element and edit an existing CSS rule applying to that element but what if you want to create a whole new style rule?
In my case what I wanted to do was apply the following style rules:
br {display: none}
hr {margin-top: 20px}
font {font-size: 18px}
To the Principles behind the Agile Manifesto so that I could print it out on one A4 sheet of paper directly from the browser.
The official document on Chrome Developer Tools that I've already linked to does have a section on Adding New Rules and Properties but it's out of date and doesn't work like that in the latest version of Chrome.
There is now a dedicated button in the Styles pane for "New Style Rule". It looks like a plus (+):
This will create a new style block which will allow you to define the selector yourself:
This is handy for little amendments on the fly, however it doesn't work well for CSS3 media queries that need extra curly brackets, or for pasting whole sections of CSS in to test.
The solution to that is to first click on the + button to add a new style, then hit enter (or click in the adjacent whitespace).
This will now show a link to the inspector stylesheet called inspector-stylesheet:1
If you click that link, it opens a whole live stylesheet that you can write complex rules in, as well as paste a whole external stylesheet into for testing.
Try using CSS Brush, a chrome plugin to create CSS live. You can create selectors from the page. You can have the complete CSS path or filter it up to make a shorter one. The context-sensitive menu is quite helpful while editing CSS properties live. You can even switch on/off properties or selectors.
How can I style a anchor tag so that once the link is visited it will change to Red and append [Old] to the end of the link.
So how do I combine these two:
a:visited{
color:Red
}
a:after{
content:[Old]
}
This is a privacy issue. As browser can detect element styles, it can therefore know what sites did you visit. An right now JS can detect it for a very large number of links in very short time. So for security reasons modern browser's ability to detect :visited class is severely cutted down.
Read more about it on mozilla's blog: http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/
Citation from Webkit changelog:
http://support.apple.com/kb/HT4196
Impact: A maliciously crafted website may be able to determine which
sites a user has visited
Description: A design issue exists in WebKit's handling of the CSS
:visited pseudo-class. A maliciously crafted website may be able to
determine which sites a user has visited. This update limits the
ability of web pages to style pages based on whether links are
visited.
Similiar questions (have more links):
Google chrome a:visited background image not working
How can I remove the underline of a link in chrome using CSS?