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/
Related
I have a menu item that I need to hide. It is not logical to go through all the files and remove it so I was looking for a way to hide it with CSS. Here is the code I have:
<li>
<a tabindex="-1" href="index.php?option=com_eshop&view=countries">
<span class="icon-flag"></span>
Countries
</a>
</li>
I found a few possible solutions but nothing seems to work. Here is the one that should work but I must be doing something wrong:
a[href="index.php?option=com_eshop&view=countries"]{ display:none; }
That attribute selector should work given the HTML you provided. See this example.
There are several reasons why it may not be working. Here are two possibilities:
The selector is being overwritten by another selector with a higher specificity. If this is the case, you could increase the specificity of your selector by adding the parent element selectors to the selector. Since it's a dropdown menu, it's likely there is a more specific selector setting something like display: block.
It's also possible that's not the href value on your site. If this is the case, you could try using the attribute selector [attr*=value]. This will select all elements that contain instances of that value string.
a[href*="index.php?option=com_eshop&view=countries"] {
display:none;
}
Use the nth-child(item number) css property and hide it because you also want to hide the li because if you only hide link then there may be whitespace due to li
I want to do this:
.class
{
color: green;
}
On the highlighted item.
Please note, I cannot use the class ".k-in" because it's used elsewhere in this DIV. Also note that the children items are also a span element so I can't use span either.
I want to select ALL of the items that are structured the same as the highlighted item (notice that there are 4 "parent" list items in this DOM so I need to run a color green on each of the parents.
Can anyone give me a hand?
#relationshipsTree>ul>li>div>span{
color: green;
}
Right Click copy css path when clicking on an element in firebug will give you what you're looking for.
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!
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.
I have got a CSS division called home which has got certain attributes with an action for hover for the anchor tags inside the home division like this:
#home a:hover
{
background-image:url(images/template_03_1.png);
position:relative;
top:3.5em;
left:0.5em;
}
Now, what I want to do is access the 'home' id's attributes inside the block defined above so that I change the properties of the home division whenever some one hovers on an anchor tag inside the home division. I know this is very easily possible in JavaScript but is this possible using CSS only.
Thanks,
niting
Am I correct if I assume you want the following?
#home a:hover
{
#home.background-color: #fff;
}
If so, then: no. Not without JavaScript and not even with CSS3. You cannot edit an others rule's properties.
Recursion is also not possible, as you always style that what was selected last in the rule, so typing #home a:hover styles the anchor if hovered, #home .class styles anything that has class="class" and is a decendant of #home.
In other words, recursion with CSS-selectors is not possible (or I don't know about it...)
You could try setting the hover on #home itself, but that won't work in IE(6). Unfortunately, you can't style a parent based on a child's pseudo-class. Javascript is great for this.
If you have exactly one <A> in your <DIV> then maybe you can style your <A> to have the same dimensions like the surrounding <DIV> and give the <A> the desired background.