In simple term i would like to achieve something we have on stack overflow top navigator where the color of the button which is active is different BUT using CSS only NOT JavaScript ?
But the a:active does not seems to be working as expected.
I saw some very common examples where this is done by assigning the class to active element in the markup from server or client side. Is that possible only using the CSS ?
<HTML>
<HEAD>
<TITLE>Its Nav</TITLE>
<STYLE type="text/css">
div {
width:200;
}
ul {
list-style:none;
}
ul li a {
padding:2 4 2 4;
border:1px solid blue;
display:block;
text-decoration:none;
}
ul li a:active {
color:green;
}
ul li a:hover {
color:red;
}
ul li a:link {
color:gray;
}
</STYLE>
</HEAD>
<BODY>
<div>
<ul>
<li><a href="#" >link one</a></li>
<li><a href="#" >link two</a></li>
<li><a href="#" >link three</a></li>
<li><a href="#" >link four</a></li>
<li><a href="#" >link five</a></li>
<li><a href="#" >link six</a></li>
<li><a href="#" >link seven</a></li>
<li><a href="#" >link eight</a></li>
<li><a href="#" >link nine</a></li>
<li><a href="#" >link ten</a></li>
</ul>
<div>
</BODY>
</HTML>
If I understand what you want to do, using a:active won't help you. The css pseudo-class active shows when the link is clicked (exactly when it is clicked and before the next page loads). After that, it changes to visited.
Edit: I didn't see that you wanted an exclusively CSS solution first. I believe that what you need is something that has already been answered before. Check How to set a active link as default when page first time load an see if it helps :)
Since you don't want a JavaScript solution, I suggest creating a new class for the active <li> tag in your navigation bar. You can do that dynamically (for example with php) or manually for each page within the html.
As other people already commented, it'd be easier to give you an answer that you can apply directly, if you posted your code.
Related
UPDATE: The fiddle link I posted has the working code now. :not(:last-child) and :nth-last-child(n + 2) both work perfectly.
I'm trying to use the nth-child or nth-last-child selector to select every li in a ul except for the last one. The catch is, the length of the list can vary from 1 to 5 elements. I haven't been able to find any documentation or examples of how to accomplish this.
Here is the HTML for the ul:
<ul class="breadcrumbs">
<li>
Home
</li>
<li>
Articles
</li>
<li>
Specials
</li>
<li class="current">
Song Lyrics
</li>
</ul>
Here is my current code:
ul > li:nth-last-child(-1n+4) > a:hover {
color: red;
}
This code still selects the last element in the list. I've also tried the code below, but that doesn't select anything. I tried a number of other combinations as well, but they either didn't work at all or selected the last element.
ul > li:nth-child(1):nth-last-child(2) > a:hover {
color: red;
}
Here is a fiddle.
Use :not(:last-child) to target all except the last.
http://jsfiddle.net/96nd71e3/1/
Use :nth-last-of-type or :nth-last-child
http://jsfiddle.net/t0k8gp4d/
li:nth-last-of-type(n + 2) a {
color: red;
}
<ul class="breadcrumbs">
<li>
Home
</li>
<li>
Articles
</li>
<li>
Specials
</li>
<li class="current">
Song Lyrics
</li>
</ul>
You can use this
<ul class="breadcrumbs">
<li>
Home
</li>
<li>
Articles
</li>
<li>
Specials
</li>
<li class="current">
Song Lyrics
</li>
</ul>
CSS
ul > li{
background:red;
}
ul > li:last-child{
background:black;
}
But if you absolutely need to change their style outside of the main li element use this
ul > li{
background:black;
}
ul > li:not:last-child{
background:red;
}
I have the following code in CSS:
#nav li a:active{
background-color:brown;
}
#nav li a.index{background:purple;}
#nav li a.advertiser{background:red;}
#nav li a.publisher{background:green;}
#nav li a.new{background:blue;}
#nav li a.status{background:orange;}
#nav li a:hover {
border-bottom:5px solid brown;
}
and HTML
<ul id="nav">
<li><a class="index"....
<li><a class="advertiser"...
<li><a class="publisher"...
<li><a class="new"....
<li><a class="status".....
</ul>
The thing is that when i click on it, it transforms to brown but it doesn't stay brown.
Where am i mistaking can't realize.
the :active state will only be active when the user clicks on it; anchor or buttons' active states don't persists after the click is finished.
If you want to keep the anchor to brown after a click, you can use jquery to push a specific class when the user clicks on an anchor:
$('#nav a').on('click', function(e){
e.preventDefault(); //?
$('#nav a.active').removeClass('active');
$(this).addClass('active');
})
:active will give the highlights when the button or text is pressed, you need to code jquery to achieve this. Try this example:
<ul>
<li><a class="black classname" id="click">Home</a></li>
<li><a class="black" id="click">about</a></li>
<li><a class="black" id="click">services</a></li>
</ul>
CSS
.black{color:black}
.classname{color:red}
Jquery
$(document).ready(function(){
$("a#click").click(function(){
$("a").removeClass('classname')
$(this).addClass('classname')
});
});
Demo http://jsfiddle.net/XFYjz/
As i said in title, how i can change background color of a link,when its related page is shown?
i have a side menu, using list and css:
<div id="liteMenu">
<ul>
<li>Dashboard</li>
<li>Edit Profile</li>
<li>Change Password</li>
</ul>
</div>
i need to change bgColor of each link, when user naviagted to its related page.
thanks.
EDIT:
maybe i should to use jQuery and css.
You can whatever style you want on the visited link.. check out w3c: http://www.w3schools.com/cssref/sel_visited.asp
So.. it's like this:
a:visited
{
background-color:yellow;
}
And more options:
a:link {color:green;}
a:visited {color:green;}
a:hover {color:red;}
a:active {color:yellow;}
you could always do this
<div id="liteMenu">
<ul>
<li><a class="dashboard" href="#">Dashboard</a></li>
<li><a class="profile" href="#">Edit Profile</a></li>
<li><a class="password" href="#">Change Password</a></li>
</ul>
</div>
then in the actual html of the page do this
<style>
.dashboard { color:red;}
</style>
do that for each of the pages
Could some one explain me how CSS drop downs works?
I've seen alot of them, most of them has the > selector,
My question is:
How can you make CSS dropdown with the > selector?
I looked towards a lot of tutorials and never understood what does the > do and how does it connects with the HTML classes\Ids.
Could someone explain me that, part by part?
Thank you.
It is used to select direct children.
Consider following markup
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>
A selector of #container > ul will only target the uls which are direct children of the div with an id of container.
It will not target, for instance, the ul that is a child of the first li.
For this reason, there are performance benefits in using the child combinator.
HTML:
<ul class="menu">
<li>
<span>menu 1</span>
<ul>
<li><a href="#" >Sub 1-1</a></li>
<li><a href="#" >Sub 1-2</a></li>
<li><a href="#" >Sub 1-3</a></li>
</ul>
</li>
<li>
<span>menu 2</span>
<ul>
<li><a href="#" >Sub 2-1</a></li>
<li><a href="#" >Sub 2-2</a></li>
<li><a href="#" >Sub 2-3</a></li>
</ul>
</li>
</ul>
css:
ul.menu>li{ /*Only direct children*/
float:left;
width: 60px;
}
ul.menu li ul{
display:none; /*not visible*/
}
ul.menu li:hover ul{
display:block; /* visible when hovering the parent li */
}
Explanation is in the css.
Demo:
http://jsfiddle.net/FH7Z3/
The > operator in CSS means that following expression must be a direct child.
For example, div span matches SPAN elements which are descendants of a DIV element, but div > span only matches SPAN elements which are a direct child of a DIV.
http://www.w3schools.com/cssref/sel_element_gt.asp
see this the > is a child selector. Rather than referencing to all the descendents we want to address only the direct descendents. View it as wanting to select only the children but not grand children or any further.
I want my navigation to look like this:
<icon> <icon> <icon>
Title Longer Title Title
Ideally, I want my code to look like:
<li>
<img src="images/icon.png" />
<a class="link_title">Title 1</a>
</li>
<li>
<img src="images/icon.png"/>
<a class="link_title">Title 2</a>
</li>
<li>
<img src="images/icon.png"/>
<a class="link_title">Title 3</a>
</li>
I already have it horizontal, but not sure how to get the link to appear right under the icon, without using a table, which I don't want to do. (Let me know if I must, though.)
li { text-align:center; }
li a.link_title { display:block; }
Also, you're closing your <a> tags with a </span>. This needs to be corrected:
<a class="link_title">Some Text</a>
try this:
li {
float:left;
text-align:center;
}
li a {
display:block;
}
li img {
margin:0 auto;
}