I was looking here at CSS :active Selector.
The :active selector styles links to
active pages
That got me thinking, what the heck is an 'active page' in HTML/CSS terminology...
At this point I went to the w3docs Section : 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus.
The :active pseudo-class applies while
an element is being activated by the
user. For example, between the times
the user presses the mouse button and
releases it.
So I used one of the w3shools try it pages and hack together an example, substituting the following code, which you can just cut & paste and try.
<html>
<head>
<style type="text/css">
:focus,:active
{
outline-offset: 10px;
outline: solid;
}
</style>
</head>
<body>
<p>Click the links to see the background color become yellow:</p>
w3schools.com
wikipedia.org
<button type="button">Click Me!</button>
<form>
<input type="text"/>
</form>
</body>
</html>
The form field works for :focus. But the button or links don't work for :active.
Why is that? Is there something about 'active page' I'm not understanding that w3schools talked about.
I saw this nice tip when Googling for it, but I don't think it's related.
There is no concept of "active page" in CSS. In fact, the SitePoint Reference debunks this by saying:
The pseudo-class does not signify a link to the active, or current, page—that’s a common misconception among CSS beginners.
What the spec says is right: :active simply styles elements that are activated, e.g. clicked (as in the example given) or in some other way triggered such that the browser starts navigating to the link's target.
Note that it doesn't just apply to <a> elements; it may apply to any non-form-input element that's clicked. For instance, you can do this:
p:active {
color: red;
}
And any paragraph you click will flash its text red.
Note however that the exact definition and implementation is left up to the browser, but in general, you can rely on <a> elements having an activated state.
:active is the style given to an element (a or a button, for example) when the mouse is held down over it. You might have seen it visible on some sites when you click a styled button; when you actually click the button, it might change. This is the :active pseudo-class.
I've always used :active for links. The split second before the browser takes you to the page you just clicked on, the text would change to the color you called in a:active{ ... }
Example:
a:active { color:pink; font-weight:bold; }
Most browsers support it, but it's really not worth your time to style it. Back in the day of 56k dial up it was a nice thing to have to visually show that the link the user clicked was being loaded.
Related
I'm trying to write script on css that display a div on click and hide another div at same time.
CSS:
.box{
display:none
}
.box:target{
display:block;
}
You can't, because CSS doesn't listen for client-side clicks. The closest you'll get is :active, which registers when the mouse button is held down.
You can, however, do this with the Checkbox Hack: http://tympanus.net/codrops/2012/12/17/css-click-events/
1 Wrap an element in a checkbox
2 Use CSS like this: input[type=checkbox]:checked ~ #IDOfElementWrappedInCheckbox
And, also on the link,
The :target Way:
'There is another way, well known to “fake” a click event with CSS, using the :target pseudo-class. This pseudo-class is quite similar to the :hover one in the way that it matches only a specific scenario.
The special event for the :target pseudo-class depends on what we call a “fragment identifier”. To put it simple, this pseudo-class refers to a hashtag you can see sometimes at the end of the URL. So it matches when the hashtag and the ID of an element are the same.
The HTML
Click me!
<p id="id" class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>
The CSS
.to-be-changed {
color: black;
}
.to-be-changed:target {
color: red;
}
Basically, when clicking on the link (href="#id"), the URL changes and you go to the anchor #id in the page. In this very moment, the element having this id can be targeted with the :target pseudo-class.'
'and the :focus way (also on the link):
THE :FOCUS WAY
Let’s continue with another way using a pseudo-class; the :focus one this time. It’s pretty much the same idea, except, it doesn’t expect a URL change. It relies on the user’s focus on a particular element.
When you’re on a web page, you can press the tab key to navigate through various elements on the page. It’s particularly useful when filling forms, to go from one field to another without having to use the mouse. It’s also used by blind or visually impaired people to navigate through a site.
What’s important to note is that some elements can be focused, like links, inputs and such, and some other can’t, like paragraphs, divisions, and plenty others. Actually they can, but you’ll need to add the tabindex attribute with a numeric value.
How it works
The HTML
<span tabindex="0">Click me!</span>
<p class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>
The CSS
span:focus ~ .to-be-changed {
color: red;
}
So, when you click on the span or reach it with the tab key, it becomes focused and matches the :focus pseudo-class. The adjacent sibling selector does the rest. Pretty easy, right? If you don’t want to mess with the tabindex for any reason, you can simply use a link with a # href. It will work like a charm as well.'
The last thing on the link,
'
The Transition Hack
This is probably the most wicked way to handle a click event in CSS. Seriously guys, this is madness. This technique comes from Joel Besada and has always been one of my favorite CSS tricks.
The idea is to store a CSS style in a CSS transition. Yeah, you read it right, a CSS transition. Actually, the idea is pretty simple. It relies on applying a pseudo-infinite delay to a change in order to prevent it to get back to the default value. It may sound complicated but it’s fairly easy, trust me. Please have a look at the code.
How it works
The HTML
<span>Click me!</span>
<p class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>
The CSS
.to-be-changed {
transition: all 0s 9999999s;
}
span:active ~ .to-be-changed {
transition: all 0s;
color: red;
}
The idea behind the first declaration is to delay any change to approximately 116 days to make sure the changes will stay once they’ve been set. It is not infinite, but kind of, right?
But we don’t want to apply the changes 116 days after clicking, we want it to be set immediately! So the idea is to override the delay during the click (:active pseudo-class) to apply the changes. Then when the click will be released, the old transition property will kick back in, setting back the delay to 9999999s, preventing the changes to going back to the default state.'
i turn my comment into a short answer.
For youger browser you might do it in CSS.
.
shy , :focus ~ .show {
display:none;
}
:focus ~ .shy {
display:block;
}
:focus { /* toggle hide/show) just loosing focus on click */
pointer-events:none;
}
<p tabindex="0">click to hide/show (toggle) next content</p>
<div class="show"> shown if no click</div>
<div class="shy">shown if clicked</div>
http://codepen.io/gc-nomade/pen/oxybl
Is there a way to do this in CSS:
span{color:black;}
input[type=file]:focus + span{color:blue;}
It works with a input[type=text], it works without ":focus", but it doesn't seem to work like this...
Thank you in advance!
A possible work around for Firefox is using :focus-within on their parent.
Here is an example:
.file-label > input[type="file"] {
width: 0;
}
.file-label:focus-within > span {
color: blue;
}
<label class="file-label">
<input type="file" />
<span>Select File</span>
</label>
Short Answer, No (not cross browser)
This seems to work in Internet Explorer, but not in Firefox. There are numerous bugs over the years being reported about Firefox in conjunction with the input[type=file] and :focus (or the javascript event) combination. This appears to be one also.
Notice in this fiddle example, if you click on the text next to the "Browse" button, it functions to change the color on the span, but not if you click on the button. As you can see by this fiddle, it appears the "Browse" button element ends up being "inside" the input, and so it apparently is acting as a "child" element of the input as far as :focus is concerned (:focus does not propagate up to parent elements). What is particularly buggy, however, is that :active works (which typically is like :focus, and does not propagate to parents), as seen in this fiddle.
All anchor links except for one are getting background color changed on focus, except for one.
HTML
<a id="login-as-guest">Cancel and browse as guest</a>
CSS
#login-as-guest a:focus{
background-color: yellow;
}
Any ideas?
To use focus you need to assign a tabindex to the element as it is not an input. Otherwise you could use active. Also your code is not correct. Currently it is looking for an a element within an element with that ID.
The correct way would be
a#login-as-guest:focus{ background-color: yellow; }
Both ways:
DEMO http://jsfiddle.net/kevinPHPkevin/t2hbS/
An anchor tag without a href attribute can not receive focus (at least in Chrome, but I think it is standard behaviour). Also you selector is incorrect, you are trying to select an a that is a descendant of #login-as-guest. The selector should be a#login-as-guest:focus, which will select a a with an id of #login-as-guest that has focus.
Have a look at the updated fiddle: http://jsfiddle.net/VKvBy/1/
I want to set the colour for the active link. My links have the inner span like the following.
<span>Home</span>
I have style it like the following but it did not work.
a:active span{
color:yellow;
}
What css rule should I write for this to work.
Thanks in advance.
The correct CSS is as follows. You should replace the = with a :.
a:active span {
color: yellow;
}
Edit
This is a response to the comment
I want to set the color of the link to yellow when index.php display
This is not what :active does. This text is taken from w3.org. ( http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes )
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.
If you want to style the page that is currently being viewed you have to do that server side.
This should work, its valid, but maybe you expect it to do something else then what it does. :active is not the selector for the menu item you selected or something, like the menu item you selected is yellow on the page after as a #current link or something.
Something else:
Note: :active MUST come after :hover (if present) in the CSS definition in order to be effective!
Here is my code:
.blue {
color:#6E99E1;
font-size:9px;
}
<span class="blue">::CLICK HERE:: to view our New Equipment inventory. <br /><br /></span>
I've somehow triggered something that prevented the <a> tag from inheriting color of parent <span>.
Just an addendum to the other responses, if you want your <a> tags to inherit the colour from their parent you can use
a {color: inherit; }
By default an anchor tag does not inherit attributes like color if an href attribute is present.
Check out the difference between these two on a page:
<span style=color:green>test</span>
<span style=color:green><a>test</a></span>
The following link is to the w3 c:
http://www.w3.org/TR/html401/struct/links.html#h-12.2
User agents generally render links in
such a way as to make them obvious to
users (underlining, reverse video,
etc.). The exact rendering depends on
the user agent. Rendering may vary
according to whether the user has
already visited the link or not.
.....
Usually, the contents of A are not
rendered in any special way when A
defines an anchor only.
This is an answer to the question as well as a reply to Kevin's answer and its comments.
Anchor tags do inherit color, linked or not. The only reason they don't in practice is because they already have their color set in the browser's default stylesheet. The same can be said for the underlining of the link (which, I presume, you didn't notice, because you actually want it or had already changed it yourself).
In Firefox, you can see this in Firebug if you toggle "Show User Agent CSS" (or you can have a look at Firefox's internal stylesheets directly. You can see the browser's defaults in Webkit's Web Inspector and Opera's Dragonfly as well. I don't think you can in IE.
I don't know of any site which has an overview of all browser's defaults. CSS2's "informative" HTML4 stylesheet as well as the YUI reset stylesheet would be a good starting point, but neither of them mention any (link) colors (the HTML4 stylesheet does mention the underline).
To find out which properties are inherited in general, you can use the CSS2 reference property index table (see the "Inherited?" column). SitePoint also mentions it in its CSS reference.
So if you want to make sure your link inherits its color from its parent instead of from the browser's default stylesheet, you would ideally do something like this:
.blue a:link {
color: inherit;
}
You could set it for the different pseudo-classes separately (so :visited, :hover and :active as well), or for the a tag altogether.
However, IE6 and IE7 don't support the inherit keyword, so if you want to support them too, you'd have to set the color explicitly.
I think a doesn't inherit color by default. (certainly it has always worked that way on my sites). Why not change
.blue {
color:#6E99E1;
font-size:9px;
}
to
.blue, .blue a{
color:#6E99E1;
font-size:9px;
}
Firebug will show you exactly which style rules are applied to which elements. It's perfect for this.
(A non-CSS possibility: Do you have link/alink/vlink attributes on your <body> tag?)
Edit: Duh, silly me, the others have it right - <a href> doesn't inherit colour. But Firebug is still a good tool for this kind of problem (even if I'm not. 8-)
In addition to firebug (which should be your first port of call), the IE developer toolbar will also tell you where a given style is sourced from, just in case IE - shock, horror - should be different.
You need to explicitly set the color of the links to override the default blue color.
You are likely seeing the a:visited colouring. Try this:
.blue, .blue:link, .blue:visited {
color:#6E99E1;
font-size:9px;
}