I have this Navbar and I and I want that when a anchor is clicked it get's underlined using CSS:
<div id="nav">
<a data-field="home" class="nav-menu">Homepage</a> <span>|</span>
<a data-field="about" class="nav-menu">About us</a> <span>|</span>
<a data-field="support" class="nav-menu">Support</a> <span>|</span>
<a data-field="contact" class="nav-menu">Contact</a>
</div>
Also how can I make the same thing with a list:
<ul>
<li><a data-field="home" id="homelink" class="tray-menu" id="tray-active" >Homepage</a></li>
<li><a data-field="news" id="newslink" class="tray-menu">News</a></li>
<li><a data-field="products" id="productslink" class="tray-menu">Products</a></li>
<li><a data-field="sales" id="saleslink" class="tray-menu">General Sales T&C</a></li>
<li><a data-field="job" id="jobslink" class="tray-menu">Job Opportunities</a></li>
</ul>
In this case, this case how do I make a <li> element get a specific "selected" css style while the other <li> in the gets grayed out or something?
In Javascript its easy, just manipulate the DOM and set the id or class tag.
Update:
Basically, I have this working, but with using Java (GWT); However I want to know if this is possible to do using just plain CSS and HTML
If you want this effect on the whole page use:
a:link
{
text-decoration:none;
color:#000;
}
a:visited
{
text-decoration:none;
color:#000;
}
a:hover
{
text-decoration:none;
color:#008F68;
}
a:active
{
text-decoration:underline;
color:#000;
}
Or for just the Navigation use the same but put 'li' in front of everything.
The 'Active' attribute' of the CSS is the one that is called upon click.
Sounds like the :target pseudo selector might do the trick. (*See http://css-tricks.com/on-target/ ) (Will not work in older versions of IE)
HTML
<ul>
<li id="homelink">Homepage </li>
<li id="newslink">News</li>
<li id="productslink">Products</li>
<li id="saleslink">General Sales T&C</li>
<li id="jobslink">Job Opportunities</li>
</ul>
CSS
:target {
text-decoration: underline;
color: red;
}
for "a" links (the below lines applies for all links in the page)
a:active
{
text-decoration:underline;
color:red;
}
for second issue give a classname to ul like myul
<ul class="myul">
.myul li {
background-color:red;
}
.myul li.selected {
background-color:blue;
}
Related
Can I use a combination of ID and elements to apply a style to a particular element?
for example:
<ul id="a">
<li>
<a href=...>Howdy</a>
</li>
<li>
<a href=...>Doody</a>
</li>
</ul>
Is there a way to apply the style="font-size:small" to all the anchors that follow the UL with the ID of 'a'?
I'd think something like #a a {font-size:small} would work, but it's having no effect in the css file.
Thanks,
Jo
Yes, use the structure of the HTML to select the anchor tags:
ul li a {
font-size:small
}
Instead of using ID use class selector, so that same class name can be used to multiple ul elemements:
.a li a { /* you can also use .a a {....} */
font-size: 40px;
color: red;
}
<ul class="a">
<li>
<a href=...>Howdy</a>
</li>
<li>
<a href=...>Doody</a>
</li>
</ul>
<ul class="a">
<li>
<a href=...>Hello</a>
</li>
<li>
<a href=...>Boy</a>
</li>
</ul>
So the css that I have works for both html pages, however, the current link styling only works on the first page and doesn't transfer to the 2nd page when clicked. Do you know why this would be?
css that handles the current link styling
li.current > a:link {
border-bottom: 0.3px solid #000000;
}
1st page html (works on this)
<!--Header-->
<header class="boxed" id="header-white">
<div class="header-margin">
<div class="logo"><a class="ajax-link" href="index-2.html">DAVIT AVOYAN</a></div>
<ul class="header-nav">
<li class = "current"><a class="ajax-link" href="index-2.html">UX PORTFOLIO</a></li>
<li><a class="ajax-link" href="about-me.html">About me</a></li>
</ul>
2nd html page (works on this one, only if opened first)
<!--Header-->
<header class="boxed" id="header-white">
<div class="header-margin">
<div class="logo"><a class="ajax-link" href="index-2.html">DAVIT AVOYAN</a></div>
<ul class="header-nav">
<li><a class="ajax-link" href="index-2.html">UX PORTFOLIO</a></li>
<li class = "current"><a class="ajax-link" href="about-me.html">About me</a></li>
</ul>
Please try below css for get link in second page. You need to put "a:visited" property.
<style type="text/css">
li.current > a:link {
border-bottom: 0.3px solid green;
color: red;
}
li.current > a:visited {
border-bottom: 0.3px solid green;
color: red;
}
</style>
The behavior you're seeing is expected. The :link pseudo-class refers to links that have never been visited. By definition, the user must have clicked the link to the current page to get to it, so it will not be selected by :link.
You need to use li.current > a:visited.
How do I make my font color white, on the current nav bar class?
For example, when I click on a link on the nav it adds a class="current" to that link.
But I'm having trouble styling that particular link.
Here's the HTML:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-loggedin-nav mineul pull-right" style="font-size:22px;margin-top:7px; color:white;">
<li>
<a class="current" href="/">
</li>
<li>
Here's my CSS attempt which is way off:
.nav > li > a .current {
color: white;
}
.nav > li > a.current
Just a small change. The space between "a" and ".current" makes it think .current is a new element.
No space between the anchor element selector and the class name selector:
.nav > li > a.current {
color: white;
}
HTML
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-loggedin-nav mineul pull-right" style="font-size:22px;margin-top:7px; color:white;">
<li>
<a class="current" href="/">Text Here</a>
</li>
<li>
CSS
a.current {
color: white;
}
How can I change another class's property when one's hovering.
If I say I have A and B class, A has hover event, If I want to change inside of B when A hover, how can I do?
A:hover {}
B{ color:#FFF; }
A:hover + B{ color:#000; } didnt work
Actually CSS
.has_child is inside of .navi
.navi > ul > li:hover
+ .navi > ul > li > .has_child:after {
color: #09F;
}
HTML
<nav class="navi ">
<ul>
<li style="height:8px; width:8px; padding:0px; margin:0px;">
</li>
<li>
General Config
</li>
<li>
Menu
<ul>
<li style="height:8px; width:8px; padding:0px; margin:0px;">
</li>
<li>
English
</li>
<li>
</li>
</ul>
</li>
<li>
User Level
</li>
<li>
User
</li>
<li>
Tag
</li>
<li>
Log
</li>
<li>
</li>
</ul>
</nav>
Thank you very much for your advice.
==============
Update
Seem like + operator will nor work if have > before.
A:hover + B{ color:#000; } will work fine.
A:hover + C > B{ color:#000; } will not work.
Works for me.
You should check your selectors. What browser are you using?
.A must be inside .B
<div class="A">
<div class="B">
something
</div>
</div>
then in your stylesheet:
.A:hover .B { some css code }
i want to apply the CSS only first li but :first-child apply to all first child of every ul
here is my CODE
#menu-navigation li:first-child{
color:red;
}
When applied to this HTML:
<ul class="nav" id="menu-navigation">
<li>Home</li>
<li>About Us
<ul>
<li>Our Team</li>
</ul>
</li>
</ul>
...both "Home" and "Our Team" turn red.
use the child selector:
#menu-navigation>li:first-child{
color:red;
}
For example: http://jsfiddle.net/w47LD/3/
Wouldn't it be easier to just use an id/class?
<li class="red"> Our Team </li>
.red
{
color: red;
}
Alternatively you could use an ID...
<li id="red"> Our Team </li>
#red
{
color: red;
}