I want to change background of this 2 link
<a href="http://www.domain.com/index.html">
<a href="http://www.domain.com/index.php">
But condition is I can't add any class or Div id here. I can't touch this this html code also. Just I need to add some css from external. I mean in main style.css sheet. Is is possible ? I have tried with this code a { background:url(../images/image.png);} but problem is it's change the whole link's background of the page. But I want 2 different background of the 2 link. Is is really possible. Anyone can help me please :)
You need to find a way to differentiate the two links, from the code you posted, they only differ in the url they point to, so you could use this:
/* anchors with href attribute ending in index.html */
a[href$='index.html'] { background:url(../images/image.png);}
/* anchors with href attribute ending in index.php */
a[href$='index.php'] { background:url(../images/image2.png);}
You can use CSS attribute selectors to only style links with an href that matches the links you supplied. Example:
a[href="http://www.domain.com/index.html"],
a[href="http://www.domain.com/index.php"]{
background:url(../images/image.png);
}
You could also match all links with an href starting with http://www.domain.com using the following rule
a[href^="http://www.domain.com"]{
background:url(../images/image.png);
}
Please check the support as older browser might ignore attribute selectors.
http://css-tricks.com/attribute-selectors/
Related
It's a price comparison website, with a lot of links and some of them doesn't work.
I recieve their href from my API as "javascript:void(0);" so the buttons do nothing.
Using custom CSS on the page I would like to change the color of the buttons with the
Shop Now
to be grayed out.
Is it possible to change color of a specific href element using custom CSS?
You can use the attribute selector to match the attribute exactly to [href=javascript\:void\(0\)\;], or some variant of that.
You can read more about attribute selectors here: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
a[href=javascript\:void\(0\)\;] {
color: gray;
}
Shop Now (disabled link)
<br>
Shop Now (normal link)
I was wondering how to hide a content, especially a link (see http://i.imgur.com/P3kWHjH.jpg), in a website template and blogger template
Just if a script code is used or an html tag or something like that, thanks
I think you are using some template which is showing its link back. Proper option is to buy that template.
Although if you want to hide specific element you can use selectors.
For Id = #id
for class= .class
for name = [name=name]
and so on, search over internet if you want any other selector.
and the use css or jquery.
CSS
#id {display: none}
Jquery
$("#Id").hide();
If it is html link, You can make the link invisible or display none by using css.
a { display:none }
or
a {visibility:hidden}
I'm a server-end python programmer, and have very few knowledge about css.
Recently I was using gitbook to write our doc-sites.
Everything was OK, except when I'm using anchors in the md files.
The content wrapped in the anchor tag will be show in blue. Which isn't good.
I wanna disable this blue color rendering, then I did some search and find the page was influenced by a file named style.css.
There is only 1 extremely long line in this file. I searched blue in it, nothing.
And then I searched anchor in it. I got:
fa-anchor:before{content:"\f13d"}.
.anchor{position:absolute;top:0;bottom:0;left:0;display:block;padding-right:6px;padding-left:30px;margin-left:-30px}
.anchor:focus{outline:0}
Is this fa-anchor:before{content:"\f13d"}. thing which influenced the anchored content rendering? How to disable its effect?
If it isn't, what key-word should I searching in the css file for anchored contnet rendering?
PS: In this question the anchor means syntaxs in html like <a href='#stash_save'> save </a>
#Zen fa-anchor:before{content:"\f13d"} this code means the generated icon using unicode character won't be part of DOM.
By default when <a>element apply by default color turns into blue color you have to find the class if any applied on <a> tag. otherwise you can change the color using <a href="#" style="color:#535353">. using inline CSS here just for reference.
You can make a specific class for <a> tag.
Hope it solve your problem. check the DEMO also.
add color: red;
to the end of
.anchor{position:absolute;top:0;bottom:0;left:0;display:block;padding-right:6px;padding-left:30px;margin-left:-30px}
and see if it modifies the color.
I'm trying to remove a link completely via CSS and replace it with my own custom message. Is this possible? I found some link disabling via css but the anchor text is still visible, and doesn't allow me to include my own message.
Essentially I want to make it so only logged in members can view links, using a conditional that uses CSS only for non-logged in (guests) users, replacing download links with "Sorry, only members can see this link, register here"
Any ideas?
CSS would be a terrible way to add privacy to your element, as it could be seen in any case by inspecting the source code, or by just disabling CSS.
You have to hide your link server-side.
By the way, just for the sake of completeness, and in case you have to use such a thing for something that actually makes sense doing by CSS, you could go around doing it by adding a class to the html or body in case of non-authenticated users, and then having a CSS rule as such:
html.not-logged-in element {
display: none;
}
Keep in mind that, obviously anybody can still see the element if they want.
Edit
You can't change text with CSS (unless using the content property in a pseudo-element, but nevermind that, as you won't be able to change the href attribute of your link). So, to achieve what you are looking for, you need to have two separate elements. As I said above, add a class to your html or body when the user is authenticated (this is actually a good idea in general), then show and hide your elements conditionally.
So your HTML would look something like this:
<span class="error">Sorry, only members can see this link</span>
I am a secret link
And your CSS would look like this:
.not-logged-in .secret {
display: none;
}
.logged-in .error {
display: none;
}
You can see an example here. In this example I use Javascript to simulate your logging-in process (all I do in Javascript is really just adding the class to the html element).
I have the next two elements on an HTML file:
<a id="a1" href="?cssfile=css-folder/015/styles.css">Style number 015</a>
<div id="a1Preview"></div>
The first one (anchor) is a reference to a CSS that will be loaded dynamically by the page. The second one (div) pretends to be a preview (thumbnail) of the style sheet.
THE PROBLEM IS I need a way to set the div background dynamically from the CSS, something like:
#a1Preview
{
background: url(css-folder/{"015" extracted from the <a> element}/preview.png);
}
Is this possible? Any ideas? Of course the HTML is untouchable. I can only change the CSS.
Thanks in advance.
You could use jQuery to change the css content dynamically. jQuery is a extension to javascript. From there you could then use the system you use to skin, but generally to extract href attributes from tags and change CSS, you can use such a thing.