I'm having some problems getting my CSS selector to pick the parent link only.
<style>
.sidebar .nav li a {
background-color: transparent;
border-right: 1px solid #563D7C;
color: #563D7C;
font-weight: bold;
}
</style>
<div class="sidebar">
<ul class="nav sidenav">
<li>
Menu1
<ul class="nav">
<li>Item1</li>
</ul>
</li>
<li>
Menu2
<ul class="nav">
<li>Item1</li>
</ul>
</li>
</ul>
Unfortunately.. the style applying to ALL links in the nav, my alternative is to put a class on all of the links I want styled, but rather not have to do that.
http://jsfiddle.net/bFxm4/
A child selector matches when an element is the child of some element.
A child selector is made up of two or more selectors separated by >.
CSS 2.0 Specifications - Selectors, 5.6 Child selectors
.sidebar .nav > li > a {
background-color: transparent;
border-right: 1px solid #563D7C;
color: #563D7C;
font-weight: bold;
}
Demo
this work DEMO :
.sidebar .nav.sidenav > li > a {
background-color: transparent;
border-right: 1px solid #563D7C;
color: #563D7C;
font-weight: bold;
}
The ">" means : picks the ones which are directly child
I think that putting a class on all of the parent links is fine. Especially is you are using some loop on the back end to generate the html, then adding a class to each one is simple.
If you're trying to get the style to apply to .sidebar .nav li a only, and not the links in the nested lists, you can change your selector to read like this: .sidebar .nav > li > a. This targets <a> tags that are direct descendants of <li> tags only, and only those that are in the top level list. It won't go any deeper.
try this:
.sidebar > .nav > li > a {
background-color: transparent;
border-right: 1px solid #563D7C;
color: #563D7C;
font-weight: bold;
}
hope this helps
Related
I got a problem with the CSS hover-event.
I created a page with a navigation bar at the top. For compatibility reasons I had to move away from nav and changed it to a simple div. (nav is not known in IE8, but it still has to be working there.)
<div class="nav">
<ul>
<li> <a> Something </a>
<ul>
....
</ul>
</li>
....
</ul>
</div>
That resulted in making the hover on my navigation bar not working anymore. But it's not, that nothing is working, only the first one of the following lines does not do it's job anymore. The background simply does not change.
.nav ul li:hover { background: #BFBFBF; } - not working
.nav ul li:hover > a { color:#FFFFFF; } - working perfectly fine
.nav ul li:hover > ul { display:block; } - working perfect as well
.nav ul {
background: #404040;
list-style:none;
padding:0 20px;
margin: 0;
height: 30px;
text-align:left;
display:block;
}
I double checked basically everything I know, suspected or found, that could be the source of my issue, but I was yet unable to get it back working.
I tried using background-color instead of background, without success.
I want to do it without having to use anything besides HTML and CSS, which should be possible, since it worked, when I still was using the nav-element.
I am noob to css, maybe I'm missing some really simple detail.
Thanks in advance.
Rather than modifying the nav bar content, just try to change the animation for the thing which you are pointing at, I mean that rather than hovering the <li> component just make the text in it hovering
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .2s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
Try defining the <a> element and hovering it as the whole <li> won't hover with multiple overlapping CSS formats
See I created something in html. And your code is working.
Its good if you can paste your html
<head runat="server">
<title></title>
<style type="text/css">
.nav ul li:hover {
background: #BFBFBF;
}
.nav ul li:hover > a {
color: #FFFFFF;
}
.nav ul li:hover > ul {
display: block;
}
</style>
<nav class="nav">
<ul>
<li>
<a>Li 1</a>
</li>
<li>
<ul>
<li>Li 2
</li>
</ul>
</li>
<li>Li 3
</li>
</ul>
</nav>
Based on w3c the correct way in HTML for a nested list is.
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
However I want a border at the bottom of each item in the list, the following code underlines them all but Tea.
li {
border-bottom: 1px solid purple;
}
Any suggestions?
if you mean border bottom on everything you will need to do something like this:
li {
border-bottom: 1px solid purple;
}
li > ul {
border-top: 1px solid purple;
}
li > ul > li:last-child {
border: none;
}
Example
Alternative
Same length lines (but you'll have to find a way to indent the second level bullets)
Otherwise just use text-dexoration
Maybe you can use
text-decoration: underline
This applies to the text in the element.
Your problem is that the li containing tea actually does have a border, but it's a bottom border, so it is below the nested li.
Instead of using text-decoration you can also wrap the text in another element (span or div) inside the li elements, and apply the border to that. Such a solution using div is especially useful if you want the border to be the full width of the element instead of the text alone.
The "Tea" li DOES have a border it's just 'masked' by the border of the last submenu li
See JSfiddle
li {
border-bottom:3px solid red;
}
li ul li {
border-bottom:3px solid green;
}
As everyone above mentioned that the border actually exists for text "Tea" which is at very bottom because li element has display: list-item assigned by default. You can make it visible by using display: inline but keep in mind that you will lose the features of li element such as list-style-type because they are only applicable for display: list-item.
li {
border-bottom: 1px solid purple;
display: inline;
}
li:after {
content:"";
display: block;
}
Working Fiddle
This problem is caused by the fact that the "Tea" li tag contains not just 'Tea', but every other ul and li tag pair except for the one containing "Milk". The "Tea" li is getting underlined, which is actually appearing under the 'Green Tea' underline (if you look closely, you should notice a double underline there, especially if you add padding to you li tags.) Your best bet in this situation (if you are building the list programmatically) is to wrap the li items in another tag:
<ul>
<li><span>Coffee</div></li>
<li><span>Tea</span>
<ul>
<li><span>Black tea</span></li>
<li><span>Green tea</span></li>
</ul>
</li>
<li><span>Milk<span></li>
</ul>
then change your code to:
li span{
border-bottom: 1px solid purple;
}
This will ensure that the text gets underlined, and not the li tag containing the text.
Edit:=====================
This is the same thing that Mr Green is recommending in his comment
Give it a class add add display: inline-block so:
<ul>
<li>
<ul>
<li class="underline">
Some stuff here
</li>
</ul>
</li>
</ul>
and in your css:
.underline {
display: inline-block;
border-bottom: 1px #CCCCCC solid;
}
There are different ways to solve it, I went with this.
li {
border-bottom: 1px solid purple;
}
li > ul > li:first-child {
border-top: 1px solid purple;
}
li > ul > li:last-child {
border: none;
}
I have been trying to create a navigation bar for a website I am making, and I want each button to display a difference colour when highlighted. I have used <ul> to create the navigation bar. The question is, is there a way to use the "a:hover {background:#;}" as inline CSS on a specific element?
I have tried giving each <li> or <a> an id and then creating references to them in the internal style sheet, but can't get it to work. Below is what I have so far;
#menu {height:37px;display:block;margin:20px auto;border:1px solid;border-radius:5px;margin-left:30px;max-width:550px}
#menu ul {margin:0;padding:0;}
#menu li {float:left;display:block;min-width:110px}
#menu a {display:block;padding:12px;font:bold 13px/100% Arial, Helvetica, sans-serif;text-align:center;text-decoration:none;text-shadow:2px 2px 0 rgba(0,0,0, 0.8); background-color:#5A8A41;border-right:1px solid #1b313d; color:#fff;}
#menu a:hover {background:#5D80B0;}
...
<div id='menu'>
<ul>
<li class='active'><a href='#'><span>Home</span></a></li>
<li><a href='#'>XML</a></li>
<li><a href='#'>SQL</a></li>
<li><a href='#'>Java</a></li>
<li><a href='#'>C#</a></li>
</ul>
</div>
Just so your aware, I have been using html and CSS for all of 1 week. So I apologise if this is a stupid question. Thanks.
That's completely impossible; sorry.
Instead, you can create a CSS class for each color and apply the appropriate class to each link:
#menu a.red:hover { background: red; }
If you use :nth-child(X) pseudo class, you can do this without adding a class to every new li you add. For this, I had to move the background-color to li and also added a few other CSS properties, nothing much.
This will be your CSS for adding color:
#menu li:nth-child(1):hover { background: red; }
#menu li:nth-child(2):hover { background: blue; }
#menu li:nth-child(3):hover { background: purple; }
#menu li:nth-child(4):hover { background: yellow; }
#menu li:nth-child(5):hover { background: pink; }
DEMO
+ :nth-child
You could achieve this with jquery :)
$(document).ready(function() {
$('a').hover(function(){
$(this).parent().css({background-color: 'yellow'});
});
});
Inline javascript
<a href='index.html' onmouseover='this.style.textDecoration="none"' onmouseout='this.style.textDecoration="underline"'>Click Me</a>
In a working draft of the CSS2 spec it was declared that you could use pseudo-classes inline like this:
<a href="http://www.w3.org/Style/CSS"
style="{color: blue; background: white} /* a+=0 b+=0 c+=0 */
:visited {color: green} /* a+=0 b+=1 c+=0 */
:hover {background: yellow} /* a+=0 b+=1 c+=0 */
:visited:hover {color: purple} /* a+=0 b+=2 c+=0 */
">
</a>
but it was never implemented in the release of the spec as far as I know.
http://www.w3.org/TR/2002/WD-css-style-attr-20020515#pseudo-rules
I am new to css and i have been trying to come up with a nice looking homepage but got confused with the right selectors to use.
I have designed the buttons very well using unordered lists but the lists in the other content also inherit the formats of the buttons.
how should i assign a one class or two to the unorderd button list?
many thanks!
i want the class to have the following code.
here is the code i used for the buttons.
/* button styling */
ul {
list-style: none;
margin: 0;
}
li {
float: left;
}
a {
background: #404853;
background: linear-gradient(#687587, #404853);
border-left: 1px solid rgba(0, 0, 0, 0.2);
border-right: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
display: block;
font-size: 11px;
font-weight: bold;
padding: 0 20px;
line-height: 38px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
text-transform: uppercase;
}
a:hover {
background: #454d59;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4);
border-right: 1px solid rgba(0, 0, 0, 0.2);
color: #d0d2d5;
}
li:first-child a {
border-left: none;
border-radius: 4px 0 0 4px;
}
li:last-child a {
border-right: none;
border-radius: 0 4px 4px 0;
}
You should scope your selector to make them more explicit.
A good way is, if your ul is in a header element:
header ul {}
header ul li {}
Or also, if it is in some element with id #navigation:
#navigation ul {}
#navigation ul li {}
This will affect all ul elements inside header or #navigation.
Another way is to add an ID to your unsorted list in your html:
<ul id="navigation">
<li></li>
</ul>
In this case you could use just that ID in your selector:
ul#navigation {}
ul#navigation li {}
Or just:
#navigation {}
#navigation li {}
Ok, so as I think you know, you are using very broad selectors here - which is of course the reason why all of your <li> tags are appearing the same, site-wide.
As you say, classes, or even ids could be used to help here.
Although there is some debate over whether you should use ids at all in CSS, I will show you examples of both.
IDs:
First rule of IDs: IDs must be unique to the page!.
This doesn't mean you can't reuse the ID on other pages within your site, but you must ensure that, per page load, your IDs are unique. In CSS selectors, an ID selector is decorated with a #.
Example:
HTML:
<ul id="myList">
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
</ul>
CSS:
/* This selector will select the element with the "myList" ID,
in this case, the <ul> tag in the above example.
Keep in mind, it isn't selecting the <li> tags */
#myList
{
float: left;
}
/* The following style selects all
<li> tags WITHIN any element with the "myList" ID */
#myList li
{
font-weight:bold;
}
Classes:
Classes are, for the most part, the same as IDs but do not have to be unique to a certain page. Classes are decorated with a . (period).
HTML:
<ul class="myList">
<li>Text 1</li>
<li class="selected">Text 2</li>
<li>Text 3</li>
</ul>
CSS:
/* same as before, but now we are targeting a class */
.myList
{
float: left;
}
/* as you can see, there is no difference in the usage here. */
.myList li
{
color:blue;
}
/* if you prefix the class or ID name with an element tag
(in this case, li for the <li> element), then the selector will
only select elements with the specified ID/Class, that is of
that element type.
In this example, the following selector means:
"Select all <li> tags that have the class 'selected'"
This is useful, say, in a navigation bar. */
li.selected
{
/* this will overwrite the
color attribute defined in the
".myList li" style, in this case,
to highlight that the selected item is green */
color:green;
}
JSFiddle: (Very useful site)http://jsfiddle.net/fSsdf/
I hope this helps!
HTML:
<ul class="class1">
<li>Content</li>
<li>Content</li>
</ul>
CSS:
ul.class1{
float: left;
}
I've got a navigation menu. But the menu get's wild.
The submenu class (this is the dropdown if you hover firstmenu). 'firstmenu' are the main areas of the site, hence the first level of the list.
Problem: Submenu get's the Firstmenus values. Even the tiny arrow background: url(images/nav-arrow.png) no-repeat center bottom; in - BUT WHY?!
We already looked into this, split up the code, removed typo3, all JavaScript and ended up with this css code:
#firstmenu {
list-style: none;
margin: 0;
padding: 0;
}
#firstmenu .firstLevel {
float: left;
}
#firstmenu .firstLevel a {
display: block;
font-size: 1.166em;
font-weight: 600;
line-height: normal;
color: #333;
padding: 41px 20px 26px;
margin-bottom: 4px;
}
#firstmenu .firstLevel .current a,
#firstmenu .firstLevel a:hover,
#firstmenu .firstLevel a.selected {
color: #fff;
background: url(images/nav-arrow.png) no-repeat center bottom;
}
#firstmenu .firstLevel a:hover,
#firstmenu .firstLevel a.selected {
background-color: #333;
}
/* Drop-Down Menus */
.submenu {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
}
.submenu > ul {
top: 4px !important;
}
.submenu .secoundLevel {
width: 200px;
background: #fca500;
}
.submenu .secoundLevel a {
display: block;
color: #fff;
padding: 8px 15px;
border-top: 1px solid rgba(255,255,255,0.2);
}
.submenu .secoundLevel a:hover {
background-color: #333;
border-color: #1a1a1a;
}
.submenu .secoundLevel:first-child a {
border-top: none;
}
Anyone knows the fix?
EDIT, html:
<nav id="nav">
<ul id="firstmenu" class="clearfix">
<li class="firstLevel"><a href="index.php?id=99" >Startseite</a></li>
<li class="firstLevel current">Rootserver
<ul class="submenu">
<li class="secoundLevel"><a href="index.php?id=96" >Vergleich</a></li>
</ul>
</li>
<li class="firstLevel">Voiceserver
<ul class="submenu">
<li class="secoundLevel">Preisvergleich</li>
</ul>
</li>
</ul>
</nav>
I think the problem is a matter of understanding of CSS selectors. This selector:
#firstmenu .firstLevel a.selected {
color: #fff;
background: url(images/nav-arrow.png) no-repeat center bottom;
}
States the following: Match ALL <a> links that have a parent with class name firstLevel and it having a parent with ID firstmenu
That means this HTML bit matches:
<ul id="firstmenu" class="clearfix">
// snip
<li class="firstLevel current">Rootserver
<ul class="submenu">
<li class="secoundLevel">Vergleich</li>
</ul>
</li>
// snip
because the "secondLevel" menu has an anchor tag (<a>) that is a child (of any order, ie child, grandchild, great-grandchild, etc) of .firstLevel which is a child (of any order) of #firstmenu.
This is exactly how CSS is suppose to work but there ways to prevent what you're seeing.
The first option is to use the child selector (what I sometimes refer to as "direct descendent" selector) >
.firstLevel > a:hover{ /* code */ }
This selector specifically states: "all anchor tag that you hover which are directly descendent from .firstLevel, but no deeper.
Which means, it matches:
<li class="firstLevel">A</li>
but not the link with value "B" below
<li class="firstLevel">A
<ul>
<li><a href="#">B</b></li>
</ul>
</li>
because the second <a> tag is not directly descendant of .firstLevel, there's a <ul> and <li> between them.
The second option is to "overwrite" the previous style by having another rule with a higher CSS specificity.
#firstmenu .firstLevel .submenu a.selected {
background-image: none; /* remove the arrow from drop-down menus*/
}
There's reasons for doing one or the other.
Using the child selector is good when the styles are very specific to that element. You don't want ANY of the styles to carry over to further elements.
Use the "replacement" technique (for lack of a better term) when you're looking to modify only one specific style from another element. Ie. You want to keep the color, font, font-weight, but only want to remove the background image.
I hope that helps!
Here's some (bad) fiddles showing the base case:
http://jsfiddle.net/zTCbF/
with child selector
http://jsfiddle.net/zTCbF/1/
with the replacement technique
http://jsfiddle.net/zTCbF/2/
#firstmenu .firstLevel a {
This will target any anchor tag under .firstLevel including those under .secondLevel
So when you say...
#firstmenu .firstLevel a:hover,
You are applying your hover styles to ALL anchor tags that are descendants of .firstLevel
You want to say ...
#firstmenu .firstLevel > a {
Which will target only anchor tags that are a direct descendant of .firstLevel