I'm attempting to get a CSS style to apply to the top list item but can't get the rules to apply in the desired fashion. In the example below I'm trying to remove the top border for the very first li item. It works if I put style="border-top: none;" inline on the locationMenuTopItem element but I need to do it with a style block.
Why is the #locationMenu li block overruling the #locationMenuTopItem block?
<html>
<head>
<style>
#locationMenu li {
border-top: 1px solid #e1e1e1;
}
#locationMenuTopItem {
border-top: none;
}
</style>
</head>
<body>
<ul id="locationMenu">
<li id="locationMenuTopItem">Top Menu
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Top Menu 2</li>
<li>Top Menu 3</li>
</ul>
</body>
Why is the "#locationMenu li" block overruling the #locationMenuTopItem block?
It is more specific
#locationMenu > li:first-child
should do the job without having to add additional ids. (Although not in IE6)
This could be a possible answer:
#locationMenu li,
#locationMenu li:first-child ul li
{
border-top: 1px solid #e1e1e1;
}
#locationMenu li:first-child
{
border-top:none;
}
It is overrulie, because the #locationMenu li is deeper than #locationMenuTopItem alone. The more statements in a row, the deeper it is.
Because of CSS specificity - the selector #locationMenu li is more specific than #locationMenuTopItem. Using #locationMenu #locationMenuTopItem will work here.
Here's a graphical guide from Andy Clarke that will help: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
Related
it its possible to select an parent Element by a specific class?
For an example i have an HTML-List:
<ul>
<li>Entry 1</li>
<li>Entry 2</li>
<li class="selected">Entry 3</li>
<li>Entry 4</li>
</ul>
All Elements has an bottom border:
ul li {
border-bottom: 1px solid #FF0000;
}
ul li.selected {
border-bottom: 1px solid #0000FF;
}
How i can tell over CSS that the color of the previous element is blue?
For little example (i know that :previous-child is not valid/exists but it's an little example):
ul li.selected:previous-child {
border-bottom: 1px solid #0000FF;
}
Here is an fiddle: http://jsfiddle.net/3W7PQ/
CSS 4 will allow this with the subject indicator, but there's no way in CSS as it exists today to select an element by reference to following elements.
The usual workaround is to have whatever generates your page specify the relationship itself. So, for example, you might have <li class="before-selected"> followed by <li class="selected">.
I would like to change the color of vertical menu which is created in <ul> and <li> to color by its order. I don't want to give each <li> a class to make the background colorful. But I need css to count it - nth: for example.
Saying I have 10 menu items in <li> :
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
<li>menu 6</li>
<li>menu 7</li>
<li>menu 8</li>
<li>menu 9</li>
<li>menu 10</li>
</ul>
Then I need to use css to change the background color and hover state of each element. So I applied the css:
ul li:nth-child(1) {
background-color: #ccc;
}
And I stuck here. I don't have an idea how to make each <li> a specified background-color. Would you guys please suggest a brilliant solution.
Regards,
In CSS, 'color' refers to font color. You want to use background-color. So your CSS would look like
ul li:nth-child(1) {
background-color: #ccc;
}
ul li:nth-child(2) {
background-color: rgb(60,100,60);
}
etc....
If you want to stripe it with alternating colors you can do this
ul li:nth-child(odd) {
background-color: #ccc;
}
ul li:nth-child(even) {
background-color: rgb(60,100,60);
}
I would advise you to set up classes for the colors, say
.green {
background-color:green;
}
.red {
background-color:red;
}
That way you can simple assign classes to each of your list elements
<li class="green"></li>
plus the added advantage is that you are not styling all ul elements on your webpage.
As #faludi has mentioned, you can refer to each li starting with 1 - nth-child(1) and so on. Or you can just use odd and even.
For the hover color, you can do the following...
ul li:hover {
background-color: #bbbfff;
}
jsfiddle demo
ul li:nth-child(1) {
background-color: #ccc;
}
ul li:nth-child(1):hover {
background-color: #ddd;
}
ul li:nth-child(2) {
background-color: rgb(60,100,60);
}
ul li:nth-child(2):hover {
background-color: rgb(60,100,100);
}
Solution from faludi, detecting li element of vertical menu and change background by its order.
I need to target css for the first level ul submenu in a parent ul.
CSS:
#menu li:hover > ul.sub_menu { ...some styles }
..but this will ofcourse do it for all the sub_menu's, I only want this particular style for the first sub_menu relative to the parent when you hover over the parent list item.
HTML:
<ul id="menu">
<li>Item
<ul class="sub_menu"><!-- target only this one -->
<li>Item
<ul class="sub_menu">etc...</ul><!-- do not do for this one and so on-->
</li>
</ul>
</li>
<li>Item
<ul class="sub_menu"><!-- target only this one -->
<li>Item
<ul class="sub_menu">etc...</ul><!-- do not do for this one and so on-->
</li>
</ul>
</li>
</ul>
Thanks for any feedback...
You can use the :first-child selector:
#menu > li:first-child > ul.sub_menu {
color: red;
}
And then use the descendant selector to revert the changes for the other elements:
#menu > li:first-child > ul.sub_menu ul {
color: black;
}
Demo: http://jsfiddle.net/6y4Sb/
I have match listings dynamically generated. After each member I display a li that displays VS within it. However the very last ul li in the div match shouldnt be visible. Any ideas how I can do that?
HTML
<style>
.match {
}
.match ul {
}
.match ul li {
float: left;
margin-right: 50px;
}
.match ul li:last-child {
display: none;
}
</style>
<div class="content">
<div class="match">
<ul>
<li>Wade Barrett</li>
<li style="">VS</li>
</ul>
<ul>
<li>Shaemus</li>
<li style="">VS</li>
</ul>
<ul>
<li>Randy Orton</li>
<li style="">VS</li>
</ul>
<ul>
<li>John Cena</li>
<li style="">VS</li>
</ul>
<ul>
<li>Edge</li>
<li style="">VS</li>
</ul>
<ul>
<li>Chris Jericho</li>
<li style="">VS</li>
</ul>
<p class="clear"></p>
</div>
</div>
The :last-child pseudo-class should apply to the ul, not li, because you want VS text of the last ul of the list to be hidden. By applying the pseudo-class to li, you're applying styles to the last li of every ul, which is incorrect.
You should also apply a class attribute to the li elements with the VS text so that it's more convenient to match with a class selector.
Change
<li style="">VS</li>
to
<li class="vs">VS</li>
And use this instead of your current :last-child selector:
.match ul:last-child li.vs {
display: none;
}
What browser are you using, IE does not support it. The latest version of the other browsers do, but I would recommend placing a class on it to make it 100%.
I want to create a CSS/JS accordion menu, with HTML like so:
<ul>
<li>First Link
<ul>
<li>Child One</li>
<li>Child Two</li>
</ul>
</li>
<li>Second Link</li>
<li>Third Link</li>
</ul>
The nav structure can get N levels deep, and each child menu will be indented from its parent. I want there to be a border that spans 100% of the width between all nav elements including the n-th level child elements. Like this:
alt text http://files.getdropbox.com/u/64548/nested-nav.png
I cannot for the life of me figure out an easy way to do this without using JavaScript, but it feels like something that should be possible. (I will be using JS to expand/collapse the nav tree).
You need to have the border and padding on the <a> which also must be set to display:block. This gives an added bonus as it makes the whole <li> region clickable.
There is no extra markup needed in the ul. Just define the max number of sublists in your css.
Example here
a {text-decoration:none;}
ul {width:240px;padding:0;list-style:none;border-top:1px solid #000;}
ul ul, ul ul ul {border-top:0;}
li a {border-bottom:1px solid #000;display:block;padding-left:0px;}
li li a {padding-left:40px;}
li li li a {padding-left:80px;}
<ul>
<li>First Link
<ul>
<li>Child One</li>
<li>Child Two
<ul>
<li>Child Two One</li>
<li>Child Two Two</li>
</ul>
</li>
</ul>
</li>
<li>Second Link</li>
<li>Third Link</li>
</ul>
The tiling background image for the divider rows does not contradict resizing (at least should not, with sane CSS renderers).
This is pretty sloppy for my tastes, but basically it requires text-indent instead of padding or margin to achieve the nesting. But then to use a sprite image as the bullet for the <a>, you have to end up taking the current text-indent for the level and bump the sprite image over that many px, minus the sprite image width.
I've changed it to use padding-left on the anchor instead, but then this requires overflow: hidden on the parent div to hide the extra border that gets pushed to the right with each nesting.
And of course, visualize any of the stuff like .two_deep, .expanded, etc. as being done with jQuery, and NOT hardcoded into the CSS. It should be fairly simple to get a ul's depth in the menu.
<html>
<head>
<style>
body {font: normal 11px Arial;}
a:link, a:visited {color: #888; text-decoration: none;}
a:hover, a:active {color: #000; text-decoration: none;}
div {width: 250px; border-top: 1px solid #888; overflow: hidden;}
ul {
width: 100%;
margin: 0; padding: 0;
list-style-type: none;
}
li {
padding: 5px 0;
border-bottom: 1px solid #888;
}
li a {
display: block;
}
.two_deep li a {
padding-left: 25px;
}
.three_deep li a {
padding-left: 50px;
}
.four_deep li a {
padding-left: 75px;
}
.expanded {
display: block;
width: 100%;
border-bottom: 1px solid #888;
margin: -5px 0 5px;
padding: 5px 0;
}
li > ul {margin: -5px 0 -6px;}
</style>
</head>
<body>
<div>
<ul>
<li><a class="expanded" href="#">First Link</a>
<ul class="two_deep">
<li>Child One</li>
<li>
<a class="expanded" href="#">Child Two</a>
<ul class="three_deep">
<li>
<a class="expanded" href="#">Child One of Child Two</a>
<ul class="four_deep">
<li>Child One of . . .</li>
<li>Child Two of . . .</li>
</ul>
</li>
<li>Child Two of Child Two</li>
</ul>
</li>
</ul>
</li>
<li>Second Link</li>
<li>Third Link</li>
</ul>
</div>
</body>
</html>
But honestly, maybe you would rather just use a background image, and have it look ugly/broken when text is resized. The css is a bit 'hack-y' for my tastes, especially all the padding compensation needed due to the anchor and li having to be siblings.
I've tested this in Firefox 3.5, Safari 4, and Opera 9.6. I don't have access to anything else at the moment, so it's probably not even very pretty.
Needless to say it's probably a complete wreck in all IE versions. Sorry… It was just my own little test to see if I was up to the task!
Edit: It DOES work with page zoom and text resize, but again, IE support (?)…