I am trying to build a CSS rule so that links with be styled with a text of white and a blue background when the user hovers over it. I build a rule that reads like:
a:hover {
color: #fff !important;
background-color: #215b87 !important;
}
This works in most cases, but when you have cases like, for example, a Google search, you get HTML like the following:
<a aria-label="Page 5" class="fl" href="/search?q=Test+Search&biw=1832&bih=786&ei=QMDRXb-kEoaT1fAPxtGHqAg&start=40&sa=N&ved=0ahUKEwi_xJTenPLlAhWGSRUIHcboAYU4ChDy0wMIZQ"><span class="csb ch" style="background:url(/images/nav_logo299.png) no-repeat;background-position:-74px 0;width:20px"></span>5</a>
Is there a way in the selector that only the text can be selected for applying the formatting only to the text and ignore any span, img tags and the like?
Regards,
George
You can unset all the style rules of children of the anchor tag with a wildcard selector:
a:hover * {
background-position: unset !important;
width: auto !important;
background: unset !important;
}
a:hover {
color: #fff !important;
background-color: #215b87 !important;
}
<a aria-label="Page 5" class="fl" href="/search?q=Test+Search&biw=1832&bih=786&ei=QMDRXb-kEoaT1fAPxtGHqAg&start=40&sa=N&ved=0ahUKEwi_xJTenPLlAhWGSRUIHcboAYU4ChDy0wMIZQ"><span class="csb ch" style="background:url(/images/nav_logo299.png) no-repeat;background-position:-74px 0;width:20px"></span>5</a>
Related
so I have my menu at the top and I would like the link for "Contact Us" to be white.
I've assigned it a custom class and this is what I added so far:
.cta-button {
border: 2px solid red;
border-radius: 15px;
padding: 5px;
background-color: red;
top: -6px;
color: #ffffff !important;
transition: all .3s 0s;
}
.cta-button a:link, a:visited, a:active {
padding: 0px !important;
color: #ffffff !important;
}
Here it is live:
https://kkat.mavenpromedia.com/
As you can see I added the "important" but the link is still black and pulling from the link styles in the header module itself rather than my added code for that one link.
Thank you
There are 2 issues here:
the color of the link is not set at the <li> level (where you've added the class) but at the <a> level. You need to set the property color under the selector .cta-button > a
The default color is already being set using !important (bad practice) so not only you must use !important as well but you also need to match the level of specificity . The best way to do that is to copy/paste the selector used in the template and add your custom class, like so
.et_pb_menu_0_tb_header.et_pb_menu ul li.cta-button a {
color: white !important;
}
of course you need to do the same for :active, :visited,…
Try adding color like this -
.et_pb_menu_0_tb_header.et_pb_menu ul li.cta-button a {
color: #fff !important;
}
.et_pb_menu_0_tb_header.et_pb_menu ul li.cta-button a:active,
.et_pb_menu_0_tb_header.et_pb_menu ul li.cta-button a:visited{
color: #fff !important;
}
As I can see in the website the link color given already has !important written for it. Now when we have two !important css properties mentioned for same element, then we have to check for the specificity. You can learn about specificity in CSS here : https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Another note: Using too many !important to over-ride CSS property is a bad practice.
I'm trying to find a way to remove the hyperlink styles from linked images. Here's what the hyperlinks look like:
Linked Text Example
Here's what a linked image currently looks like:
Linked Image Example
You can see there's a green line going through the background of the image.
I have both my styles for hyperlinks and for hyperlinked images separately referenced:
/**** HYPERLINK STYLING ******/
a, a:visited, a:focus {
text-decoration:none;
border-bottom: 2px solid #8dc635;
box-shadow: inset 0 -1px 0 #8dc635;
color: rgba(35, 35, 35, 0.8);
transition: 0.65s;
}
a:hover {
background: #8dc635;
}
/**** Don't style images with border / box-shadow ***/
a img {
border-bottom: none !important;
box-shadow: none !important;
outline : none !important;
background:transparent !important;
}
a img:hover {
border-bottom: none !important;
box-shadow: none !important;
outline : none !important;
background:transparent !important;
}
I've even tried using the !important function (as much as I'd rather not), and tried this:
/******** No color on / in images *********************/
a[href$=".png"] {
background-color: transparent !important;
border-bottom: none !important;
box-shadow: none !important;
}
a[href$=".png"]:hover{
background-color: transparent !important;
border-bottom: none;
box-shadow: none;
}
Nothing has worked. . . I'd rather not have to go in and add a class to every image on the website and I can't think how to make the selector for text hyperlinks more specific without excluding links accidentally. Ideas?
You're probably using the wrong selectors. Take the following example:
home
<a href="contact.html">
<img src="me.png" />
</a>
Now let's see how your CSS applies to them.
The selector a applies to all <a> elements, which in this case includes both the text link and the image link.
The selector a img applies to all <img> elements that are inside <a> elements.
Your CSS is affecting the <img> element and trying to remove its border, outline and shadow; however, the image itself never had any. The decorations you see come from the <a> element that's wrapping the <img> element.
Currently there is no CSS selector that selects elements which have children of a certain type. Here's my suggestion:
a:not(.image-link) {
text-decoration:none;
border-bottom: 2px solid #8dc635;
box-shadow: inset 0 -1px 0 #8dc635;
color: rgba(35, 35, 35, 0.8);
transition: 0.65s;
}
home
<a href="contact.html" class="image-link">
<img src="me.png" />
</a>
The :not() pseudoclass negates the selector inside its parentheses, so a:not(.image-link) will select all <a> elements that do not have the class image-link (in this case, the first one), and apply the decorations to those. Unfortunately, this does leave you with a bit of extra work and responsibility, because you have to make sure all your image links are given the image-link class.
I suppose your problem is an underline below the images? (you didn't really describe your problem...)
In that case, border-bottom is the wrong property, it has to be text-decoration: none
I have the below code which is in a document that I don't control. I only have the option to upload one custom CSS file for overrides. How can I accomplish this? It is to get rid of the vendor link on our site. I am good with CSS, but they have it set up tricky.
<div style="display:block !important;text-align: center !important; padding: 15px; visibility:visible !important; opacity:1 !important;
height:auto !important; width:auto !important; op:auto !important; bottom:auto!important; left:auto !important; right:auto !important;">
<a href="http://vendorsite.com" target="_blank" style="display:inline !important; font-size: 11px !important;
visibility:visible !important; position:relative !important; opacity:1 !important; height:auto !important; width:auto !important; top:auto !important; bottom:auto!important; left:auto !important; right:auto !important;">
powered by Vendor Site
</a>
</div>
No, it is not possible with pure CSS, as the !importants already declared in the HTML would override any CSS, unless there is a parent object not displayed above, that you can override.
If the !important tags were not there, the following would work:
Does it have any parent elements? You don't have any attributes to mess with on the parent div, so if this code is this code alone, you can try:
div { display: none; }
But that's a terrible idea and will hide all divs.
To apply css, you either name a classname,
<div class='parent-div'></div>
.parent-div { display: none; }
An id attribute:
<div id='parent-div'></div>
#parent-div { display: none; }
Or any other attribute:
<div animal='dog'></div>
div[animal='dog'] {display: none; }
You could hide the child a tag:
a[href="http://vendorsite.com"] { display: none; }
Try:
div[style*="!important"] {
max-height: 0;
max-width: 0;
overflow:hidden;
padding: 0!important;
}
http://jsbin.com/fasid/11/
You can try something like this:
div[style*="!important"] {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
/* And to make sure... */
div[style*="!important"] a {
color: transparent;
}
The key is to find out which other attributes you can use to hide this element. Elements that have not been marked with !important on the html. Play around with text-indent for example.
This is a tricky question, you don't have control over the code, nor have any selectors to use, and to make it worse there are a bunch of !important inline rules.
You could make it "vanish" though, the link will still be there but nobody will see it nor click on it, try something like this:
// Get the vendor's link
a[href="http://vendorsite.com"] {
// Reset mouse cursor
cursor: default;
// Set color to match page background background
color: white;
// Remove pointer events to make it appear as plain text
pointer-events: none;
// Set background to match page background
background: white;
}
// Set selection color to match page background color
a[href="http://vendorsite.com"]::selection {
background: white;
}
// Mozilla selector (optional)
a[href="http://vendorsite.com"]::-moz-selection {
background: white;
}
Nasty but does the job. I've made a CodePen to show how it works: Hide with CSS
I hope this helps, cheers.
Weebly help center can't help me on this simple one and they recommended the forums, google and w3schools. I wan't to style my <ul></ul> in weebly by adding a class to it. How do I do this?
So, Weebly's support documentation says your backend will have a tab to manage your CSS and HTML.
Option one
1 - Go to the HTML tab and add a class to your ul.
<ul class="myClass"></ul>
2 - Go to the CSS tab and at the bottom of the main css file write in your new class style
.myClass { /* whatever */}
By placing the class at the bottom of your CSS, these class styles will override the current styles if they are different. You may need to cancel out certain things like margin or padding. For instance:
ul { margin: 100px; }
.myClass { margin: 0; }
.myClass will have a margin of 0 as the uls defined style has been overridden.
Option two
Wrap your editable content in a div with a class or id and target the ul within that div. The div itself can remain unstyled.
Example
HTML
<div id="editableContent">
<ul>
<li>List Item</li>
</ul>
</div>
CSS
#editableContent ul {
color: #F00;
}
Every list item within div#editableContent will have red text. The editor doesn't need any HTML knowledge and styles will be consistent.
I solved it, I override the standard theme design rather than create my own.
These are the CSS parts I modified: #main-wrap .paragraph ul and #main-wrap .paragraph ol
#main-wrap .paragraph ul {
padding-left:5px !important;
}
#main-wrap .paragraph ul li {
list-style: none !important;
background: url(red-arrow.png) no-repeat 0px 0px;
color: #000000;
padding-left:30px !important;
}
#main-wrap .paragraph ol li {
list-style: none !important;
background: url(red-bullet.png) no-repeat 0px 6px;
color: #000000;
padding-left:20px !important;
}
On hover, my text links have underlines. This is the default in Bootstrap.
I want to keep this, unless the link is within a certain div.
The code I have tried (and several variations) doesn't work.
The HTML:
<div class="wall-entry span5">
<a href="">
<img src="http://www.placehold.it/290x163" />
<div class="wall-address">
<p>Burgundy Street</p>
<p>New Orleans, LA</p>
<p>USA</p>
</div>
</a>
</div>
My CSS:
.wall-entry {
background-color: #black;
position: relative;
img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
div {
position: absolute;
left: 10px;
bottom: 10px;
p {
line-height: 18px;
margin: 0;
font-family: Neuzit Heavy;
font-size: 18px;
color: white;
text-decoration: none;
}
}
}
div.wall-entry:hover img {
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
a div.wall-entry {text-decoration: none;}
A quick note: I have tested a {text-decoration: none;}, this does work. However, I don't want to change everything. Just the links in this specific case.
put the font-family in quotes for fonts that involve multiple words, first of all:
font-family: "Neuzit Heavy", sans-serif;
then beneath a put .wall-entry a:hover { text-decoration: none; }
You have the order switched around. The item you're targeting should be to the right. For example,
.wrapper .header a in english means "Target all anchor links that are inside of .header, that are inside of .wrapper"
The problem is actually a caused by Twitter Bootstrap's CSS file, not your code.
Twitter Bootstrap's CSS file (bootstrap.min.css was the culprit on my project) gives links underlines multiple times. It gives them an underline when they're hovered over, when they're focused on, and it even makes them blue.
In my project, I specifically assigned my own colors to the text that was inside anchor tags, and the browser rendered their colors correctly, just as I assigned them, however, since the text was wrapped in an anchor tag, the blue underline from the Twitter Bootstrap stylesheet still appeared below all my styled text.
My solution: open bootstrap.min.css (or whatever your Bootstrap stylesheet is called) and search for the term 'underline', and whenever you find 'text-decoration: underline' inside an anchor tag selector, like this:
a:hover, a:focus {
color: #2a6496;
text-decoration: underline;
}
or this:
a, a:visited {
text-decoration: underline;
}
you should go ahead and remove the color and text-decoration rules.
That solved my problem.
This won't work
a div.wall-entry {text-decoration: none;} // Inside 'a' div with class wall-entry
but this will work.
div.wall-entry a{text-decoration: none;} // Inside div with class wall-entry 'a'
because an a tag has text-decoration.
If your link is inside div tags, then you can select your link this way:
div > a:hover {
text-decoration:none;
}
It works fine, even with boostrap used.