On page 1 there is a link which takes you to a certain point on page 2
MY TEXT HERE
This takes you straight to the anchor (position) on page 2 with the following code
<a name="position"> MORE TEXT HERE</a>
Now, my question is how can I change the text and background color when #position is in the URL?
For example: www.domainname.com/page2.html#position
This is the CSS I used but doesn't work:
#position {
color:#ff0000;
background-color:#f5f36e;
}
Here is a example http://jsfiddle.net/jvtcj/2/
Thank you in advance!
Use the :target selector:
a:target, /* or simply */
:target {
/* CSS to style the focused/target element */
}
You'd be better off using the id of a particular element to receive the focus, since named-anchors seem to have been dropped, if not deprecated entirely.
References:
CSS selectors, level 3.
You can use the CSS3 :target peseudo selector: http://blog.teamtreehouse.com/stay-on-target
Also, don't use the old myth <a name="destination">...</a>, all you need is to id the section you want to jump to, e.g. <section id="destination">...</section>
MY TEXT HERE
...
<a name="position2" id="pos2"> MORE TEXT HERE</a>
... in css:
a[name=position2]:target{
background-color:green;
}
Try using
<a name="position" class="position"> MORE TEXT HERE</a>
And in CSS use
.position {
color:#ff0000;
background-color:#f5f36e;
}
http://jsfiddle.net/jvtcj/4/
Add an id to the tag.
You can see how here using your example
http://jsfiddle.net/h5NZh/
<a id="position" href="#position">MY TEXT HERE</a>
Related
I've the following example HTML and looking to extract the text only from the a tag excluding the inner span tag.
<a href="#" class="rate">
<span>For Sale </span>
$450.00
</a>
Is there a way I can extract the $450 only using CSS Selectors. I tried to use .rate and .rate:not(span) but none of these working
**I'm looking for native CSS solutions only - Like using :not or some other. **
You can use Node.nextSibling to next sibling text of element.
var text = document.querySelector(".rate > span").nextSibling.textContent.trim();
console.log(text);
<a href="#" class="rate">
<span>For Sale </span>
$450.00
</a>
Edit:
If you want to use CSS, you can store price value in data-* attribute of .rate and use :after pseudo-elements in it. You can use attribute value of parent in content property of pseudo-elements using CSS attr.
.rate:after {
content: attr(data-price);
color: red;
}
<a href="#" class="rate" data-price="$450.00">
<span>For Sale </span>
</a>
Using css you can only hide the element so that its text gets hide.
for ex:
a.rate span {
display : none;
}
If you wan to achieve to get text only $450, You should go with Javascript or jquery.
I have a mailto link that I wish to make a separate color than the rest of the links show on the page. Is this possible?
Im guessing it would look something like:
<a href="mailto:someone#something.com" style="a: color: White">
but that doesn't seem to work.
You don't have to call inline styles or need to declare id's or classes for selecting mailto links, you can use att-val selector like
a[href^='mailto:'] {
color: yellow;
}
Demo
Change:
style="a: color: White"
to
style="color: white"
Since you're already changing the CSS inline, you don't need a selector. If you were declaring the CSS separately, then you'd use the syntax a{color:white}.
Give an ID to your A then style it.
<a href="mailto:someone#something.com" id="mymailto">
Then in your CSS:
#mymailto:link {
color: white;
}
You may try like this
<a href="mailto:someone#something.com" style="color:#fff">
I'm trying to apply background-color when a user mouse hover the element whose class name is "reMode_hover".
But I do not want to change color if the element also has "reMode_selected"
Note: I can only use CSS not javascript because I'm working within some sort of limited environment.
To clarify, my goal is to color the first element on hover but not the second element.
HTML
<a href="" title="Design" class="reMode_design reMode_hover">
<span>Design</span>
</a>
<a href="" title="Design"
class="reMode_design reMode_hover reMode_selected">
<span>Design</span>
</a>
I tried below hoping the first definition would work but it is not. What am I doing wrong?
CSS
/* do not apply background-color so leave this empty */
.reMode_selected .reMode_hover:hover
{
}
.reMode_hover:hover
{
background-color: #f0ac00;
}
One way is to use the multiple class selector (no space as that is the descendant selector):
.reMode_hover:not(.reMode_selected):hover
{
background-color: #f0ac00;
}
<a href="" title="Design" class="reMode_design reMode_hover">
<span>Design</span>
</a>
<a href="" title="Design"
class="reMode_design reMode_hover reMode_selected">
<span>Design</span>
</a>
In modern browsers you can do:
.reMode_hover:not(.reMode_selected):hover{}
Consult http://caniuse.com/css-sel3 for compatibility information.
Method 1
The problem with your code is that you are selecting the .remode_hover that is a descendant of .remode_selected. So the first part of getting your code to work correctly is by removing that space
.reMode_selected.reMode_hover:hover
Then, in order to get the style to not work, you have to override the style set by the :hover. In other words, you need to counter the background-color property. So the final code will be
.reMode_selected.reMode_hover:hover {
background-color:inherit;
}
.reMode_hover:hover {
background-color: #f0ac00;
}
Fiddle
Method 2
An alternative method would be to use :not(), as stated by others. This will return any element that doesn't have the class or property stated inside the parenthesis. In this case, you would put .remode_selected in there. This will target all elements that don't have a class of .remode_selected
Fiddle
However, I would not recommend this method, because of the fact that it was introduced in CSS3, so browser support is not ideal.
Method 3
A third method would be to use jQuery. You can target the .not() selector, which would be similar to using :not() in CSS, but with much better browser support
Fiddle
I am defining three menu buttons
<div id="buttonscontainer">
<ul>
<li><a unselectable="on" value="insert" onClick="insertText('[BEFORE]', '[AFTER]'); return false;">Bold</a></li>
<li><a unselectable="on" value="insert" onClick="insertText('[BEFORE]', '[AFTER]'); return false;">Italic</a></li>
<li><a unselectable="on" value="insert" onClick="insertText('[BEFORE]', '[AFTER]'); return false;">Image</a></li>
</ul>
</div>
I use <a> tag to create simple text button with OnClick jscript.
The problem is that when user hovers over the link the cursors is changed to edit (like editbox cursor)
Why is that behaviuor? Or do I have to look in CSS for particular attribute
You either need to add the href attribute to your anchor or in CSS you can add:
#buttonscontainer a:hover
{
cursor: pointer;
}
Either of those will change the cursor to the pointer :)
jsFiddle example.
I think the problem is that you need to add a href attribute to your links:
<a .. href="#">Bold</a>
Or, you could add this CSS:
a {
cursor: pointer
}
but that seems a little silly. Just add the href, and fix the styling of the links (demo).
I think the problem is that your tag is missing required atribute href.
Try putting in empty href=""
I have a button in my web page with class "btnNewL1" . my CSS class is as below
.btnNewL1
{
background: url(../images/btnbgnew.png);
border:1px solid #818181;
padding-left:3px;
padding-right:3px;
font-family:Arial;
font-size:12px;
padding-top:1px;
padding-bottom:1px;
}
When user place the mouse over the button,i want to chnage the appearance like change of bg image and chnage of border color etc... . I want to do this will CSS itself. and it should be be supported by IE6 IE 7 ,Firefox
How to do this ?
Unfortunately :hover pseudo selector is not supported by IE6 on any other element than <a>.
If you wish to implement :hover on IE6, you can:
a) If possible, change your <input
class="btnNewL1" type="button"
value="click me!" /> to <a
class="btnNewL1" href="#">click
me!</a>. You will need to add display:block, and few other CSS rules. This will simply 'simulate' button using <a> tag. This is not perfect solution because sometimes you must use proper <input> (i.e. when using asp.net controls).
b) Use javascript to make workaround, example in jQuery is:
<script type="text/javascript">
$(document).ready(function(){
$("input.btnNewL1").mouseover(function(){
$(this).toggleClass('buttonSelected');
}).mouseout(function(){
$(this).toggleClass('buttonSelected');
});
});
</script>
<input type="button" value="click me!" class="btnNewL1" />
c) Wrap your code like that:
<a class="acont" href="#"><input type="button" value="click me!" /></a>
So you will be able to use CSS:
.acont:hover input { background:red; }
This will do the job, but as far I remember this is not valid HTML (<input> should not be placed inside <a> tag)
Which one you gonna choose - up to you. Main point from this post is, again: :hover pseudo selector can be used on IE6 only on anchor elements
Have a look at pseudo-classes
.btnNewL1:hover{
background: url(../images/different.png);
}
This SO question "How to use ‘hover’ in CSS" might help you.
I think what you are looking for the :hover class.
Here is an example at w3schools.
The example is for color, but I believe you can do this with other styles.
You want the :hover pseudo-class. Use .btnNewL1:hover { ... } for your mouse-over styles.
See also the CSS2 spec for more info on pseudo-classes.
Combine the tw images into one and then change the background position.
CSS sprite
CSS Sprites: Image Slicing’s Kiss of Death